레이아웃
1. 속성 - display
모든 요소는 자기가 기본적으로 가지고 있는 display 값이 있다. 그리고 그 값에 따라 블록 레벨, 인라인 레벨 등 렌더링 박스의 유형이 결정된다.
display 속성으로 해당 요소의 렌더링 박스의 유형을 변경할 수 있으며 심지어 렌더링 여부도 결정할 수 있다.
display 속성
요소의 렌더링 박스 유형을 결정하는 속성이다.
display : value;속성 값
- none : 요소가 렌더링되지 않음
- inline : inline level 요소처럼 렌더링
- block : block level 요소처럼 렌더링
- inline-block : inline level요소처럼 배치되지만 block level의 성질을 가짐
- 그외의 flex , table 등등
추가적으로 inline level 요소 사이의 공백과 개행 처리의 경우 inline 요소는 공백과 개행을 하나의 여백으로 받아들이므로 약 4px의 여백이 생기게 된다.
| display | width | height | margin | padding | border |
|---|---|---|---|---|---|
| block | O | X | O | O | O |
| inline | X | X | 좌/우 | O(설명) | O(설명) |
| inline-block | O | O | O | O | O |
inline 요소의 padding/border 속성
inline 요소의 padding/border 속성은 상하좌우 전부 적용되지만 line-box에 영향을 주지 못하기 때문에 반영되지 않는다.
2. 속성-visibility
CSS에서 요소를 숨기는 몇가지 방법이 있다.
display 속성에서 배웠듯 아예 렌더링이 되지 않게끔 할 수도 있고 다른 위치 관련 속성들을 이용해서 안 보이게 숨기는 방법도 있다.
visibility : visible | hidden | collapse | initial | inherit;- visible 화면에 표시
- hidden 공간은 차지하면서 화면에 표시 X
- collapse 셀 간의 경계를 무시하고 숨김(테이블)
display : none 과 visibility : hidden의 차이점은 DOM에 존재하냐 안하냐 차이
3. 속성-position
position은 요소의 위치를 원하는 곳으로 이동시켜준다. position을 사용하기 위해서는 요소를 이동시키기 위한 좌표 속성인 offset을 활용해야 한다.
position : static | absolute | fixed | relative | sticky | initial | inherit;- static : 기본 값으로 offset값이 적용되지 않는다.
- absolute : 부모 요소의 위치를 기준으로 offset에 따라 배치된다. 부모 요소가 static 일 경우 static이 아닌 상위 요소까지 거슬러 올라간다. normal-flow의 흐름에서 벗어난다.
- fixed : 뷰포트를 기준으로 offset에 따라 배치된다. 부모의 위치에 영향을 받지 않고 스크롤에 관계없이 정해진 위치에 정보가 나타난다.
- relative : 자신이 원래 있어야 할 위치를 기준으로 offset에 따라 배치됨. 부모의 position 속성에 영향을 받지 않고 normal flow의 흐름에 따름
normal-flow란 일반적인 상황에서 각 요소들의 성질에 따라 배치되는 순서를 뜻한다. 예를 들면 block 레벨 요소는 상하로 , inline 요소들은 좌우로 배치되는것을 말한다.
4. 유효성 검사
HTML/CSS 코드를 작성하고 나면 항상 유효성 테스트를 실시해야 한다.
유효성 검사를 통해 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고, 사용성과 접근성, SEO 최적화 개선에도 도움이 된다.
HTML/CSS이 익숙하지 않을 때는 반드시 코드 작성 후 항상 유효성 검사하는 습관을 들이자
