1. 단위
px
- 브라우저에서는 기본적으로 16px(=1rem)로 설정됨
- 브라우저의 기본 폰트값을 변경해도 픽셀값은 안 변함
rem(반응형 작업에서 권장)
- html에서 최상위 요소는 html 태그인데, 해당 태그의 font-size가 기준이 됨
- 주변 상황이 바뀌어도 조금 더 명확하게 단위가 수정되는 일이 없도록 만들어 줄 수 있는 장점 있음
- 어느 페이지에서든 고정된 사이즈를 사용할 때 사용(ex) font-size)
em
- 부모 요소에 따라 유동적으로 변해야 하는 경우 사용(padding이나 margin같이 화면에 따라 유연하게 변하는 크기)
- 유지보수 어려움
2. width, height
max-width, max-height : default - none
max-width, min-height : default - 0
3. margin, padding
(1) margin
- 외부 여백 지정
- margin : auto - 가로 너비 요소의 가운데 정렬에 활용
-> 좌우 가운데 정렬을 위해서는 block 요소여야하고, 가로 사이즈가 명시되어야 함
(2) padding
- 내부 여백 지정
- 요소의 크기가 커짐
4. border
- 요소의 크기가 커짐
- border-color : transparent는 투명
5. box-sizing
- 요소의 크기 계산 기준을 지정
- box-sizing : content-box - 요소의 내용으로 크기 계산
- box-sizing : border-box : 요소의 내용 + padding + border 로 크기 계산
6. overflow
- 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
7. display
- 요소의 화면 출력 특성
-
8. opacity
- 요소 불투명도
- 1 : 불투명, 0~1 : 소수점 숫자 사용 가능
- 같은 클래스에 display 속성은 적용 안됨. visibility로 설정해야함.
9. background
- background-color : transparent - 투명함
- background-repeat : repeat, no-repeat, repeat-x, repeat-y
- background-position(배경이미지 위치) : top ... center, px ... rem
- background-size : auto, 단위, cover(비율을 유지, 요소의 더 넓은 너비에 맞춤), contain(비율을 유지, 요소의 더 짧은 너비에 맞춤)
- background-attachment(요소의 배경 이미지 스크롤 특성) : scroll(이미지가 요소를 따라서 같이 스크롤), fixed(요소가 뷰포트에 고정, 스크롤 x)
- background: fixed - parallax 시간 효과 가능
10. position
- 요소의 위치 지정 기준
- static은 값이 없는 것, absolute/relative는 부모 기준으로 설정하는 값이 있는 것
- position 값이 fixed와 absolute로 부여되어 있는 요소는 가로 너비가 최소한으로 줄어드려고 시도함
주의)
"위치상"이라는 개념이 중요함
위치상 부모요소를 기준으로 배치되는데 항상 부모요소 기준으로 배치되는 게 아님(뷰포트 기준으로 배치도 될 수 있음)
그래서 그 구조상의 부모요소에 특정 포지션의 값이 들어있어야함
position:relative추가!
-> 정상적으로 배치됨
- position:relative - 자기 자신을 기준으로 움직이기 때문에 화면에는 아무런 변화가 없음
- position:sticky - 부모 요소 안에서만 동작함. top, left, right, bottom 중 하나의 값 설정은 필수
- position:absolute(많이 사용) - 요소 주변과의 상호작용이 무너짐, display 속성이 block으로 변경됨. 위치상 부모요소를 기준으로 화면의 뷰포트 좌우 끝까지 늘어날 수 없게 됨.
1) 수직 배치 명시 조건
1. position:absolute
2. top:0
3. bottom 0
4. margin : auto 0 -> 브라우저가 자동으로 계산을 하는데 위쪽과 아래쪽 여백을 자동으로 계산하고, 위치값을 통해서 top의 0, bottom 0 지점에 찍혀있기에 브라우저가 판단해서 가운데로 몰아줌.
5. 요소의 높이값도 알아야해서 height도 명시해야함
2) 수평 배치 명시 조건
1. left : 0
2. right : 0
3. margin : auto;
4. width : 100px;
5. position : absolute;
[경우1]
조상 요소(부모의 부모)에 relative를 하고, 부모에 static(기본)을 하면 조상 기준으로 배치됨
[경우2]
부모, 조상 모두 static을 설정해서 포지션이 없는 상태면 설정해야하는 요소는 body, html 모든 요소의 기준을 찾다가 기준이 되는 부모 요소가 없기 때문에 결국 뷰포트를 기준으로 배치가 됨
- position:fixed - 뷰포트 기준으로 배치, display 속성이 block으로 변경됨. top이나 bottom 속성을 사용하지 않아 수직위치값이 없다면, 요소의 원래 위치를 그대로 사용
11. z-index
- 어떤 요소가 위에 쌓이는지 결정
1) 기본값 static 제외하고, 요소에 position 속성의 값이 있는 경우
2) 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3) 1번과 2번 조건이 같은 경우, HTML의 다음 구조일 수록 위에 쌓임
12. display
- flex: 수평정렬
-> 중요한 개념은 display 부분에 flex라는 값이 들어있는 요소는 flex container고, 자식 요소들은 flex items이고, 각각 속성을 따로 부여할 수있음
-> 설정하면 자식요소는 인라인 요소라도 자동으로 블럭요소로 바뀜
- display:flex로 flex container를 만들어야함
- display:inline-flex는 container로 만들지만, inline 요소로 container를 만드는 것
- flex-container는 한줄에 모든 items를 표시하려고 함
13. flex-direction
- 주 축을 설정
- row(행 축, 좌 -> 우), row-reverse(행 축, 우 -> 좌)
- flex-direction은 명시하지 않아도 수평정렬이 기본임
14. flex-wrap
- flex-items 묶음(줄바꿈) 여부
- nowrap(줄 바꿈 없음), wrap(여러 줄로 묶음)
15. justify-content
- 주 축의 정렬 방법
- 수평정렬이면 x축이 주축
- space-around : 아이템들의 둘레의 대한 균일한 간격, 양 옆에 공간이 균등하게 분배됨
space-between : 첫번째 아이템을 주축의 시작점, 마지막 아이템을 주축의 끝점, 빈 공간들은 균등하게 분배
[수평정렬의 경우]
flex-start : 왼쪽 정렬
end 는 오른쪽 정렬
center는 가운데 정렬
16. align-content
- 교차 축의 여러 줄 정렬 방법
- 수직 정렬, 여러줄이라 완전히 위에 붙거나, 완전히 아래에 붙음
- stretch는 기본 값, flex-start, end, center 사용
17. align-items
- 교차 축의 한 줄 정렬 방법
- 한줄이어서 수직정렬일 때 주로 사용하나, 많이 사용은 안함
- 한줄이라 한줄에 대한 시작, 끝점에 정렬이 됨
- 대부분 경우에 align-items 사용 (align-content는 복잡)
*아이템을 완전 중앙에 하려면*
justify-content : 센터 (수평)
align-items: center (수직)
18. order
- 0 : 순서 없음
- 숫자가 작을수록 먼저
19. flex-grow
- flex-item의 증가 너비 비율
- 0 : 증가 비율 없음
- 숫자가 증가 비율
20. flex-shrink
- flex item의 감소 너비 비율
- flex container 너비에 따라 감소 비율 적용
- 1은 기본값, 0은 원래 값대로 크기가 보여짐
- 모든 items를 1:1:1 비율로 container 크기 맞게 찌그러져서 설정
'HTML, CSS' 카테고리의 다른 글
[CSS] Sprite Image, Animation (1) | 2024.01.11 |
---|---|
[HTML] 라이브러리 및 속성 (0) | 2024.01.11 |
[CSS] 속성 2 (0) | 2024.01.11 |
[CSS] 선언 방식, 선택자, 상속, 명시도 (0) | 2023.12.28 |
[HTML/CSS] reset.css, 블록/인라인 요소, 태그(emmet, doctype, meta) (1) | 2023.12.27 |