1.블록요소

1)자동줄바꿈
2)너비값 미지정시 부모태그 너비값의 100%를 상속받음
3)너비값과 높이값 지정 가능
4)블록요소는 블록요소와 인라인요소를 모두 감쌀 수 있다.
5)단, p태그와 h1시리즈 태그는 서식관련 요소이기 때문에 내부에 div나 다른 블록 요소를
자식으로 넣을 수 없다.

2. 인라인 요소

1)자동 줄바꿈이 되지 않고 옆으로 나열된다.
2)너비와 높이값 모두 인라인 태그로 감싼 텍스트 자체의 크기로 설정된다.
3)너비와 높이값 지정이 불가함
4)인라인 요소 태그는 인라인 요소만 감쌀 수 있다.

3. 인라인 블록

1)자동 줄바꿈이 되지 않고 옆으로 나열된다. (인라인)
2)너비와 높이값 모두 인라인태그로 감싼 텍스트 자체의 크기로 설정된다 (인라인)
3)너비와 높이값 지정가능 (블록)
4)인라인블록요소는 블록요소와 인라인 요소를 모두 감쌀 수 있다 (블록)
5)블록요소나 인라인 요소를 float 배치하면 자동으로 인라인블록속성으로 변경이 된다.
6)블록요소나 인라인 요소를 position:absolute 혹은 position:fixed 적용하게 되면, 자동으로 인라인 블록 속성으로 변경된다.

4. Overflow

*WHEN?
자식 컨텐츠가 부모태그를 넘겼을 때 처리하는 방법

1)visible: 넘친 컨텐츠가 그대로 보임
2)hidden: 넘친 컨텐츠가 보이지 않음
3)auto: 텍스트가 넘칠 때는 스크롤바를 자동으로 생성

5. Padding

안쪽 여백 설정시 주의점
특정 영역에 padding값을 추가하면 원래 크기에 padding값만큼 사이즈가 커짐

해결방법

1) padding을 준만큼 다시 너비, 높이값에서 빼준다.
2) padding을 설정한 다음 box-sizing을 border-box로 추가한다.

6. Margin (바깥 여백)

1) 값이 네 개일 때 Top->Right->Bottom->Left '시계방향'으로 간다.
cf) 특정 방향 설정 margin-left:20px;
가운데 정렬 margin:0 auto;

*margin 겹침현상

만약 마진값이 좌우로 붙으면 붙으면 괜찮지만 상하로 붙으면 큰 값 하나만 적용된다

margin:0 auto; 와 text-align:center;의 차이점

1) margin:0 auto; 는 블록요소 자체를 가로 가운데에 배치
2) text-align:center; 은 블록요소 안쪽에 있는 인라인 요소를 가운데에 배치

tip) 블록요소 안에서 글자를 세로 가운데 배치하는 방법 (한글자인 경우 간단하개)
-> 블록요소의 높이값과 line height를 동일하게 설정
line height는 부모태그에 주로 쓴다

7. Float 설정하기

1) 먼저 좌우 배치할 모든 블록요소에 float:left를 설정한다.
-> float된 요소의 높이값을 부모태그가 인식하지 못함

해결책 플롯을 해제해야한다.
-> float된 요소의 직계부모 태그 믈록요소에 부모태그명
::after {content'';, distplay:block;, clear:both;}

8. Position (relative/absolute/fixed)

1) position absolute는 무조건 가로축, 세로축 좌표값을 꼭 줘서 원하는 위치에 배치할 때 쓰임

주의
absolute된 요소는 부모요소에 position 속성이 있는 태그 기준으로 움직인다.
그렇기 때문에 float된 레이아웃 관련된 덩어리에는 absolute 대신에 relative 적용

2) position relative는 특정요소에 아무런 변화를 주지 않으면서 단지 position 값만 부여한다.

3) absolute relative요소는 겹칠 수가 있는데 Z-index값이 높은 쪽이 위로 올라온다.

cf)box-shadow

box-shadow: 5px(가로) 5px(세로) 5px(블러효과) aqua(색상);

profile
기본이 튼튼해야

0개의 댓글