-
[코드스테이츠 TIL] CSS LAYOUT : Display, Box model, Positioning, FloatStudy/HTML & CSS 2019. 11. 23. 10:32반응형
[ 브라우저에서 사용하는 좌표계 ]
: 기본적으로 element는 위에서 아래로, 왼쪽에서 오른쪽으로 확장된다.
왼쪽 상단의 좌표가 (0,0) 이다.
좌표는 px 단위 또는 % 단위 등을 쓸 수 있다.
좌표계를 바탕으로 절대/상대적인 위치에 포지셔닝 할 수 있다.
[ Display 요소 ]
각 요소는 고유한 크기를 가질 수 있으나, inline 요소는 컨텐츠가 차지하는 크기로 고정된다.
inline block 은 width와 height를 별도로 설정할 수 있다.
- 한 줄을 다 차지하는 block
ex) <div>, <p>, <li> ...- 컨텐츠 공간만 차지하는 inline
ex) <span>, <b>, <a> ...
- 높이 + 넓이를 제어할 수 있는 inline-block
(span 태그에 css속성으로 display : inline-block 이라고 입력해주면 넓이+높이 설정가능)
- 요소를 렌더링하지 않도록 설정하는 none
이 속성을 element에 적용하면 보이지 않을 뿐만 아니라 영역도 차지하지 않는다
visibility: hidden 은 보이지는 않지만 영역은 차지한다
[ BOX model ]
컨텐츠 사이즈 계산 방법 설정 종류 : border-box / content-box
보통 css 파일 맨위에 box-sizing : border-box; 설정해두고 디자인을 시작한다.
* { box-sizing : border-box; }
[ Positioning & layout ]
- static : 기본값, 좌상단이 기준
- relative : 기본값+상대적인위치 (현재 요소의 위치를 기준으로)
- fixed : 브라우저 화면의 좌상단을 기준으로 절대적인 위치(부모 요소에 상관없이 무조건 브라우저 화면이 기준)
- absolute : 부모 중 기준점이 있는 경우, 그 기준으로 절대적인 위치
- sticky : 기본적으로 relative처럼 작동하나 스크롤 영역을 벗어나면 fixed 처럼 작동
[ float ]
플로트 속성은 요소가 주변 다른 요소들과 자연스럽게 어울리도록 만들어준다.
요소를 오른쪽 또는 왼쪽 등으로 정렬하기 위해 주로 사용된다.
한 줄을 다 차지하지 않고 왼쪽 혹은 오른쪽으로 요소들을 쌓이게 만들 수 있다.
1. none : 띄우지 않음 (default값)
2. left : 왼쪽에 띄움
3. right : 오른쪽에 띄움
4. initial : 기본값으로 설정
5. inherit : 부모 요소로부터 상속
< clear >
float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해준다.
즉 float 속성이 적용된 요소가 모두 등장한 후에는 그 다음 요소들이 더 float속성에 영향을 받지 않도록 설정해준다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS Float</title> <style> .left { background-color: #FF8C00; width: 100px; height: 50px; float: left; } .right { background-color: #9932CC; width: 100px; height: 50px; float: right; } p { clear: both; } </style> </head> <body> <h1>clear 속성</h1> <div> <div class="left">왼쪽 끝</div> <div class="right">오른쪽 끝</div> </div> <p>다음 요소는 아래에 출력</p> </body> </html>< overflow >
float 속성이 적용된 요소가 자신을 감싸고 있는 컨테이너 요소보다 더 클 때 조절하는 속성
1. visible : 내용이 더 커도 그대로 보인다. 안쪽 내용이 흘러넘친다,
2. hidden: 내용이 넘치면 자른다. 자른 부분은 보이지 않는다.
3. scroll : 내용이 넘치지 않아도 항상 스크롤바가 보인다.
4. auto : 내용이 잘릴 때만 스크롤바가 보이고, 컨테이너 요소 크기가 자동으로 조절된다.
참고 : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow
Tryit Editor v3.6
div.ex1 { background-color: lightblue; width: 110px; height: 110px; overflow: scroll; } div.ex2 { background-color: lightblue; width: 110px; height: 110px; overflow: hidden; } div.ex3 { background-color: lightblue; width: 110px; height: 110px; overflow: au
www.w3schools.com
프론트엔드 작업 시 편리한 사이트
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
HTML, CSS, JAVASCRIPT 한번에 다룰 수 있다
반응형'Study > HTML & CSS' 카테고리의 다른 글
[생활코딩] CSS Box model (0) 2019.11.26 CSS 가상 class 선택자 & Transition 전환 속성 & Transform 속성 (0) 2019.11.24 [코드스테이츠 TIL] CSS 선택자 : CLASS, ID (2) 2019.11.22 [생활코딩] 5. CSS 선택자 & 선택자 우선순위 (0) 2019.08.07 [생활코딩] 4. CSS의 등장 & CSS의 문법 (0) 2019.08.06