* CSS와 박스 모델
- 블록 레벨 요소 / 인라인 레벨 요소
- 블록 레벨 요소
- 요소를 삽입했을 떄 혼자 한 줄을 차지하는 요소
- 요소의 너비 100%
- ex) <div>, <p>
<예시>
<h1>시간이란...</h1>
<div>내일 죽을 것처럼 <p class="accent">오늘</p>을 살고 </div>
<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>
- 인라인 레벨 요소
- 줄을 차지하지 않는 요소
- 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음
- ex) <img>, <strong>
<예시>
<h1>시간이란...</h1>
<div>내일 죽을 것처럼 <span class="accent">오늘</span>을 살고 </div>
<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>
=> <span>태그가 텍스트만큼만 공간을 차지
- 박스 모델의 기본 구성
실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 마진(margin) 등의 요소로 구성됨
- 개발자 도구 창에서 박스 모델 확인 가능
1) 웹 브라우저에서 웹 문서 열기
2) 박스 모델 확인할 부분을 마우스 오른쪽 버튼으로 누른 뒤 [검사] 선택
3) 개발자 도국 창 위에서 [Computed] 탭 클릭
4) 해당 부분의 박스 모델이 그림으로 표시됨
- 콘텐츠 영역의 크기를 지정하는 width, height 속성
- width - 너비
- height - 높이
- 속성값
| 종류 | 설명 |
| <크기> | 너비나 높이의 값을 px나 em단위로 지정 |
| <백분율> | 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정 |
| auto | 박스 모델의 너빗값과 높이값이 콘텐츠 양에 따라 자동으로 결정 (기본값) |
<예시>
<head>
<style>
div {
border:2px solid #000;
margin-bottom: 20px;
}
.box1 {
width:400px;
height:100px;
}
.box2 {
width:50%;
height:100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
=> 첫번째 박스는 너비와 높이 바뀌지 않고, 두번째 박스는 웹 브라우저 창에 따라 크기가 달라진다.
- 박스 모델의 크기를 계산하는 box-sizing 속성
- 실제 박스 모델의 너비를 계산할 때 어디까지 포함할지 결정하는 속성
- 속성값
| 종류 | 설명 |
| border-box | 테두리까지 포함해서 너빗값을 지정 |
| content-box | 콘텐츠 영역인 너비값을 지정(기본값) |
<예시>
.box2 {
box-sizing: border-box;
width:200px;
padding:20px;
border:10px solid #00f;
}
=> border-box이므로 테두리까지 포함해서 너빗값(width)지정
=> 테두리 포함 200px이므로 좌우 패딩값 40px, 좌우 테두리값 20px 뺀 나머지 140px이 실제 콘텐츠 영역 너비
- 박스 모델에 그림자 효과를 주는 box-shadow 속성
- 선택한 요소에 그림자 효과 내기
- 기본형
box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
=> 수평, 수직 거리 필수, 나머지 선택
- 속성값
| 종류 | 설명 |
| <수평 거리> | 그림자가 가로로 얼마나 멀어져 있는지를 나타냄 (양수 - 오른쪽 / 음수 - 왼쪽 에 그림자 만듦) |
| <수직 거리> | 그림자가 세로로 얼마나 떨어져 있는지를 나타냄 (양수 - 아래 / 음수 - 위에 그림자 만듦) |
| <흐림 정도> | 이 값을 생략하면 0을 기본값을로 하여 진한 그림자를 표시 (값 커질수록 부드러운 그림자 / 음수X) |
| <번짐 정도> | 양수 - 모든 방향으로 퍼져서 크게 표시 음수 - 모든 방향으로 축소 기본값 - 0 |
| <색상> | 한 가지나 여러가지의 색상 지정 가능 ( 기본값은 검은색 ) |
| inset | 이 키워드를 함께 표시하면 안쪽 그림자로 그림 |
<예시>
...
.box1{ box-shadow:2px -2px 5px 0px;} /* 오른쪽 윗부분에 그림자 */
.box2{ box-shadow:5px 5px 15px 5px blue;} /* 오른쪽 아랫부분에 파란색 그림자 */
</style>
...
=> 왼쪽 박스 - 오른쪽 위로 2px, 흐림정도 5px정도인 그림자
=> 오른쪽 박스 - 오른쪽 아래 5px, 흐림 정도 15px, 번짐 정도 5px인 파란색 그림자
* 테두리 스타일 지정
- 박스 모델의 값 지정 방향
- 4개 방향의 값을 한꺼번에 지정할 때는 방향 순서를 지켜야 함
- top -> right -> bottom -> left
- 테두리 스타일을 지정하는 border-style 속성
- 기본 값이 none -> 화면에 테두리 표시 안됨
- 테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정
- 기본형
border-style: none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid
- 속성값
<예시>
...
<style>
#box1 { border-style: solid; }
#box2 { border-style: dotted; }
#bos3 { border-style: dashed; }
</style>
...
<div id="box1">실선 테두리</div>
<div id="box2">점선 테두리</div>
<div id="box3">짧은 직선 테두리</div>
...
- 테두리 두께를 지정하는 border-width 속성
- 테두리 두께 지정
- 기본형
border-width: <크기> | thin | medium | thick
=> thin < medium < thick 순으로 두꺼워짐
<예시>
#box1 {
border-width:2px; /* 네 방향 모두 2px */
}
#box2 {
border-width:thick thin; /* top & bottom - thick, left & right - thin */
}
#box3 {
border-width:thick thin thin; /* top - thick, right - thin, bottom - thin, left - thin */
}
#box4 {
border-width:10px 5px 5px 10px; /* top - 10px, right - 5px, bottom - 5px, left - 10px */
}
- 테두리 색상을 지정하는 border-color 속성
- 테두리 색상 지정
<예시>
#box1 { border-color: red; } /* 전체 테두리 - 빨강 */
#box2 {
border-top-color: blue; /* 위쪽 테두리 - 파랑 */
border-left-color: red; /* 왼쪽 테두리 - 빨강 */
}
- 테두리 스타일 묶어 지정하는 border 속성
- 테두리 스타일과 두께, 색상 등을 묶어 표기
- border-top이나 border-right처럼 방향을 함께 써서 4개 방향의 스타일을 따로 지정할 수 있음
- 순서는 상관없음
<예시>
h1 {
padding-bottom: 5px;
border-bottom: 3px solid rgb(75, 70, 70); /* 아래쪽 테두리만 3px짜리 회색 실선*/
}
p {
padding: 10px;
border: 3px dotted blue; /* 모든 테두리를 3px짜리 파란 점선 */
}
- 둥근 테두리를 만드는 border-radius 속성
- 박스 모델의 테두리를 둥글게 처리
- 박스 모델의 꼭짓점 부분에 원(반지름 r)이 있다고 가정해서 둥글게 처리
- 기본형
border-radius: <크기> | <백분율>
- 속성값
| 종류 | 설명 |
| <크기> | 반지름 크기를 px, em의 단위와 함께 수치로 표시 |
| <백분율> | 현재 요소의 크기를 기준으로 비율(%)로 지정 |
<예시>
- 이미지 꼭짓점 둥글게 표시
<style>
#round {
border-radius: 25px; /* 모든 꼭짓점을 둥글게 */
}
</style>
</head>
<body>
<img src="images/cat.jpg">
<img id="round" src="images/cat.jpg">
</body>
- 이미지 원형으로 표시
<style>
#circle {
border-radius:50%; /* 테두리를 원으로 */
}
</style>
</head>
<body>
<img src="images/photo.jpg">
<img id="circle" src="images/photo.jpg">
</body>
- 꼭짓점마다 따로 둥글게 처리하기
- border와 radius 사이 위치를 나타내는 예약어를 사용하면 꼭짓점마다 다르게 처리 가능
각 꼭짓점을 나타내는 예약어
<예시>
...
#round1 {
border: 2px solid blue;
border-top-left-radius: 20px;
border-top-right-radius: 20p;
}
...
* 여백을 조절하는 속성
- 요소 주변의 여백을 설정하는 margin 속성
- 현재 요소 주변의 여백
- 마진을 이용하면 요소와 요소 간의 간격 조절 가능
- 기본형
margin: <크기> | <백분율> | auto
- 속성값
| 종류 | 설명 | 예시 |
| <크기> | 너빗값이나 높이값을 px이나 em 같은 단위와 함께 수치로 지정 | margin: 50px; |
| <백분율> | 박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정 | margin: 0.1%; |
| auto | display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정 |
<예시>
- 마진으로 여백 설정
#margin1 {
margin:50px;
}
#margin2 {
margin:30px 50px
}
#margin3 {
margin:30px 20px 50px
}
#margin4 {
margin:30px 50px 30px 50px;
}
- margin 속성을 사용하여 웹 문서를 가운데 정렬
- 배치할 요소의 너빗값이 정해져 있어야 함
- margin-left와 margin-right의 속성값을 auto로 지정
<예시>
- 웹 문서 전체를 웹 브라우저 화면 중앙에 배치
...
body { background-color: #222; }
#container {
background-color: #fff;
width: 600px;
margin: 20px auto;
padding: 20px;
}
...
<div id="container">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
...
</div>
...
- 마진 중첩 현상
- 요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐지는 것
- 요소를 가로로 배치할 경우에는 상관없음
<예시>
- 콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성
- 콘텐츠 영역과 테두리 사이의 여백
- 마진을 지정하는 방법과 같다
* 웹 문서의 레이아웃 만들기
- 배치 방법 결정하는 display 속성
- 요소의 배치 방법 결정
- 사용할 수 있는 속성값이 아주 많음
- 블록 레벨 요소, 인라이니 레벨 요소를 바꿀 때 사용하는 속성 값
| 종류 | 설명 |
| block | 인라인 레벨 요소를 블록 레벨 요소로 만듦 |
| inline | 블록 레벨 요소를 인라인 레벨 요소로 만듦 |
| inline-block | 인라인 레벨 요소와 블록 레벨 요소 |
| none | 해당 요소를 화면에 표시하지 않음 |
<예시>
<style>
* { box-sizing: border-box; }
nav ul { list-style: none; }
nave ul li {
display: inline-block;
padding: 20px;
margin: 0 20px;
border: 1px solid #222;
}
- 왼쪽이나 오른쪽으로 배치하는 float 속성
- 요소를 왼쪽이나 오른쪽에 떠 있게 만듦
- 기본형
float: left | right | none
- 속성값
| 속성값 | 설명 |
| left | 해당 요소를 문서의 왼쪽으로 배치 |
| right | 해당 요소를 문서의 오른쪽으로 배치 |
| none | 좌우 어느 쪽으로도 배치하지 않음 |
<예시>
<style>
img {
float: left;
margin-right: 40px;
}
...
<img src="images/tree.png">
<p>Ex et adipisicing...</p>
...
- float 속성을 해제하는 clear 속성
- float 속성을 무효화 시키는 속성
- 기본형
clear: none | left | right | both
- 속성값
| 종류 | 설명 |
| left | float: left 해제 |
| right | float: right 해제 |
| both | float: left와 float: right 해제 |
* 웹 요소의 위치 지정
- 웹 요소의 위치를 정하는 left, right, top, bottom 속성
- 웹 요소의 위치를 지정하는 속성
- 속성값
| 종류 | 설명 |
| left | 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정 |
| right | 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정 |
| top | 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정 |
| bottom | 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정 |
<예시>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 위치 속성</title>
<style>
*{
margin:0; /* 마진 초기화 */
padding:0; /* 패딩 초기화 */
}
p {
width:300px; /* 너비 - 300px */
border:1px solid #ccc; /* 테두리 - 1픽셀 회색 실선 */
padding:10px; /* 네방향 패딩 10px */
}
#pos1{
position:absolute; /* 포지셔닝 - absolute */
left:50px; /* 왼쪽에서 50px 떨어지게 */
top:50px; /* 위쪽에서 50px 떨어지게 */
}
#pos2 {
position:absolute; /* 포지셔닝 - absolute */
right:100px; /* 오른쪽에서 100px 떨어지게 */
top:100px; /* 위쪽에서 100px 떨어지게 */
}
#pos3 {
position: absolute; /* 포지셔닝 - absolute */
left:100px; /* 왼쪽에서 50px 떨어지게 */
bottom:100px; /* 아래쪽에서 100px 떨어지게 */
}
</style>
</head>
<body>
<p id="pos1">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
<p id="pos2">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
<p id="pos3">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>
*로렘입숨 사이트
=> 문단수와 문단길이를 입력하면 필요한 문자열 생성해줌
=> 테스트 할 때 많이 사용
한글 Lorem Ipsum (간세네) (guny.kr)
- 배치 방법을 지정하는 position 속성
- 웹 문서 안에 요소들을 배치하기 위한 속성
- 기본형
position: static | relatice | absolute | fixed
| 속성값 | 설명 |
| static | 요소를 문서의 흐름에 맞추어 배치 |
| relative | 이전 요소를 자연스럽게 연결해 배치하되 위치를 지정할 수 있음 |
| absolute | 원하는 위치를 지정해 배치 |
| fixed | 지정한 위치에 고정해 배치 (화면에서 요소가 걸릴수도 있음) |
<예시>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS position 속성</title>
<style>
p {
width:500px;
height:200px;
background-color:#eee;
border:1px solid #ccc;
line-height:2;
}
#static {
position:static;
}
#relative-1{
position:relative;
}
#relative-2 {
position:relative; /* 포지셔닝 - relative */
left:100px; /* 왼쪽에서 100px 떨어지게 */
top:-50px; /* 위쪽에서 -50px 떨어지게 (위로 이동) */
}
#fixed {
width:100px;
height:100px;
background-color:#222;
position:fixed; /* 포지셔닝 - fixed */
right:30px; /* 오른쪽에서 30px 떨어지게 */
top:30px; /* 위쪽에서 30px 떨어지게 */
}
</style>
</head>
<body>
<p id="static">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Pariatur fugiat voluptate ea non amet cupidatat. </p>
<p id="relative-1">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Magna Lorem excepteur occaecat cupidatat sunt proident tempor do nostrud labore cillum non exercitation voluptate. </p>
<p id="relative-2">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Velit id duis enim reprehenderit eu dolor Lorem excepteur excepteur. </p>
<p id="fixed"></p>
</body>
</html>
* 총정리
'개발 공부 > HTML , CSS' 카테고리의 다른 글
| [CSS] - CSS 고급 선택자 (0) | 2023.12.18 |
|---|---|
| [CSS] - 이미지와 그라데이션 효과로 배경 꾸미기 (0) | 2023.12.18 |
| [CSS] - 텍스트 스타일 (0) | 2023.12.14 |
| [CSS] - 기본 (0) | 2023.12.14 |
| [HTML] - 입력 양식 작성 (0) | 2023.12.13 |
