1. 스타일 시트
| 종류 | 설명 |
| 브라우저 기본 스타일 | 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일 |
| 인라인 스타일 | style 속성을 사용해 필요한 요소에 스타일을 직접 지정 |
| 내부 스타일 시트 | 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리 |
| 외부 스타일 시트 | 문서에서 사용하는 스타일을 모아서 따로 파일로 저장 후 연결하여 사용 |
2. CSS 기본 선택자
| 종류 | 설명 | 작성 예시 |
| 전체 선택자 | 문서의 모든 요소에 스타일 적용 | * { margin:0; } |
| 타입 선택자 | 특정 태그 사용한 모든 요소에서 스타일 적용 | p { font-style: italic; } |
| 클래스 선택자 | 특정 부분만 선택해서 문서 안에 여러번 적용. 마침표를 붙여서 사용. | .bg {background-color: #ddd } |
| id 선택자 | 특정 부분만 선택해서 문서 안에서 한번만 적용. # 붙여서 사용 | # container { width : 500px; } |
| 그룹 선택자 | 여러 요소에 같은 스타일을 적용할 때 사용 | h1, h2 { text-align: center; } |
3. 스타일 우선순위
1) 얼마나 중요한가? 사용자 스타일 -> 제작자 스타일 -> 브라우저 기본 스타일
2) 적용 범위는 어디까지 인가? !important -> 인라인 스타일 -> id 스타일 -> 클래스 스타일 -> 타입 스타일
3) 소스 작성 순서는 어떠한가? 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어 씀.
예제) 외부 스타일시트 html에 연결하기
<link rel="stylesheet" href="파일">
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>웹 기술 - 기본</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript 기초</li>
</ul>
</body>
</html>예제) 클래스 스타일과 id스타일 사용하기
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>탐라국 입춘굿</title>
<style>
/* 06\sol-2.html 소스 참고 */
#container{
width:600px;
margin: 20px auto;
}
h1{
display: inline-block;
background-color: #0404aa;
color: #fff;
}
.accent{
font-wight: bold;
color:red;
}
</style>
</head>
<body>
<div id="container">
<h1>탐라국 입춘굿</h1>
<p>제주도의 문화축제 중에서 유일하게 <span class="accent">전통시대부터 존재했던 축제</span>이다.</p>
<p>제주에서 입춘은 새철<sup>(제주어, 샛절)</sup> 드는 날. <br>
하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.
</p>
</div>
</body>
</html>4. 글자와 관련된 속성
| 종류 | 설명 |
| font-family | 글꼴 종류 지정 |
| font-size | 글자 크기 지정 |
| font-style | 글자를 이탤릭체로 표시할지 지정 |
| font-weight | 글자의 굵기 지정 |
5. 텍스트 스타일 속성
| 종류 | 설명 |
| color | 글자색 지정 |
| text-decoration | 텍스트에 밑줄이나 취소선 표시할지 여부 지정 |
| text-transform | 텍스트 전체, 또는 첫글자를 대문자로 표시 |
| text-shadow | 텍스트에 그림자 추가 |
| letter-spacing | 글자 사이의 간격 지정 |
| word-spacing | 단어 사이의 간격 지정 |
| text-align | 텍스트 정렬 방법 지정 |
| line-height | 줄 간격을 조절 |
6. 웹에서 색상을 지정하는 방법
| 방법 | 설명 | |
| 16진수 | 빨강,초록,파랑 각각 두자리씩 총 여섯자리의 16진수로 색상 표현 | |
| rgb, rgba | rgb(R,G,B) | 빨강, 초록, 파랑의 양을 0~255 사이 숫자로 표현 |
| rgba(R,G,B,a) | rgb 형식에 불투명도를 함께 표현 | |
| hsl, hsla | hsl(H, S, L) | 색상, 채도, 명도의 값으로 색상 표현 |
| hsla(H, S, L, a) | hsl 형식에 불투명도를 함께 표현 | |
| 색상 이름 | red, yellow, black과 같은 색상 이름 사용 | |
예제1.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
}
.subject {
font-weight:700;
font-size:larger;
color: #ad3000;
}
ul{
list-style-type: none;
}
li{
line-height:2.0;
}
</style>
</head>
<body>
<div class="container">
<h1>최신 웹 디자인 트렌드</h1>
<ul>
<li><span class="subject">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
<li><span class="subject">플랫 디자인 </span> - 입체에서 평면으로 </li>
<li><span class="subject">풀스크린 배경 </span> - 콘텐츠에 집중</li>
<li><span class="subject">원 페이지 사이트 </span> - 한 페이지에 모든 내용을 담다</li>
<li><span class="subject">패럴랙스 스크롤링 </span> - 동적인 효과로 강한 인상을!</li>
<li><span class="subject">웹 폰트 </span> - 웹 타이포그래피를 받쳐주는 기술</li>
</ul>
</div>
</body>
</html>예제2.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
.container {
width:300px;
height:70px;
margin:0 auto;
background-color:#444;
color: white;
text-shadow: 3px, 2px, 5px black;
}
h1 {
text-align: center;
line-height: 70px;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 개발 기초</h1>
</div>
</body>
</html>
예제3.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 3</title>
<style>
table{
caption-side: bottom;
border: 1px solid black;
border-collapse: collapse;
}
th{
padding: 10px;
background-color: #eee;
}
td{
text-align: center;
}
.table1{
}
</style>
</head>
<body>
<table border="1">
<caption>2019 국민 독서실태</caption>
<thead>
<tr>
<th>구분</th>
<th>성인</th>
<th>독서자</th>
</tr>
</thead>
<tbody>
<tr>
<th>종이책</th>
<td>6.1권</td>
<td>11.8권</td>
</tr>
<tr>
<th>전자책</th>
<td>1.2권</td>
<td>7.1권</td>
</tr>
<tr>
<th>오디오북</th>
<td>0.2권</td>
<td>5.5권</td>
</tr>
</tbody>
</table>
</body>
</html>
예제4.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 4</title>
<style>
#container { /* 전체 콘텐츠를 감싸는 div */
width:650px; /* 너비 */
margin:0 auto; /* 가로로 중앙에 배치 */
padding:5px; /* 테두리와 내용 사이의 패딩 여백 */
}
#check { /* 텍스트 부분을 감싸는 div */
width:640px; /* 너비 - 그림 너비 값에 맞춤 */
border:1px solid #ccc; /* 테두리 */
}
h1 {
color: white; /* 글자색 */
font-size: 1em; /* 글자 크기 */
background: #222; /* 배경색 */
margin: 0; /* 제목과 다른 요소 간의 마진 여백 */
padding: 10px; /* 테두리와 제목 텍스트 사이의 패딩 여백 */
}
h2{
color: #ff0000;
font-size: 1.5em;
text-align: center;
}
p{
font-size: 1.2em;
text-align: center;
font-weight:bolder;
}
span{
color:#0000ff;
}
</style>
</head>
<body>
<div id="container">
<img src="images/top.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">
<div id="check">
<h1>확인하세요</h1>
<h2>주문 및 배송</h2>
<p><span>오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h2>교환 및 환불</h2>
<p>불만족시 <span>100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>0000-0000<br>
<span>상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>7. 박스 모델 속성
- 블록 레벨 요소 : 태그를 사용해 요소 삽입시 혼자 한줄 차지하는 것 (너비 100%)
<hi>, <div>, <p>
- 인라인 레벨 요소 : 한줄을 차지 하지 않고, 콘텐츠만큼만 영역을 차지하고 나머지 공간에 다른 요소 올 수 있음.
<span>, <img>, <strong>
- CSS 박스 모델 : 웹문서의 내용을 박스 형태로 정의하는 것. 박스 모델이 모여 웹문서를 이룸.
마진과 패딩, 테두리 등 박스가 여러겹 들어 있음.
- 박스모델 구성 요소
: 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩, 박스의 테두리, 여러 박스 모델 사이의 여백인 마진
| 종류 | 설명 |
| width | 박스 모델의 너비를 지정 |
| height | 박스 모델의 높이를 지정 |
| box-sizing | 박스 모델의 크기를 계산하는 기준 지정 |
| box-shadow | 박스 모델에 그림자 효과를 추가 |
8. 테두리 속성
| 속성 | 설명 |
| border-style | 상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정 |
| border-위치-style | '위치' 자리에 top, right, bottom, left 중에 선택해서 특정 위치의 테두리 스타일만 지정 |
| border-width | 상하좌우 4개 방향 테두리 두께를 한꺼번에 지정 |
| border-위치-width | '위치' 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 테두리 색상만 지정 |
| border-color | 상하좌우 4개 방향 테두리 색상을 한꺼번에 지정 |
| border-위치-color | '위치' 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 테두리 색상만 지정 |
| border-radius | 상하좌우 4개 방향 꼭짓점을 한꺼번에 둥글게 만듬 |
| border-위치-radius | '위치' 자리에 top-left, top-right, bottom-right, bottom-left 등을 선택해서 특정 꼭지점만 둥글게 처리함 |
9. 여백 속성
| 종류 | 설명 |
| margin | 상하좌우 4개 방향의 마진을 한꺼번에 지정 |
| margin-위치 | '위치' 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 마진만 지정 |
| padding | 상하좌우 4개 방향의 패딩을 한꺼번에 지정 |
| padding-위치 | '위치' 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 패딩만 지정 |
10. 레이아웃 속성
| 종류 | 설명 |
| display | 화면에서 요소 배치 방법을 지정. 자주 사용하는 주요 속성으로 block, inline, inline-block, none 등이 있음 |
| float | 웹 요소를 왼쪽이나 오른쪽으로 배치. float를 적용한 요소는 clear 속성으로 해제하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치됨. |
11. 위치 지정 속성
| 종류 | 설명 |
| left, right, top, bottom | 기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정 |
| position | 웹 요소의 위치를 지정. 속성값으로 static, relative, absolute, fixed 가 있음. |
예제1.) 사진 원형으로 만들기
- border-radius: 50%; 로 지정하면 원형 출력됨
- box-shadow: 5px 5px 30px 2px #000; (그림자효과 가로5 세로5 흐림정도30 번짐정도2 색상#000)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>연습문제 1</title>
<style>
#container {
width:350px;
margin:30px auto;
}
#circle{
border-radius: 50%;
box-shadow: 5px 5px 30px 2px #000;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="container">
<img id="circle" src="images/bear.jpg" alt="곰인형 사진">
</div>
</body>
</html>
예제2.) 플로팅으로 박스 배치하기
- article { float: left } : 아티클요소를 왼쪽으로 플로팅
- footer { clear: left} : 푸터요소에서 왼쪽 플로팅 해제
- footer > p : 푸터요소에 속한 p 요소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
section{
width:800px;
margin: 0 auto;
}
h2{
font-size:1.5em;
}
h3 {
font-size:1.0em;
}
p {
line-height:20px;
font-size:12px;
}
footer {
width:100%;
height:50px;
background-color:#222;
clear:left;
}
footer > p {
color:#fff;
font-size:0.9em;
text-align: center;
line-height:50px;
}
article {
border: 1px dashed black;
margin: 10px;
padding: 10px;
float: left;
width: 350px;
height: 200px;
}
</style>
</head>
<body>
<section>
<h2>강아지 용품 준비하기</h2>
<article class="at1">
<h3>강아지 집 </h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</article>
<article class="at2">
<h3>강아지 먹이 </h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</article>
<article class="at3">
<h3>밥그릇, 물병 </h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
</article>
<article class="at4">
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
</article>
<footer>
<p>boxmodel 연습하기</p>
</footer>
</section>
</div>
</body>
</html>
예제3.) 네비게이션 메뉴 만들기
- a : link, a : visited : a 요소에 방문하지 않은 링크에, 방문했던 링크에 스타일 적용
- a : hover : a 요소에 포인터 올렸을 때 스타일 적용
- li { float : left } : 목록의 각 항목인 li 요소를 왼쪽으로 플로팅
- a { disply : block } : a 요소의 disply 속성을 블록으로 지정
<!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-type: none;
}
li{
float: left
}
a{
display: block;
padding: 10px 20px;
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>