반응형 웹 퍼블리싱 자료집/CSS: FIN11 [CSS] 벡터 이미지 2025. 3. 8. [CSS] 반응형 화면(미디어쿼리) 미디어 쿼리더보기/* 미디어 쿼리(반응형 화면) */@media screen and (max-width: 1000px) {}@media screen and (min-width: 800px) {} 2025. 3. 8. [CSS] 변형 / 변화 2D 변형더보기/* 2D 변형: inline-block, block만 적용 가능 */transform: scale(1); /* 확대, 축소 */transform: skewX(20deg); /* x축 비틀기 */transform: skewY(20deg); /* y축 비틀기 */transform: translateX(50px); /* 기존 위치 대비 x축 이동 */transform: translateY(50px); /* 기존 위치 대비 y축 이동 */transform: rotate(45deg); /* 회전*/3D 변형더보기/* 3D 변형: 부모요소에 perspective 필수 */perspective: 400px; /* 원금감 설정 */tran.. 2025. 3. 7. [CSS] 그래픽 효과 그래픽 효과더보기/* 투명도 */opacity: 1;/* 박스 그림자 효과. 가로축, 세로축, 흐림정도, 색 */box-shadow: 20px 20px 30px gray;/* 텍스트 그림자 효과. 가로축, 세로축, 흐림정도, 색 */text-shadow: 10px 10px 30px gray;/* 박스 둥글게 설정 */border-radius: 30px;border-radius: 50%;/* 배경 그라데이션: 방향, 출발색, 도착색 */background: linear-gradient(to bottom, blue, red);background: linear-gradient(to top, blue, red);background: linear-gradient(to left, blue, red);backgrou.. 2025. 3. 6. [CSS] 레이아웃(Layout) CSS Reset더보기* { margin: 0px; padding: 0px; list-style: none; /* list 부호 제거 */ text-decoration: none; /* a 태그 밑줄 제거 */}Layout- float으로 요소를 띄워서 배치더보기/* float 사용시 부모요소에 가상요소 추가 필요 */부모요소::after { content: " " display: block; clear: both;}/* 요소를 띄워서 좌, 우측 위치. 모든 형제 요소들에 float 적용 */float: left;float: right;/* 현재 위치 기준으로 위치 이동 */position: relative;top: 100px;bottom: -100px;left: 100px;right: -1.. 2025. 3. 6. [CSS] 배경 배경더보기/* 배경색 */backgroundcolor: blue;background-color: #000000;backgroudn-color: rgb(0, 0, 0);/* 배경 이미지 삽입: 현재 파일 기준으로 경로 작성 */background-image: url(../img/test.png);/* 배경 반복: 기본값 repeat */background-repeat: no-repeat;background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: repeat;/* 배경 위치: 가로, 세로 설정 */background-position: center center;background-position: right bottom;backgrou.. 2025. 3. 6. [CSS] 박스(영역) 크기 박스 크기더보기/* 영역별 크기 지정 */width: 100px;height: 100px;/* 영역별 크기 지정: %는 높이값이 지정되지 않음 */width: 20%;height: 20%;/* 영역별 크기 지정: 브라우저 가로 크기 기준(100등분) 지정 */width: 20vw;height: 20vw;/* 영역별 크기 지정: 브라우저 세로 크기 기준 지정 */width: 20vh;height: 20vh;/* 바깥 여백 지정 */margin: 20px /* 상하좌우 여백 */margin: 20px 50px;/* 상하, 좌우 여백 */margin: 20px auto /* 상하는 20px, 좌우는 가운데 균등 배치 */margin: 20px auto 40px /* 상, 좌우, 하 여백 */margin: 0p.. 2025. 3. 6. [CSS] 폰트 폰트- 구글 웹 폰트 적용: https://fonts.google.com/- Font Awesome: https://fontawesome.com/더보기@charset "utf-8";/* 폰트의 굵기 */font-weight: normal;font-weight: bold; /* 폰트의 크기 */font-size: 60px;font-size: 1rem; /* 최상위 html 기준 상대 비율로 변환 */font-size: 1em; /* 부모 태그 기준으로 상대 비율 적용 *//* 폰트 모양(시스템 폰트: 기본 폰트) */font-family: "돋움";font-family: "굴림";font-family: "serif";font-family: "arial";/* 구글 웹 폰트 */@import url('htt.. 2025. 3. 5. [CSS] CSS 선택자 CSS 선택자더보기@charset "utf-8"; /* 여러줄 주석: 설명글 삽입시 사용*//* 모든 태그 선택자 */* { border: 1px solid black;}/* 태그 선택자: 해당 태그 모두 선택 */h1 { border: 1px solid black;}/* 자손 선택자: 직계 자식과 손자까지 모두 선택 */p strong { border: 1px solid black;}/* 자식 선택자: 직계 자식만 선택 */ul > li { border: 1px solid black;}/* 그룹 선택자: 해당 선택자들 모두 선택 */h1, h2, h3 { border: 1px solid black;}/* 순서 선택자: 해당 순서의 자식 선택 */ul li:nth-of-type(1) { .. 2025. 3. 5. [CSS] 참고자료 - [Doc] CSS Standard- [Doc] MDN: CSS- [Site] HEROPY Tech: HTML, CSS 첫걸음- [Site] TCP SCHOOL: CSS- [Video] Do it! 프런트엔드 웹 디자인 입문- [Video] Do it! 반응형 디자인- [Site] Flexbox Froggy: CSS flex 연습- [Video] Do it! HTML+CSS+자바스크립트 웹 표준의 정석- [Video] Do it! 인터랙티브 웹 페이지 만들기 2025. 3. 5. 이전 1 2 다음 반응형
