퀴즈1~2

1. 박스 모델의 네 방향 테두리 두께를 다르게 지정하기 위해 다음과 같은 CSS 소스를 사용했습니다. 이것을 border-width 속성 하나로 묶어 지정하려면 기존 4개의 값을 어떻게 나열해야 할지 작성하세요.

border-top-width: 5px
border-bottom-width: 10px
border-left-width: 15px
border-right-width: 20px

답: border-width: 5px 20px 10px 15px

 

2. 08/quiz-2.html에는 4개 항목이 있는 순서없는 목록이 삽입되어 있습니다. 여기에 다음 조건에 맞는 CSS를 적용해 가로 내비게이션 메뉴로 만드세요

1. 목록의 불릿을 없앱니다.
2. 목록의 항목을 가로로 배치합니다.
3. 각 항목에 1픽셀짜리 검은색 실선을 표시합니다.
4. 각 항목의 상하 패딩은 10px, 좌우 패딩은 20px로 지정합니다.
5. 각 항목의 네 방향 마진은 10px로 지정합니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>display 속성</title>
		<style>
			a:link, a:visited {
				color:black;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="#">메뉴1</a></li>
				<li><a href="#">메뉴2</a></li>
				<li><a href="#">메뉴3</a></li>
				<li><a href="#">메뉴4</a></li>
			</ul>
		</nav>
	</body>
</html>

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>display 속성</title>
		<style>
			a:link, a:visited {
				border-style: solid;
				border-width: 1px;
				color:black;
				text-decoration: none;
				padding: 10px 20px;
				margin: 10px;
				list-style-type: none;
				display: inline-block;
			}
			ul li {
				list-style-type: none;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="#">메뉴1</a></li>
				<li><a href="#">메뉴2</a></li>
				<li><a href="#">메뉴3</a></li>
				<li><a href="#">메뉴4</a></li>
			</ul>
		</nav>
	</body>
</html>

저작자표시 비영리

'HTML > CSS 박스 모델' 카테고리의 다른 글

CSS 박스 모델  (0) 2021.08.14

웹 문서에 내용을 배치할 때는 각 요소를 박스 형태로 구성하고, 이것을 'CSS 박스 모델'이라고 하는데 각 박스 모델은 실제 내용이 들어가는 콘텐츠 영역과 테두리, 여백들로 구성됩니다.

 

블록 레벨 요소와 인라인 레벨 요소

블록레벨(block-level)요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다.

너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 합니다.

반면, 인라인 레벨(inline-level)요소는 줄을 차지하지 않는 요소입니다. 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에넌 다른요소가 올 수 있습니다.

종류 해당 태그
블록 레벨 태그 <p>, <h1>~<h2>, <ul>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
인라인 레벨 태그 <img>, <object>, <br>, <sub>, <span>, <input>, <textarea>, <label>, <button>

이 중 input, textarea, label태그는 display:를 이용해서 넓이와 높이를 블록태그처럼 지정 가능하다.

 

※박스 모델(box model)

박스 형태의 콘텐츠

웹 문서의 블록레벨 요소들은 모두 박스 형태입니다. 스타일시트에서는 박스 형태인 요소를 박스모델(boxmodel)요소라고 부릅니다.

박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding) 그리고 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성됩니다. 

테두리, 마진은 각각 상하좌우 네 방향으로 나뉘어져 있어 네 방향의 스타일을 따로 설젛알 수 있습니다.

 

width, height 속성

콘텐츠 영역의 크기

기본형 설명
width: <크기> | <백분율> | auto 너비를 속성값에 따라 지정한다.
height: <크기> | <백분율> | auto 높이를 속성값에 따라 지정한다.
속성 값 설명
<크기> 너비나 높이값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정합니다.
<백분율> 박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정합니다.
auto 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정됩니다. 기본값입니다.

 

실제 콘텐츠 크기 계산하기

내벼유백+테두리값에 따라 증가할 수 있다.

모던 브라우저에서 박스 모델의 전체 너비 = width 값 + 좌우 패딩 + 좌우 테두리
인터넷 익스플로러 6에서 박스 모델의 width 값= 콘텐츠 너비 + 좌우 패딩 + 좌우 테두리

 

display 속성

화면 배치 방법 결정하기

기본형 설명
display: block; 해당 요소를 블럭 레벨로 지정합니다.
display: inline; 블록 레벨 요소를 인라인 레벨로 바꿀 수 있습니다.
display: inline-block; 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶을 때 사용한다.
display: none; 해당 요소를 화면에 표시하지 않고 공간도 차지하지 않습니다
display: contents;  
display: table;  
display: table-cell;  

display: none;과 visibility:hidden;과 다른점은 visibility:hidden은 공간을 차지합니다.

 

기타 display 속성 값들

속성 값 설명
inherit 상위 요소의 display 속성을 상속받습니다.
table 블록 레벨의 표로 만듭니다.
inline-table 인라인 레벨의 표로 만듭니다
table-row 표의 행으로 만듭니다
table-row-group 표의 행 그룹으로 만듭니다.
table-header-group 표의 제목 영역(header)그룹으로 만듭니다.
table-footer-group 표의 요약 영역(footer)그룹으로 만듭니다.
table-column 표의 열로 만듭니다.
table-column-group 표의 열 그룹으로 만듭니다.
table-cell 표에서 하나의 셀로 만듭니다.
table-caption 표의 캡션을 만듭니다.
list-item 목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자를 만듭니다.

 

 

테두리 관련 속성들

border-style 속성

테두리 스타일 지정하기

기본형 설명
none 테두리가 나타나지 않습니다.(기본값)
hidden 테두리가 나타나지 않습니다. border-collapse:collpase일 경우, 다른 테두리도 표시되지 않습니다.
dashed 테두리를 짧은 선(직선으로 된 점선)으로 표시합니다.
dotted 테두리를 점선으로 표시합니다.
double 테두리를 이중선(겹선)으로 표시합니다. 두 선 사이의 간격은 border-width 값으로 지정합니다.
groove 테두리를 창에 조각한 것처럼 표시합니다. 홈이 파인듯 입체적으로 보입니다.(기본값)
inset border-collapse:separate일 경우, 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고 border-collapse:collpase일 경우, ridge와 똑같이 표시됩니다.
outset border-collapse:separate일 경우, 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고 border-collapse:collpase일 경우, ridge와 똑같이 표시됩니다.
ridge 테두리를 창에서 튀어나온 것처럼 표시합니다.
solid 테두리를 실선으로 표시합니다.

 

border-width속성

테두리 두께 지정하기

기본형 설명
border-top-width: <크기> | thin | medium | thick 위쪽 테두리 속성
border-right-width: <크기> | thin | medium | thick 오른쪽 테두리 속성
border-bottom-width: <크기> | thin | medium | thick 아래쪽 테두리 속성
border-left-width: <크기> | thin | medium | thick 왼쪽 테두리 속성
border-width: <크기> | thin | medium | thick 모든 방향 테두리 속성

 

border-color

테두리 색상 지정하기

기본형 설명
border-top-coor: <색상> 위쪽 테두리 색상
border-right-coor: <색상> 오른쪽 테두리 색상
border-bottom-coor: <색상> 아래쪽 테두리 색상
border-left-coor: <색상> 왼쪽 테두리 색상
border-coor: <색상> 모든 테두리의 색상

 

border 속성

테두리 스타일 묶어 지정하기

기본형 설명
border-top: <두께> <색상> <스타일> 위쪽 테두리 스타일을 묶어서 지정한다.
border-right: <두께> <색상> <스타일> 오른쪽 테두리 스타일을 묶어서 지정한다.
border-bottom: <두께> <색상> <스타일> 아래쪽 테두리 스타일을 묶어서 지정한다.
border-left: <두께> <색상> <스타일> 왼쪽 테두리 스타일을 묶어서 지정한다.
border: <두께> <색상> <스타일> 모든 테두리 스타일을 묶어서 지정한다.

 

border-radius 속성

박스 모서리 둥글게 만들기

기본형 설명
border-top-left-radius: <크기> | <백분율> 왼쪽위의 원의 크기와 백분율을 지정한다.
border-top-right-radius: <크기> | <백분율> 오른쪽위의 크기와 백분율을 지정한다.
border-bottom-right-radius: <크기> | <백분율> 오른쪽아래의 크기와 백분율을 지정한다.
border-bottom-left-radius: <크기> | <백분율> 왼쪽아래의 크기와 백분율을 지정한다.
border-radius: <크기> | <백분율> 모든 모서리의 크기와 백분율을 지절한다.

모서리 원의 반지름이 border-radius 속성값이 됩니다.

속성 값 설명
<크기> 둥글게 처리할 반지름 크기를 px이나 em 같은 단위와 함께 수치로 표시합니다.
<백분율> 현재 요소의 크기를 기준으로 둥글게 처리할 반지름의 크기를 %로 지정합니다.

 

타원 형태로 둥글게 만들기

기본형 설명
border-top-left-radius: <가로 크기> <세로 크기> 왼쪽위모서리의 타원형으로 가로, 세로크기를 지정한다.
border-top-right-radius: <가로 크기> <세로 크기> 오른쪽위모서리의 타원형으로 가로, 세로크기를 지정한다.
border-bottom-right-radius: <가로 크기> <세로 크기> 오른쪽아래모서리의 타원형으로 가로, 세로크기를 지정한다.
border-bottom-left-radius: <가로 크기> <세로 크기> 왼쪽아래모서리의 타원형으로 가로, 세로크기를 지정한다.
border-radius: <가로 크기> <세로 크기> 모든곳모서리의 타원형으로 가로, 세로크기를 지정한다.

 

box-shadow 속성

기본형 설명
box-shadow: none | <그림자 값> [, <그림자 값>];
<그림자값> = <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset		 선택한 요소에 그림자 효과를 낼 수 있다.
속성 값 설명
<수평 거리> 그림자의 수평 옵셋 거리(수평으로 얼마나 떨어져 있는지)입니다. 양수 값은 요소의 오른쪽, 음수 값은 요소의 왼쪽에 그림자를 만듭니다. (필수 속성)
<수직 거리> 구림자의 수직 옵셋 거리(세로로 얼마나 떨어져 있는지)입니다. 양수 값은 요소의 아래쪽, 음수 값은 요소의 위쪽에 그림자를 만듭니다.(필수 속성)
<흐림 정도> 그림자의 흐림 정도(blur radius)를 지정합니다. 이 값을 생략하면 0을 기본값으로 해 진한 그림자를 표시합니다.이 값이 커질수록 부드러운 그림자를 표시하며 음수값은 사용할 수 없습니다.
<번짐 정도> 그림자의 번지는 정도를 나타냅니다. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져나가기 때문에 그림자가 박스보다 크게 표시됩니다. 음수 값은 모든 방향으로 축소되어 보입니다. 기본값은 0입니다.
<색상> 그림자의 색상을 지정합니다. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 개의 색상을 지정할 수도 있습니다. 필요한 경우에만 사용하는 옵션 값이며 기본 값은 현재 글자 색입니다.
inset 이 키워드를 함께 표시하면 안쪽 그림자로 그립니다. 필요한 경우에만 사용하는 옵션입니다.

 

 

 

여백을 조절하는 속성들

margin 속성

요소 주변 여백 설정하기 

기본형 설명
margin-top: <크기> | <백분율> | auto 위쪽 한 요소와 다른요소의 여백을 조절한다.
margin-right: <크기> | <백분율> | auto 오른쪽 한 요소와 다른요소의 여백을 조절한다.
margin-bottom: <크기> | <백분율> | auto 아래쪽 한 요소와 다른요소의 여백을 조절한다.
margin-left: <크기> | <백분율> | auto 왼쪽 한 요소와 다른요소의 여백을 조절한다.
margin: <크기> | <백분율> | auto 모든 한 요소와 다른요소의 여백을 조절한다.
속성 값 설명
<크기> 너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정합니다.
<백분율> 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정합니다.
auto display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정합니다.

margin 속성을 이용해 마진 값을 한꺼번에 설정할때는 값의 개수에 따라 어느 방향에 적용될지 결정됩니다.

(한개면 전체 두개면 상하+좌우 세개면 top + (right+left) + bottom)

top > right > bottom > left순으로 지정됩니다.

 

padding속성

콘텐츠 영역과 테두리 사이 여백 설정하기

패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다.

기본형 설명
padding-top: <크기> | <백분율> | auto 위쪽의 콘텐츠-테두리사이의 여백을 조절한다.
padding-right: <크기> | <백분율> | auto 오른쪽의 콘텐츠-테두리사이의 여백을 조절한다.
padding-bottom: <크기> | <백분율> | auto 아래쪽의 콘텐츠-테두리사이의 여백을 조절한다.
padding-left: <크기> | <백분율> | auto 왼쪽의 콘텐츠-테두리사이의 여백을 조절한다.
padding: <크기> | <백분율> | auto 모든 방향의 콘텐츠-테두리사이의 여백을 조절한다.

 

저작자표시 비영리

'HTML > CSS 박스 모델' 카테고리의 다른 글

CSS 박스 모델 예제  (0) 2021.08.15

+ Recent posts

티스토리툴바