08-1 레이아웃을 구성하는 CSS 박스 모델
블록 레벨 요소와 인라인 레벨 요소
블록 레벨 요소 : 브라우저 화면에서 한 줄 전체를 차지 - <p>
인라인 레벨 요소 : 자기가 필요한 부분만큼만 차지 - <span>
박스모델
패딩 : 콘텐츠와 테두리 사이의 영역
마진 : 다른 박스 모델과 박스 모델 사이의 영역
브라우저-검사 들어가서 computed 탭에 들어가보면 박스모델이 보임.
컨텐츠 영역, 패딩, 테두리, 마진의 각 지정된 값이 보임
padding은 따로 지정하지 않으면 '-' 로 표시됨
margin은 따로 지정하지 않으면 브라우저 기본값이 지정됨
박스모델 - 콘텐츠 영역
실제로 내용이 들어가는 부분을 말함.
크기 지정 - width(너비), height(높이)
콘텐츠 영역의 크기만 가지고 배치하다보면 padding, border, margin 영역의 크기로 인해 생각대로 되지 않음
따라서 박스모델의 너비값을 계산하려면 콘텐츠 영역의 크기와 패딩, 보더의 너비도 계산해야함
=>복잡하기 때문에 한번에 조절할 수 있는 box-sizing 속성을 이용함
box-sizing 속성
.box2 {
box-sizing: border-box; <-보더 박스까지 계산해서 아래의 크기가 되게 해라
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid #00f;
}
예)
box-sizing: border-box;
width: 200px
-> 전체 박스모델의 너비 = 10+20+200+20+10 = 260px
box-sizing: border-box;
width:200px
-> 전체 박스모델의 너비 = 10+20+140+20+10 = 200px
박스 모델 - 테두리
테두리에는 네 방향이 있음,
네 방향 각각에 따로 테두리를 지정할 수도 있고, 네 방향을 한꺼번에 지정할 수도 있음
한꺼번에 지정할 때는 방향 순서를 지켜야함 top->right->bottom->left (위에서부터 시계방향)
이 순서는 테두리 뿐만 아니라 padding, margin 모두 같음
border-style, border-color, border-width는 다 합쳐서 border에서 지정할 수 있음
여러 속성(-style, -color, -width)을 따로 지정할 때에 가장 먼저 지정해야 하는 것은 border-style임(border에서 한번에 지정할때는 순서 상관없음)
-border-style 속성
none : 테두리 없음. 기본값
hidden : 테두리 숨김.border-collapse: collapse; 일 경우 다른 테두리도 표시되지 않음
solid : 실선
dotted : 점선
dashed : 짧은 직선
double : 이중선, 두 선 사이의 간격이 border-width값이 됨
-border-width 속성
테두리 두께(굵기) 지정
thin, medium, thick 등의 키워드를 사용할 수도 있고 픽셀 값을 사용할 수도 있음
네 테두리의 두께를 각각 지정할 수도 있음( #box1 { border-width : thick thin thin; } )
값을 하나만 주면 네 방향 모두 같은값 적용,
2개 주면 첫번째 값은 top, bottom 값이고, 두번째 값은 right, left 값이 됨
3개 주면 top부터 right, bottom에 순서대로 적용되고 값이 주어지지 않은 left는 마주보는 right에 준 값과 똑같이 적용됨
4개 주면 top부터 시계방향으로 적용
-border-color 속성
테두리 색상 지정. rgb나 색깔이름 주면 됨
-border 속성
border: 3px dotted blue; <-네 방향 테두리의 굵기(width), 스타일(style), 색깔(color) 한번에 지정
border-top(right 등 다른 방향 각각 지정할 수 있음) : 5px solid rgb(75, 70, 70);
-border-radius 속성
테두리는 보통 사각형 모양인데, 이 속성을 이용하면 테두리 꼭짓점을 둥글게 표현할 수 있음
주는 값(픽셀 단위) 만큼의 반지름을 가진 원이 각 모서리에 들어간다고 생각하면 됨
퍼센트로 값을 주면, 원의 반지름은 박스 가로너비의 __%, 세로 높이의 __%가 됨
해당 속성을 이용하면 삽입한 이미지의 꼭짓점도 둥글게 처리할 수 있음
(50%를 주면 이미지가 원으로 나타남)
박스모델 - 마진, 패딩
박스모델에서 여백을 조절하는 속성은 마진과 패딩이 있음
마진은 박스모델과 박스모델 사이의 여백. 요소와 요소 사이의 간격 조절함.
마찬가지로 값 하나만 주면 네 모서리의 여백에 적용, 2개 주면 위아래/양옆에 적용, 3개 주면 왼쪽 여백은 오른쪽 여백과 같은 값 적용, 4개 주면 위에서부터 시계방향으로 각각 적용
마진 사용시, 마진 중첩 현상에 유의해야 함
요소를 세로로 배치할 경우, 마진과 마진이 만나면 각각 더해져서 배치되지 않고 그 중 큰 값만 적용됨(겹쳐진다고 보면 됨)
각 위아래 마진을 30px씩 주면, 예상대로는 맨 위 박스와 그 아래 박스 사이의 간격은 60px이 될 것 같은데
실제로는 마진 중첩 현상에 의해 30px의 간격만 표시됨
가로로 배치할 때에는 상관없음
padding 속성은 콘텐츠 영역과 테두리 사이의 여백을 말함
마진을 지정하는 방법과 동일하고, padding값을 주지 않으면 테두리에 콘텐츠가 바짝 붙어 보기에 좋지않음
08-2 레이아웃을 구성하는 CSS 박스 모델
목록을 사용해 내비게이션 만들기
목록 자체는 블록 레벨 요소
블록 요소->인라인 요소 바꿀때는 display 속성 사용
네비게이션처럼 보이게 하기 위해
nav ul {
list-style: none;
}
nav ul li {
border: 1px;
padding: 20px;
margin: 0 20px;
}
- 불렛을 없앰
- 목록의 각 항목에 테두리 및 내부여백, 외부(좌우)여백 설정,
이제 각 항목을 가로로 배열하기위해 display 속성 이용
display의 값으로 줄 수 있는 요소는 엄청엄청 많음
그 중 블록요소를 인라인요소로 바꿀 수 있는건 inline-block, inline-flex, inline-flexbox, inline-table 등이 있음
inline-block은 형태는 인라인요소로 사용하되 그 안의 각 요소는 블럭요소로 사용한다는 의미.
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
border: 1px;
padding: 20px;
margin: 0 20px;
}
- 인라인블럭으로 저장시 가로 네비게이션 메뉴로 사용할 수 있게 됨
float 속성
div {
padding:20px;
margin:10px;
}
#box1 {
background: #ffd800;
}
#box2 {
background: #0094ff;
}
#box3 {
background: #00ff21;
}
#box4 {
background: #a874ff;
}
div {
padding:20px;
margin:10px;
}
#box1 {
background: #ffd800;
float: left; <- box1이 왼쪽에 떠있게함
}
#box2 {
background: #0094ff;
}
#box3 {
background: #00ff21;
}
#box4 {
background: #a874ff;
}
float: right 이용하면 마찬가지로 요소가 오른쪽에 떠있게 됨
사이드바를 만들때 주로 이용함
float 속성은 다른 요소에 영향을 미치기 때문에 필요하지 않은 순간에는 clear 속성을 이용해서 해제해줘야함
위의 그림에서는 박스2가 박스1에 영향을 받고 있음
->
#box2 {
background: #0094ff;
clear: left; <- 왼쪽의 float 요소에게 영향을 받지 않는 위치로 감(박스2가 박스1이 안닿는 아래로 내려감) 양쪽에 float요소 있으면 both 써주면됨
}
float 속성을 사용해 3단 레이아웃 만들기
위와 같이 먼저 만들 레이아웃의 형태를 그려보고 위치와 크기를 생각해두자
먼저, 전체 요소는 마진 0, 패딩 0, 박스 사이징은 보더박스로 맞춰져 있다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
컨테이너(헤더, 사이드바, 본문, 푸터를 모두 감싼 div의 id)의 너비는 1200px, 마진은 위아래 20px을 주고, 좌우마진을 auto로 설정하면 가운데 정렬이 된다.
#container {
width: 1200px;
margin: 20px auto;
}
헤더의 너비는 컨테이너와 같았고, 높이는 120px, 배경색은 적당히 주었음
왼쪽의 사이드바는 너비 250px, 높이는 600px, 배경색은 적당히, 왼쪽으로 float
오른쪽 사이드바는 너비 150px, 높이와 배경색은 왼쪽과 같고, 오른쪽으로 float
본문은 너비 800px, 높이 600px, 배경색 적당히, float 왼쪽으로 설정하면 사이드바 옆에 바짝 붙여짐
푸터는 헤더와 같이 너비 꽉차도록 100%, 높이는 100px, 배경색 적당히, 위의 요소들에 float이 적용되었으므로 영향 받지않도록 해제(clear 속성)해줘야함
#header {
width:100%;
height: 120px;
background-color: #acacac;
}
#left-sidebar {
width:250px;
height: 600px;
background-color: #e9e9e9;
float: left;
}
#contents {
width:800px;
height: 600px;
background-color: #aliceblue;
float: left;
}
#right-sidebar {
width:150px;
height: 600px;
background-color: #e9e9e9;
float: right;
}
#footer {
width:100%;
height: 100px;
background-color: #222;
clear: both;
}
웹 요소의 위치 지정하기 - position 속성
위치값(left, right, top, bottom) 속성 : 각 모서리에서 얼만큼 떨어졌는지를 정함. 이를 통해 요소의 위치 정해줌.
left: 50px; <- 해당 요소가 왼쪽 모서리에서 50px 떨어져서 위치함
position 속성은 웹 요소가 웹문서 안에서 어느 위치에 놓이는지 지정해줌.
사용할 수 있는 값은 static, relative, absolute, fixed 네 가지가 있고, static이 기본임
static : 소스 작성 순서 그대로 화면에 배치
relative : static과 마찬가지인데, 위치값(top, left 등)을 줄 수 있음.(원래 위치에서 위치값만큼 옮겨짐)
fixed : 지정한 위치값에 고정됨. 내용이 길어져서 스크롤 막대가 생기더라도 위치가 바뀌지 않음
absolute : 소스 위치와 관계없이 위치값 지정(relative는 소스 순서상 원래 자리할 위치에서 위치값만큼 옮겼음. absolute는 부모요소나 상위요소 중 position: relative로 지정한 것이 기준이 되어 위치값만큼 옮김)
position: absolute를 원하는대로 사용하기 위해선 기준이 되는 상위 요소 또는 부모요소에 position: relative 를 설정해줘야함
'HTML／CSS／Javascript' 카테고리의 다른 글
| [Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 11 (0) | 2023.08.05 |
|---|---|
| [Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 09~10 (0) | 2023.08.05 |
| [Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 07 (0) | 2023.08.04 |
| [Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 06 (0) | 2023.08.03 |
| [Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 01~05 (0) | 2023.07.31 |