Summary
- Box Properties
- Font Properties
- text Properties
- background Properties
Daily Tutorial
1. Margin Collapsing
부모-자식, 형제간의 margin이 중첩 되는 현상. margin의 top, bottom에서만 발생!
- 부모-top & 자식-top
- 부모-bottom & 자식-bottom
- 이전형제-top & 다음형제-bottom
- 이전형제-bottom & 다음형제-top
2. 말줄임표(...)
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
3. 단어 줄바꿈(CJK)
영어는 자동으로 단어 단위 줄바꿈이 되지만 한글은 그렇지 않다.
한글 단어 줄바꿈 해줄 때 사용.
- word-break: keep-all;
또는 아주 긴 단어가 있을 경우 줄바꿈 경계를 잡지 못하고 넘친다.
영역 크기에 따라 알아서 줄바꿈을 명령할 때 사용.
- overflow-wrap: break-word;
4. 이미지의 대체 텍스트 제공
div 내에 backround로 이미지를 삽입하고 대체 텍스트를 제공할 경우
- text-indent: -9999px;
5. linear-gradient
background-color에서 써야할 것 같지만 background-image에서 써야한다.
- background-image: linear-gradient(45deg,red,blue);
6. float
본래 신문 기사 레이아웃 용도로 사용되나 clear 속성과 함께 수평 정렬에도 사용했었다.
현재는 flex, grid로 대체되었다.
Notes
1. CSS 제어 항목
- 박스 모델
- 글꼴, 문자
- 배경
- 배치
- 플렉스(정렬)
- 전환
- 변환
- 띄움
- 애니메이션
- 그리드
- 다단
- 필터
2. Box Properties
2-1. width, height
요소의 가로/세로 너비
- auto (default) (브라우저가 너비를 자동으로 계산)
2-2. max-width, max-height
요소의 최대 가로/세로 너비
- none (default)
2-3. min-width, min-height
요소의 최소 가로/세로 너비
- 0 (default)
2-4. margin
요소의 외부 여백. 음수 사용 가능.
- 0 (default)
- auto (브라우저가 자동으로 계산, 가운데 정렬에 활용)
2-5. padding
요소의 내부 여백. 요소의 크기 증가.
- 0 (default)
- % (부모 요소의 가로 너비에 대한 비율로 지정)
2-6. border-width, style, color & radius
외곽선의 두께(border-width), 종류(border-style), 색상(border-color) 지정.
요소의 크기 증가.
- medium, none, 글자 색상을 상속 (default)
- border-radius (default: 0)
2-7. box-sizing
- content-box (default) (요소의 컨텐츠로 크기 계산)
- border-box (컨텐츠 + padding + border)
2-8. overflow
- visible (default) (넘친 내용 그대로 표시)
- hidden (넘친 내용 잘라내기)
- auto (넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성)
2-9. display
- block(div), inline(span), inline-block (default)
- flex (1차원 레이아웃)
- grid (2차원 레이아웃)
- none (화면에서 사라짐)
2-10. opacity
- 1 (default) (불투명)
- 0~1 (0부터 1사이의 소수점 숫자)
3. Font Properties
3-1. font-style
- normal (default) (기울기 없음)
- italic
3-2. font-weight
- normal, 400 (default)
- bold, 700 (두껍게)
- 100~900
3-3. font-size
- 16px (default)
3-4. line-height
한 줄의 높이.
- normal (default) (브라우저의 기본 정의 사용)
- 숫자 (요소의 글꼴 크기의 배수로 지정)
3-5. font-family
폰트 후보들을 나열하고 마지막에 폰트 계열(ex.serif)을 써준다.
후보들 모두 사용이 불가할 경우 폰트 계열 중 표시 가능한 폰트가 사용된다.
- font-family: font1, "font-2", ..., sans-serif;
4. Text Properties
4-1. color
- rgb(0,0,0) (default) (검정)
4-2. text-align
- left (default)
- right
- center
4-3. text-decoration
- none (default)
- underline
- line-through
4-4. text-indent
- 0 (들여쓰기 없음)
- 음수 사용 가능 (outdent)
5. Background Properties
5-1. background-color
- transparent (default) (투명)
5-2. background-image
- none (default)
- url("경로")
5-3. background-repeat
- repeat (default) (수직/수평 반복, 바둑판 배열)
- repeat-x (수평 반복)
- repeat-y (수직 반복)
- no-repeat
5-4. background-position
- top, bottom, left, right, center (방향)
- px, em, rem (단위)
5-5. background-size
- auto (default) (이미지의 실제 크기)
- cover (비율 유지, 요소의 더 넓은 너비에 맞춤)
- contain (비율 유지, 요소의 더 짧은 너비에 맞춤)
5-6. background-attachment
- scroll (default) (이미지가 요소를 따라 같이 스크롤)
- fixed (이미지가 뷰포트에 고정, 스크롤 X)
