- block
- 너비 : 너비가 지정되어 있지 않으면, 최대한 유연하게 늘어난다.
- 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다.
- 배열방향 : 한줄에 무조건 1개
- inline-block (특성상 너비를 안정해주면 0이 된다)
- 너비 : 너비가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다.
- 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다.
- 배열방향 : 한줄에 최대한 여러개
display 속성 정리
(이건 복붙용)
| 너비가 설정되어 있지 않다면, 최소한으로 줄어든다. | 너비가 설정되어 있지 않다면, 최대한으로 넓어진다. | 없어진다. |
| 높이가 설정되어 있지 않다면, 최소한으로 줄어든다. | 높이가 설정되어 있지 않다면, 최소한으로 줄어든다. | 없어진다. |
| 글자화 | 블록화 | - |
| 한 줄에 최대한 여러개가 나온다. | 한 줄을 무조건 혼자 쓴다. | - |
| 부모의 text-align에 의해서 정렬 | 스스로 margin-left, margin-right를 사용해서 정렬 | - |
예외
- a, span 엘리먼트는 기본적으로 display가 inline 이다.
- img 엘리먼트는 기본적으로 display가 inline-block 이다.
- inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.
{letter-spacing:??px;} 은 자간 조절
{color:rgba(255,255,255,1);} (수치는 1~255까지, 마지막 a는 불투명도값)
┌ r : red (인자 1(red) : 0 ~ 255 까지 넣어서 실험)
├ g : green (인자 2(green) : 0 ~ 255 까지 넣어서 실험)
├ b : blue (인자 3(blue) : 0 ~ 255 까지 넣어서 실험)
└ a : alpa (불투명도) (인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험)
#77a8c7??
여기서
맨 앞 두글자는 R
중간 두글자는 G
끝에 두글자는 B
추가로 붙는다면 그건 alpa
table 태그
<tr> table row 칸 수를 정할 때
<td> table data 내용을 넣을 때
<th> table header 칸 안에 들어가는 항목을 넣을 때 (td와 다르게 blod하게 표기된다)
css에
table {border-collapse:collapse;} ←해당 코드를 입력하면 (collapse: 무너지다)
이렇게 두께 없는 라인이 적용된다.
이게 원래 table태그를 사용한 표.
19강까지 들었음