CSS
- 크기 지정, 여백
- 테두리, 박스 크기
- 초과, 투명도
- 표시 유형, 레이아웃
- CSS 주의사항
1. 크기 지정, 여백
width, height (max width, height)
- 박스의 너비, 높이 지정 가능
- 블록 레벨 요소에서 사용 가능
auto값을 사용해 브라우저가 값을 계산하게 지정 가능
margin, padding
- 박스의 외부, 내부 여백 지정 가능
- 블록 레벨 요소에서 사용 가능
- 인라인 레벨에서는 좌, 우만 지정 가능
top,bottom,left,right로 상하좌우 지정 가능
여백(margin) 상쇄
- 경우에 따라 요소간의 외부 여백이 상쇄되는 현상
- 인접 형제간의 외부 여백(margin)은 상쇄
- 제일 큰 여백을 따라감
- 또한 부모와 자식 요소의 여백을 분리할 권한이 없을 경우, 또는 둘 다 컨텐츠가 없을 경우도 발생
2. 테두리, 박스 크기
border
- 박스의 네 면에 테두리를 그릴 수 있음
color,style,width를 사용해 박스 테두리 설정 가능- 각 속성은 또한
top,bottom,left,right로 적용 위치를 개별 설정 가능
box-sizing
- 박스 크기를 계산할 때 내부 여백, 태두리의 크기를 포함할지 결정
- 기본값은
content-box로padding,width/height,border-width의 크기가 모두 더해진다. - 값을
border-box로 설정하면width/height값 안에padding, border의 크기가 합해진다.- 결론적으로 컨텐츠의 영역이 좁아지는 결과
3. 초과, 투명도
overflow
- 컨텐츠 내용이 지정한 박스 크기를 초과했을때 대처
- 기본값은
visible로 초과해도 내용이 그대로 노출 overflow-x,overflow-y로 분리해서 지정 가능hidden: 숨김
scroll: 스크롤 바 무조건 노출
auto: 브라우저가 자동으로 결정
opacity
- 박스의 투명도 조절
- 기본값은 1이며 0 ~ 1 사이 소수점으로 조절
- 투명도가 적용되면 자식 요소도 함께 투명해짐
4. 표시 유형, 레이아웃
display
- 요소를 블록, 인라인에 대한 처리의 선택과 자식 요소를 배치하는 레이아웃설정
- 태그마다 가진기본 값이 있음.
span,strong같은 인라인 태그의display유형을block으로 변경하여 블록 레벨 요소에서 사용할 수 있는 CSS도 적용 가능- 반대로 블록 레벨 유형의
display도inline으로 변경 가능 none값을 사용하여 요소를 숨기기도 가능
visibility
- 레이아웃을 변경하지 않고 시각적으로 보이거나 숨길수 있음
display의none과 다르게 시각적으로만 숨겨지기 때문에 레이아웃 상에서 공간을 그대로 차지함hidden으로 숨겨진 요소는 접근성 트리에서 제외되기 때문에 스크린 리더가 읽지 않는다.
float
- 문맥의 흐름으로부터 빠져나와 좌우측에 배치되는 속성
left,right로 배치 가능
position
- 문서 상에 요소를 배치하는 방법을 지정
top,right,left,bottom으로 offset 제어 가능
flexbox
- 유연함을 가진 1차원 레이아웃을 만들 수 있음
justify-content: 가로축 정렬
align-items: 세로축 정렬
flex-grow,flex-shrink: 유연성 조절
flex-basis: 크기 조절
flex-direction: 축 바꾸기
gap,order: 여백과 순서
grid
- 수평선과 수직선을 가진 2차원 레이아웃을 만들 수 있음.
grid-template: 바둑판 조절
repeat: 반복하기
grid-row,grid-column: 셀 확장
grid-area: 영역 지정, 배치
gap,order: 여백과 순서
5. CSS 주의사항
- 이름 지을 때 대,소문자 주의. 한글도 사용할 순 있는데, 지양하자
- 계층 잘 넣었는지 확인
- 마크업 순서랑 css 순서를 같이 하는게 좋은편.
- class, id는 숫자로 시작 불가
