[목차]
01. 배치, position
💡
웹 문서에서 이미지나 글자를 원하는 위치에 넣고 싶을 때 사용합니다.
1) 사용 방법
- 기준을 먼저 정한다.
- 위치 설정 값을 사용한다. (left, right, top, bottom)
2) 기준 설정 값
- static 기본값
- 요소 자기 자신 기준 : relative👉🏻정상적인 배치에 어긋나기 때문에 relative를 사용해서 배치하는 경우는 드물어요.
- 위치 상 부모 요소 기준 : absolute👉🏻무조건 부모 요소가 아니고 내 위치 상 부모 요소 기준으로 배치입니다.
➡️ 사용방법
1️⃣ 위치 상 부모 요소를 먼저 relative로 기준을 잡는다.
2️⃣ absolute로 기준을 잡고
3️⃣ 방향 설정
- 뷰 포트(화면 전체) 기준 : fixed
3) 위치 설정 값
- left, right, top, bottom, z-index
[코드예제] position
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>title</title> <link rel="stylesheet" href="linkToCSS" /> <style> .container { width: 300px; height: 300px; background-color: chartreuse; /* 위치 상 부모 요소로 인식 */ position: relative; } .container .item { border: 2px solid red; } .container .item:nth-child(1) { width: 150px; height: 100px; } .container .item:nth-child(2) { width: 250px; height: 50px; /* 기준 */ position: absolute; top: 30px; right: 30px; } .container .item:nth-child(3) { width: 200px; height: 100px; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html>
02. 요소가 쌓이는 순서
💡
우리가 화면에서 볼 수 있는 요소 중 어떤 요소가 사용자와 더 가깝게 있는지(더 위에 있는지) 결정하는 것입니다.
조건
1️⃣ 요소에 position 속성과 값이 있는 경우에는 더 위에 쌓인다.
2️⃣ 모든 요소에 position 속성과 값이 있는 경우에는 z-index속성의 값이 더 높으면 위에 쌓인다.
- z-index 숫자가 높을수록 위에 쌓인다
3️⃣ 1,2 번까지 조건이 같은 경우에는 나중에 작성된 경우 위에 쌓인다.
03. 변환
💡
요소를 변환하는 속성입니다.
항목
👉🏻원근법, 이동, 크기, 회전, 기울임➡️ 요소를 이동시키는 함수 translate();
➡️ 요소를 회전시키는 함수 rotate(deg); (degree각도)
04. 전환
💡
하나의 스타일을 완전히 다른 스타일로 바꾸는 것입니다. (사각형 ➡️ 원형)
항목
1️⃣ transition-property
👉🏻대상을 지정. css 속성과 이름 명시➡️ transition-property : width, height;
2️⃣ transition-duration
👉🏻필수 속성. 전환 효과가 일어날 시간을 명시➡️ 0s : 전환 효과 없음
➡️ 시간을 작성. 소수점 작성 가능. (0생략가능 .5)
3️⃣ transition-timing-function
👉🏻타이밍 함수 지정➡️ ease : 기본값. 느리게 > 빠르게 > 느리게
➡️ linear : 일정하게
➡️ ease-in : 느리게 > 빠르게
➡️ ease-out : 빠르게 > 느리게
4️⃣ transition-delay
👉🏻대기 시간 지정5️⃣ 시간을 지정하는 속성 2개
👉🏻transition : 3s 2s ease;➡️ 첫번째 : duration
➡️ 두번쨰 : delay
05. flex
💡
1차원(수평 또는 수직) 레이아웃을 만드는 Flex 정렬
1) 조건
👉🏻부모와 자식 요소가 필요하다.- 부모 요소 ➡️ flex 지정
2) 용어
- 부모 : 플렉스 컨테이너
- 자식 : 플렉스 아이템
- 메인축(main axis) : 수직 or 수평
- 교차축(cross axis) : 수직 or 수평
3) 컨테이너 속성
👉🏻플렉스 아이템에 작성하면 동작하지 않습니다.1️⃣ display : flex;
- 부모 요소에 display : flex; 작성하는 것이 flex의 시작
2️⃣ flex-direction
- 아이템들이 배치되는 주 축을 담당한다.
3️⃣ flex-wrap
- flex item의 줄바꿈 여부를 결정한다.
- nowarp : 줄 바꿈 없음. 한줄에 item을 끼워 넣으려고 시도하며 밖으로 빠져 나간다.
- wrap : 여러줄로 묶는다. 자리가 없으면 다음 줄로 넘어간다.
- wrap-reverse : 여러줄로 묶는다.
4️⃣ flex-flow
- 배치 방향과 줄 바꿈을 한번에 지정
- flex-flow : row wrap; (수평 정렬, 여러 줄 배치)
5️⃣ justify-content
- 주축 정렬 방법을 지정
값 (주 축이 수평축일 경우)
- start : flex item을 시작점(왼쪽)으로 정렬한다.
- end : flex item을 끝점(오른쪽)으로 정렬한다.
- center : flex item을 가운데로 정렬한다.
4) 아이템 속성
1️⃣ order
👉🏻flex item의 순서입니다.- 0 : 순서 없음
- 숫자 : 숫자가 작을수록 순서가 빠르다.
2️⃣ flex-basis
👉🏻item의 기본 크기를 설정합니다.3️⃣ flex-grow
👉🏻아이템이 늘어날 비율을 작성합니다.- div 요소 A B C 를 0, 2, 1로 값을 주면 B와 C가 2:1 비율로 늘어난다.
06. grid
💡
두 방향(수평과 수직)레이아웃 시스템입니다.
1) 조건
- 부모 컨테이너에 display : grid;를 작성하는 것이 시작 용어
- 몇 개의 컬럼 또는 로우를 만들지 각각의 사이즈는 어떻게 할지 정해줘야 한다.
2) 용어
- 부모 : 그리드 컨테이너
- 자식 : 그리드 아이템
- 가로 : row
- 세로 : column
3) 컨테이너 속성
➡️ repeat() 함수
👉🏻grid-template-columns: repeat(5, 1fr);- 반응형 repeat(3, 1fr);
- px은 고정.
- %, fr은 반응형 (fr = fraction 비율)
➡️ grid-template-columns
👉🏻grid-template-columns: 50px 100px 50px 100px;➡️ grid-template-rows
👉🏻grid-template-rows: 50px 100px 50px 100px;➡️ grid-auto-rows
👉🏻grid-auto-rows : 100px;- 몇 줄이 나올지 모르는 상황에서 그냥 100px로 고정하겠다.
- (min-content/max-content) : 아이템에 작성되어 있는 콘텐츠 사이즈가 다양할 경우 사용
➡️ grid-gap
👉🏻grid cell 사이의 간격을 조정합니다.➡️ grid-area
👉🏻grid 사용 시 영역에 이름을 만들어서 배치할 수 있습니다. grid-area : 지정할 영역의 이름;- 한줄에 들어갈 영역은 “ ”(큰따옴표)로 묶어준다.
* { grid-template-areas: "header header header" "side-a main side-b" "footer footer footer"; }- 반응형 repeat(3, 1fr);
4) 아이템 속성
➡️ order
👉🏻grid item의 배치 순서- 작은 숫자일수록 먼저 배치
[코드예제] grid
➡️ [html.html]
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>grid</title> <link rel="stylesheet" href="./css/main-6.css" /> </head> <body> <div class="container"> <img src="https://cdn.pixabay.com/photo/2019/08/07/14/11/dog-4390885__340.jpg" alt="아련한 눈빛 강아지" class="dog-img img1"> <img src="https://cdn.pixabay.com/photo/2016/05/09/10/42/weimaraner-1381186__340.jpg" alt="눈싸움 강아지" class="dog-img img2"> <img src="https://cdn.pixabay.com/photo/2015/07/09/19/32/dog-838281__340.jpg" alt="강쥐1" class="dog-img img3"> <img src="https://cdn.pixabay.com/photo/2019/08/25/13/34/dogs-4429513__340.jpg" alt="강쥐2" class="dog-img img4"> <img src="https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255__340.jpg" alt="강쥐3" class="dog-img img5"> <img src="https://cdn.pixabay.com/photo/2020/06/30/22/34/dog-5357794__340.jpg" alt="강쥐4" class="dog-img img6"> <img src="https://cdn.pixabay.com/photo/2016/11/22/23/13/black-dog-1851106__340.jpg" alt="강쥐5" class="dog-img img7"> </div> </body> </html>➡️ [main.css]
body { padding: 5rem; background-color: chartreuse; } .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "img1 img1 img1" "img4 img5 img6" "img4 img2 img2" "img7 img3 img3" } .dog-img { width: 100%; height: 100%; object-fit: cover; } .img1 { grid-area: img1; } .img2 { grid-area: img2; } .img3 { grid-area: img3; } .img4 { grid-area: img4; } .img5 { grid-area: img5; } .img6 { grid-area: img6; } .img7 { grid-area: img7; }
07. 미디어 쿼리
💡
반응형 웹 디자인의 기본이 되는 미디어 쿼리
css에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다.
@media(조건) {
/* css스타일 규칙 */
}
08. 헬퍼 클래스
💡
공통으로 적용되는 스타일 규칙들을 만들어서 import 해줍니다.
tag : #position #요소순서 #transform #transition #flex #grid #미디어쿼리 #헬퍼클래스
Uploaded by N2T