강의 목표
display
- 각 html 태그는 display 프로퍼티 값을 기본 스타일로 가지고 있다. ⇒ block or inline (기본 스타일)
- display : block
- 따로 너비를 지정하지 않아도 width : 100%
- div, h, p, header, footer, secion, etc.
- sid, height, margin, padding 사용가능
- display : inline
- content에 맞춘 너비
- span, a , img, etc.
- padding, margin 좌우만 지정 가능
display : inline-block
- block,inline의 특징을 모두 가짐
- 즉 기본적인 쓰임은 inline이지만 width, height, margin을 지정할 수 있습니다.
display : none
position
- 요소를 배치하는 방법을 정의하는 프로퍼티
- static
- relative
- 상대 위치, 기본위치를 기준으로 이동
- static과 유사하나 좌표 프로퍼티를 사용할 수 있다.
- sbsolute
- 절대 위치
- ⇒ 부모,조상 요소 중 relative, absolute, fixed가 선언된 곳을 기준으로 좌표프로퍼티가 작동
- 부모,조상 요소 중 딱히 없다면 <body>를 기준으로 위치 조정된다.
- fixed
- 현재 화면을 기준으로 해당 위치에 고정 된다.
- 즉 스크롤을 해도 고정이다.
- z-index
- z축 위치를 말하며
- 값이 높은 것이 전면에 위치한다.
float
- 띄우다는 뜻이며, 요소를 디자인 흐름에서 벗어나게 한 뒤, 사용자가 지정한 방향에 배치하도록 하는 프로퍼티