TIL

---

What I Learn?

1) 오늘 배운 CSS

box-sizing: border-box

=> 지정한 CSS width 및 height를 전체 영역에 적용합니다. border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있습니다.

text-align: justify

=> 양쪽 정렬 (문단의 좌우 공간을 동일하게 해준다)

justify-content: space-between

=> 해당 컨텐츠의 요소들의 간격을 가로를 기준으로 끝과 끝으로 넓힌다.

font-weight: 400;

=> 글자 굵기를 지정하는 속성 (400은 기본 굵기이며 그 밑으로는 얇은 굵기, 그 위로는 굵은 굵기이다.)

flex-wrap: wrap;

=> 나열된 요소들의 총 넓이가 부모 넓이보다 클 때 자동으로 정렬해주는 속성. (기본값은 nowrap 이며 wrap 으로 설정 시 위 설명과 같이 적용됨)

align-content: space-between;

=> 해당 컨텐츠의 요소들의 간격을 세로를 기준으로 끝과 끝으로 넓힌다.

letter-spacing: 10px;

=> 각 글자 사이의 간격을 10px 만큼 조절한다.

---

2) Display, Position

2-1. display: block

div 와 같은 효과를 준다. (컨텐츠가 없어도 background-color 를 주면 보임)

2-2. display: inline

span 과 같은 효과를 준다. (컨텐츠가 있어야만 보인다.)

2-3. display: inline-block

2-1 과 같은 효과이지만 한 줄에 정렬을 해준다.

2-4. position: static

position 의 기본값이다.

2-5. position: relative

원래 있던 곳에서 내가 지정한 곳으로 이동하게 된다. (내 맘대로 이동하게 만들 때)

2-6. position: absolute

가까이에 있는 상자에서 위치 변경이 일어난다.

2-7. position: fixed

컨텐츠가 아닌 페이지 상에서 위치 변경이 일어난다.

2-8. position: sticky

스크롤을 내려도 원래 지정된 자리에 고정된다. (nav 바 처럼)