CSS_Layout
HTML만으로는 복잡한 레이아웃을 설정하는데 무리가 있기때문에 우리는 CSS을 활용하여 레이아웃을 효과적으로 그릴 수 있다
아래의 속성들을 살펴보자
1. position 속성
- value 값 : static, relative, absolute, fixed 등
- positon 속성은 element(혹은 box)들의 위치를 결정하는데 활용한다.
- 5개의 value값들을 가지며, 브라우저에 따라 1개의 value(sticky)를 제한적으로 지원
| position | |
|---|---|
| static | 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다. |
| absolute | 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. |
| relative | 원래 있던 위치를 기준으로 좌표를 지정합니다. |
| fixed | 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다. |
| inherit | 부모 태그의 속성값을 상속받습니다. |
2. display 속성
- value 값 : inline / inline-block / block/ none 등
- 각기 다른 display 속성을가진 HTML박스들을 block과 inline, 두 가지의 가장 특징적인 형태와 그 중간 단계인 inline, 그리고 element를 화면상에서 숨겨주는 none 성질로 바꿔줄 수 있다.
3. float 속성
- 이미지 주변에 텍스트를 감싸기 위한 용도로 만들어진 속성이며
-컨테이너(부모) 안에서 대상의 좌우 배치(가로 정렬)를 결정한다. - 예를 들면 우측에 사진을, 좌측에는 텍스트를 나누어 배치하고 싶을 때 사용한다. left, right, none(default), inherit(부모를 상속)로 구성되어 있다.
