1. CSS와 박스 모델
- 박스모델을 블록레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다.
Def) 블록 레벨(block-level) 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다.
- "한 줄을 차지한다"는 것은 해당 효소의 너비가 100%라는 뜻이다.
- 블록 라벨 요소의 왼쪽/ 오른쪽에 다른 요소가 올 수 없다.
- <h1>, <div>, <p>가 대표적이다.
Def) 인라인 레벨(inline-level)요소는 한 줄을 차지하지 않는다.
- 콘텐츠 만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.
- <span>, <img>, <strong>를 이용한다.
Def) 박스 모델(box-model)요소: 박스 형태인 요소를 박스 모델 요소라고 한다.
1) 박스 모델의 기본 구성
- 콘텐츠 영역
- 패딩(padding): 박스와 콘텐츠 영역 사이의 여백
- 박스의 테두리(border)
- 마진(margin): 여러 박스 모델 사이의 여백
2) 콘텐츠 영역의 크기를 지정하는 width, height 속성
- <크기>: 너비나 높이의 값을 px나 em단위로 지정한다.
- <백분율>: 박스모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율로 지정
- auto: 박스 모델의 너비값와 높잇값이 콘텐츠 양에 따라 자동으로 결정된다. 기본값.
Ex) 박스 모델 너비 지정하기
- box1은 너비과 높이를 px로 고정시키다.
-> 창을 작게하거나 크게하더라도 박스의 크기는 그대로이다.
- box2는 높이만 고정시키고 너비를 가변(50%)으로 정한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<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>
</html>Note)
3) 박스 모델의 크기를 계산하는 box-sizing 속성
- 박스 모델의 너비와 높이를 어떻게 결정할 것인지에 따라 border-box와 content-box 중에서 선택할 수 있다.
- border-box: 테두리까지 포함해서 너빗값을 지정한다.
- content-box는 콘텐츠 영역만 너빗값을 지정한다. 기본값
- 웹 문서 레이아웃을 만들 떗, CSS에서 박스 모델을 사용하는데 요소 크기를 쉽게 계산하려면 box-sizing속성을
-> border-box로 지정하는 것이 좋다.
4) 박스 모델에 그림자 효과를 주는 box-shadow 속성
- 기본형 : box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
- 그림자는 이미지 또는 <div>와 같이 전체 영역에 지정하여 넣을 수 있다.
- inset: "inset"을 함께 표시하면 안쪽 그림자로 그린다.
2. 테두리 스타일 지정하기
1) 박스모델의 방향
- 윗부분(top) -> 오른쪽(right) -> 아래쪽(bottom) -> 왼쪽(left)
2) 테두리 스타일을 지정하는 border-style 속성
- 기본값은 none(테두리 없음)이다.
- solid: 실선
- dotted: 점선
- dashed: 짧은 직선
Ex)
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
text-align: center;
font-size:20px;
line-height:100px;
border-width:5px; /* 테두리 굵기 */
}
#box1 { border-style:solid; } /* 실선 */
#box2 { border-style:dotted; } /* 점선 */
#box3 { border-style:dashed; } /* 짧은 점선 */
</style>
</head>
<body>
<div id="box1"> 실선 테두리 </div>
<div id="box2"> 점선 테두리 </div>
<div id="box3"> 점선 테두리</div>
</body>
</html>Note) 실행 결과
3) 테두리 두께를 지정하는 border- width 속성
- 기본형: border-width: <크기> | thin | medium | thick
- 테두리 4개 방향 모두 다르게 지저할 수도 있다.
- 속성값이 1개 => 네 방향 모두 적용
- 속성값이 2개 => 첫번째 속성: 위아래 , 두번째 속성: 좌우 적용
- 속성값이 3개 => top -> right -> bottom 이 적용된다. (left는 right와 똑같이 적용된다. )
- 속성값이 4개 => top -> right -> bottom-> left
Ex) 박스 모델의 테두리 두께 지정하기
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:150px;
}
#round1 {
border:2px solid blue;
border-top-left-radius:20px; /* 왼쪽 위 꼭짓점만 둥글게 */
border-top-right-radius:20px; /* 오른쪽 위 꼭짓점만 둥글제 */
}
</style>
</head>
<body>
<div id="round1"></div>
</body>
</html>Note) 실행 결과
4) 테두리 색상을 지정하는 border-color 속성
- 4개 방향의 테두리 색상을 한꺼 번에 지정하거나 하나씩 지정도 가능하다.
- 3)과 마찬가지로 두 개의 속성이 있으면 첫번째는 위아래, 두번째 속성은 왼쪽, 오른쪽에 적용된다.
Ex)
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border-style:dashed; /* 테두리 스타일 - 선으로 된 점선 */
border-width:2px; /* 테두리 굵기 - 2px */
}
#box1 { border-color:red; } /* 전체 테두리 - 빨강 */
#box2 {
border-top-color:blue; /* 위쪽 테두리 - 파랑 */
border-left-color:red; /* 왼쪽 테두리 - 빨강 */
}
</style>
</head>
<body>
<div id="box1"> </div>
<div id="box2"> </div>
</body>
</html>Note) 실행 결과
5) 테두리 스타일을 묶어 지정하는 border속성
- 테두리 스타일과 두께, 색상을 한꺼번에 표현 가능하다.
- 4개 방향의 테두리 스타일이 같을 때 사용한다.
Ex) 테두리 스타일 묶어서 지정하기
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
h1 {
padding-bottom: 5px;
border-bottom: 3px solid rgb(75, 70, 70); /* 아래쪽 테두리만 3px짜리 회색 실선*/
}
p {
padding: 10px;
border: 3px dotted blue; /* 모든 테두리를 3px짜리 파란 점선 */
}
</style>
</head>
<body>
<h1>박스 모델</h1>
<p>박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다. </p>
</body>
</html>Note) 실행 결과
5) 둥근 테두리를 만드는 border-radius 속성
- 박스 모델의 테두리를 둥글게 만든다.
- 꼭짓점 부분에 원이 있다고 가정해서 둥글게 처리한다.
- 기본형: border-radius: <크기> | <백분율>
-> 크기: 반지름 크기를 px, em의 단위와 함께 수치료 표시한다.
-> 백분율: 현재 요소의 크기를 기준으로 비율로 지정한다.
Ex) 이미지의 꼭짓점을 둥글게 표시하기
- borde-radiud값을 25px로 지정해서 꼭짓점을 둥글게 처리한 이미지를 비교
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
#round {
border-radius: 25px; /* 모든 꼭짓점을 둥글게 */
}
</style>
</head>
<body>
<img src="images/cat.jpg">
<img id="round" src="images/cat.jpg">
</body>
</html>Note) 실행 결과
Ex) 이미지를 원형으로 표시하기
- 다음과 같이 border-radius를 50%로 지정(또는 너빗값의 절반 px)으로 지정하면 원형 이미지로 나타낼 수 있다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
#circle {
border-radius:50%; /* 테두리를 원으로 */
}
</style>
</head>
<body>
<img src="images/photo.jpg">
<img id="circle" src="images/photo.jpg">
</body>
</html>Note) 실행 결과
6) 꼭짓점마다 따로 둥글게 처리하기
ex) 예약어 "top-left"이용 => border-top-left-radius: 왼쪽 윗부분 꼭짓점
Ex) 박스 모델 영역의 크기를 지정하고 테두리 그리기
- div영역에는 테두리를 그리고 가장 바깥의 #container의 widthsms 600px, border속성값은 none로 지정한다.
<hide/>
<style>
div{
border: 1px solid #222;
}
#container{
width: 600px;
border: none;
}Note) 실행 결과
3. 여백을 조절하는 속성
1) 요소 주변의 여백을 성정하는 margin 속성
- 기본형: margin: <크기> : <백분율>: auto
- margin 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어 (top/ right/ bottom/ left)를 사용해서 특정방향 지정 가능
- 속성값: <크기> / <백분율> / auto
- 2번 경우와 마찬가지로 값이 여러 개일 때, top -> right -> bottom-> left 순서대로 적용된다.
Ex) margin 속성으로 여백 설정하기
- 속성값이 1개 => 상하좌우에 적용
- 속성값이 2개 => 상하/ 좌우 각각 적용
- 속성값이 3개 => 상/좌우/하 적용
<hide/>
#margin1 {
margin:50px;
}
#margin2 {
margin:30px 50px
}
#margin3 {
margin:30px 20px 50px
}
#margin4 {
margin:30px 50px 30px 50px;
}Note) 실행 결과
2) margin속성을 사용하여 웹 문서를 가운데 정렬하기
- 웹 문서에서 텍스트 요소를 배치할 때는 "text-align"을 이용했다.
- 그런데, 웹 문서 전체를 중앙에 배치하려면 ?
-> 'margin'속성을 이용한다.
Ex) 웹 문서 전체를 웹 브라우저 화면 중앙에 배치하기
- <div>태그를 사용해서 웹 문서 전체를 하나로 묶은 후, #container라는 스타일을 적용한다.
- 문서 전체 배경은 어둡게 하고 container의 배경만 흰색으로 한다.
<hide/>
body {
background-color:#222;
}
#container {
background-color:#fff;
width:600px;
margin:20px auto;
padding:20px;
}Note) 실행 결과
3) 마진 중첩 이해하기
Def) 마진 중첩(margin overlap), 마진 상쇄(margin collapse)
- 요소를 세로로 배치하는 경우 각 요소의 마진과 마진이 만나면 마진값이 큰 쪽으로 겹쳐지는 문제가 있다.
Ex) 마진 중첩 이해하기
- 각 박스의 margin 속성 값을 30px로 지정하면 여백이 60px 만큼 생기는 것이 아니라
-> 겹쳐서 최종 마진은 30px만큼 만들어진다.
- 맨 아래 마진에 비해 중간에 있는 마진에 지나치게 커지는 것을 방지하기 위해서이다.
- 왼쪽과 오른쪽은 마진이 중첩되지 않는다.
Note) 실행 결과
4) 콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성
- 패딩이란 콘텐프 영역과 테두리 사이의 여백을 말한다.
- 테두리 안쪽의 여백과 같다.
- padding속성으로 4개 방향의 마진을 한꺼번에 지정 or 하이픈 넣고 위치를 나타내는 예약어를 사용할 수도있다.
Ex) 다양하게 패딩 지정하기
- <h1>태그에 패딩 여백을 다양하게 지정한다.
<hide/>
#padding1 {
padding:20px 30px 40px 50px;
}
#padding2 {
padding:20px 30px;
}
#padding3 {
padding:20px;
}Note) 실행 결과
Ex) 박스 모델 영역에 여백 추가하고 중앙에 배치하기
- 패딩은 20px, 아래쪽 마진은 30px 지정한다.
- #description의 위쪽과 #package 아래쪽 부분을 둥글게 처리한다.
- margin: 0 auto를 통해 화면 중앙에 배치할 수 있다.
<hide/>
table, th, td {
border:1px solid #ccc;
border-collapse: collapse;
}
th, td {
padding:10px 20px;
}
div {
border:1px solid #222; /* 테두리 */
padding: 20px;
margin-bottom: 30px;
}
#container {
width:600px; /* 컨테이너의 너비 */
border:none; /* 테두리 없앰 */
margin: 0 auto;
}
#description{
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
#package{
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<link rel="stylesheet" href="css/product-tmp.css">
</head>
<body>
<div id="container">
<div id="description">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
</div>
<div id="receipe">
<h2>레드향 샐러드 레시피</h2>
<p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
</div>
<div id="package">
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;">
<col>
<col span="2" style="width:150px">
</colgroup>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Note) 실행 결과
4. 웹 문서의 레이아웃 만들기
1) 배치 방법 결정하는 display 속성
- 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용한다.
- display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때, 많이 사용한다.
- 이미지를 표형태로 배치할 수도 있다.
- 자주 사용하는 속성값
(1) block: 인라인 레벨 요소를 블록 레벨 요소로 만든다.
(2) inline: 블록 레벨 요소를 인라인 레벨 요소로 만든다.
(3) inline-block: 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정 가능하다.
(4) none: 화면에 표시하지않는다.
Ex) 수평 내비게이션 만들기
- 수평 내비게이션을 만들기 위해 원래 블록 레벨 요소였던 목록을 인라인 레벨 요소로 바꾼 것이다.
- list-style: none => 불릿이나 숫자 번호를 없앤다.
<hide/>
<style>
* {
box-sizing: border-box;
}
nav ul {
list-style:none;
}
nav ul li {
display:inline-block;
padding:20px;
margin:0 20px;
border:1px solid #222;
}
</style>
</head>
<body>
<nav>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</nav>
Note) 실행 결과
2) 왼쪽이나 오른쪽으로 배치하는 float 속성
- 웹 요소를 문서 위에 떠있게 만든다.
- float 속성을 이용하면 이미지를 표시하고 그 주변에 텍스트가 둘러 싸도록 표현할 수 있다.
- 속성값: left / right/ none
Ex) 텍스트 왼쪽에 이미지 배치하기
<hide/>
<style>
img {
float:right; /* 오른쪽에 떠 있게 */
margin-left:40px;
}
</style>
</head>
<body>
<img src="images/tree.png">
<p>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>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>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>Note) 실행 결과
3) float 속성을 해제하는 clear 속성
- float를 사용해서 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그다음에 넣는 요소에도 적용된다.
- 따라서, float 속성이 더 이상 유용하지 않다고 알려주는 속성이 바로 "clear"이다.
- 속성값: left/ right / both(left, right 둘다 해제)
ex) float:left => clear: left로 종료한다.
Ex) 플로팅 해제하기
- box1, box2는 float: left 를 적용했기 때문에 차례대로 배치된다.
- box3는 설정하지 않았기 때문에 웹 브라우저의 기본 흐름대로 배치된다.
- box4는 clear : left 속성을 사용해서 float속성이 해제된다. => 평범한 박스 형태로 표시
<hide/>
<style>
div {
padding:20px;
margin:10px;
}
#box1{
background:#ffd800;
float:left; /* 왼쪽으로 플로팅 */
}
#box2 {
background: #0094ff;
float:left; /* 왼쪽으로 플로팅 */
}
#box3 {
background: #00ff21;
}
#box4 {
background:#a874ff;
clear:left; /* 플로팅 해제 */
}
</style>
</head>
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>Note) 실행 결과
Ex) 2단 레이아웃 만들기
- float속성과 clear속성을 사용하면 웹 문서의 레이아웃을 만들 때도 활용 가능
- 헤더, 사이드바, 본문, 푸터 등을 입력해서 웹 사이트를 만들 수 있다.
Note) 실행 결과
Ex) 3단 레이아웃 만들기
- 2단 레이아웃 소스에 사이드바를 하나 더 추가하면 3단 레이아웃이 된다.
Note) 실행 결과
5. 웹 요소의 위치 지정하기
1) 웹 요소의 위치를 정하는 left, right, top, bottom 속성
- 종류: left/ right/ top/ bottom
Ex) 텍스트 요소 자유롭게 배치하기
- 세 가지 박스마다 텍스트 단락을 자유롭게 배치할 수 있다.
<hide/>
#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>Note) 실행 결과
2) 배치 방법을 지정하는 position 속성
- 웹 문서 안의 요소를 자유자재로 배치해준다.
- 속성값:
(1) static: 문서의 흐름에 맞춰 배치한다. (기본값)
(2) relative: 위칫값을 지정할 수 있는 점을 빼고 static과 동일하다.
(3) absolute: relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다.
(4) fixed: 브라우저 창을 기준으로 위치를 지정해 배치한다.
Ex) 속성으로 요소 위치 지정하기
- 첫번째 단락고 두번째 단락의 position 속성값은 각각 static과 relative를 사용해서 웹 문서의 흐름에 따라
-> 위에서 아래로 자연스럽게 배치된다.
- 세번째 단락은 relative이면서 right와 top속성이 지정되어 있다.
-> 원래라면 두번째 단락 아래에 위치해야하지만 오른쪽으로 100px이동하고 위로 50px 올라간 만큼 겹쳐서 배치된다.
- 검은 상자는 fixed를 이용해서 스크롤을 내려도 항상 그 위치에 있다.
Note) 실행 결과
Ex) 배경 위에 글자 표시하기
- "CSS3"이라는 텍스트가 배경 이미지 영역을 벗어나지 않으면서 화면 오른쪽으로 옮긴다.
- h1 속성에 세 가지를 추가한다.
-> position: absolute;
-> right: 100px;
-> bottom: 100px;
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS float 속성</title>
<link rel="stylesheet" href="css/position-2.css">
</head>
<body>
<div id="contents">
<h1>CSS3</h1>
</div>
</body>
</html><hide/>
* {
box-sizing: border-box;
margin:0;
padding:0;
}
#contents {
background:url("../images/bg.jpg") no-repeat;
background-size:cover;
width:800px;
height:500px;
margin:0 auto;
position: relative;
}
h1 {
color:#fff;
font-size:120px;
text-shadow: 2px 3px 0 #000;
position: absolute;
right: 100px;
bottom: 100px;
}Note) 실행 결과
Ex) 마무리 문제 1)
- 이미지 테두리에 1px짜리 회색 실선을 그린다.
-> border: 1px solid #ccc;
- border-radius 속성을 사용해서 테두리를 원형으로 그린다.
-> border-radius: 50%
- 그림자(가로 세로 5px, 흐림 30px, 번짐 정도 2px, 그림자 색상 #000)
-> border-shadow: 5px 5px 30px 2px #000;
Note) 실행 결과
Ex) 마무리 문제 2)
- article 요소를 왼쪽으로 플로팅한다.
- article 요소 주변에 1px짜리 회색(#ccc)실선을 그린다.
- footer에서 플로팅 요소를 해제한다.
Note) 실행 결과
Ex) 마무리 문제 3)
- ul요소의 불릿을 없앤다.
- 목록의 각 항목의 li 요소는 왼쪽으로 플로팅한다.
- 링크 요소인 a는 display 속성을 floating속성을 block으로 지정하고 패딩을 10px, 20px로 지정한다. 배경색은 회색
-> 마우스가 가리킬 때, 검은색으로 칸 색깔이 변한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 3</title>
<style>
a:link, a:visited {
color:black;
text-decoration: none;
}
a:hover {
background-color:#000;
color:#fff;
}
ul{
list-style: none;
}
ul li{
float: left;
}
a{
padding:10px 20px;
display: black;
background-color: #ccc;
}
</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>Note) 실행 결과
'FrontEnd' 카테고리의 다른 글
| Chapter.10 CSS 고급 선택자 (0) | 2022.04.25 |
|---|---|
| Chapter 09. 이미지와 그라데이션 효과로 배경 꾸미기 (0) | 2022.04.25 |
| Chapter 07. 텍스트를 표현하는 다양한 스타일 (0) | 2022.04.20 |
| Chapter 06. CSS의 기본 (0) | 2022.04.20 |
| Chapter 05. 입력양식 작성하기 (0) | 2022.04.19 |