웹 문서에 디자인 입히기
▽ 스타일 시트
: 웹 문서 안에서는스타일 규칙을 여러 개 사용, 이런 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 스타일 시트라고 함
(1) 브라우저 기본스타일
: 웹 브라우저에 기본으로 만들어져 있음
(2)사용자 스타일
: 사이트 제작자가 만듦
- 인라인 스타일 : 스타일 시트를 사용하지 않고 적용할 대상에 직접 표시
- 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것
- 외부 스타일 시트 : 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 사용
▽ CSS 기본 선택자
(1) 전체 선택자
: 스타일을 문서의 모든 요소에 적용할 때 사용
→ * { 속성: 값; ........ }
(2) 타입 선택자
: 특정 태그를 사용한 모든 요소에 스타일을 적용
→ 태그명 { 스타일 규칙 }
(3) 클래스 선택자
: 같은 태그라도 특정한 부분을 선택해서 스타일을 적용
→ .클래스명 { 스타일 규칙 }
(4) id 선택자
: 웹 문서의 특정 부분을 선택
'.' 대신 #기호를 사용
→ #아이디명 { 스타일 규칙 }
※ 클래스 선택자는 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있음
● 캐스캐이딩
CSS에서 'C'는 cascading의 줄임말
스타일 시트에서는 우선순위가 위에서 아래로 적용된다는 의미 !
● 스타일 우선순위
: 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙
● 얼마나 중요한가?
: 컴퓨터 사용자가 지정한 스타일과 웹 문서를 제작한 제작자의 스타일 그리고 웹 브라우저가 기본으로 정해놓은 스타일을 함께 사용
①사용자 스타일 ★가장 중요
↓
②제작자 스타일
↓
③브라우저 기본 스타일
● 적용 범위는 어디까지인가?
: 중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있음
①!important ★가장 중요
↓
②인라인 스타일
↓
③id 스타일
↓
④클래스 스타일
↓
⑤타입 스타일
▽ 글자와 관련된 속성
| 종류 | 설명 |
| font-family | 글꼴 종류 |
| font-size | 글자의 크기 |
| font-style | 글자를 이탤리체로 |
| font-weight | 글자의 굵기 |
▽ 텍스트 스타일 속성
| 종류 | 설명 |
| color | 글자색 지정 |
| text-decoration | 텍스트에 밑줄이나 취소선 표시 여부 |
| text-transform | 텍스트 전체, 또는 첫글자를 대문자로 |
| text-shadow | 텍스트에 그림자 추가 |
| letter-spacing | 글자 사이 간격 지정 |
| word-spacing | 단어 사이 간격 지정 |
| text-align | 텍스트 정렬 방법 지정 |
| line-height | 줄 간격 조절 |
▽ 웹에서 색상을 지정하는 방법
| 방법 | 설명 |
| 16진수 | 빨강, 초록, 파랑 각각 두자리씩 16진수로 색상 표현 |
| rgb, rgba | rgba(R,G,B,a) 빨강, 초록, 파랑의 양을 0~255사이의 숫자로 표현 a는 불투명도 |
| hsl, hsla | hsla(H,S,L,a) 색상, 채도, 명도의 값으로 색상 표현 a는 불투명도 |
| 색상 이름 | red, yellow, black과 같은 색상 이름 사용 |
마무리 문제 ♥♡
1.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<link rel="stylesheet" href="css/mystyle-result.css">
</head>
<body>
<h1>웹 기술 - 기본</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript 기초</li>
</ul>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>탐라국 입춘굿</title>
<style>
#container {
width:600px;
margin:20px auto;
}
h1 {
display: inline-block;
background-color:#0404aa;
color:#fff;
}
.accent {
font-weight: 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>
3.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
}
.subject {
color:#ad3000;
font-weight:700;
font-size:larger;
}
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>
4.
<!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;
}
h1 {
text-align: center;
line-height: 70px;
color:#fff;
text-shadow:3px 2px 5px #000;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 개발 기초</h1>
</div>
</body>
</html>
5.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 3</title>
<style>
table {
border:1px solid black;
border-collapse:collapse;
caption-side:bottom;
}
td, th {
border:1px solid black;
padding:10px;
}
.heading {
background:#eee;
}
</style>
</head>
<body>
<table>
<caption>2019 국민 독서실태</caption>
<col class="heading">
<col>
<col>
<thead>
<tr class="heading">
<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>
6.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 4</title>
<style>
#container {
width:650px;
margin:0 auto;
padding:5px;
}
#check {
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;
line-height: 2em;
font-weight: bold;
text-align: center;
}
.accent {
color: #0000ff;
}
.smalltext {
font-size: 0.7em;
}
</style>
</head>
<body>
<div id="container">
<img src="images/top.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">
<div id="check">
<h1>확인하세요</h1>
<h2>주문 및 배송</h2>
<p><span class="accent">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h2>교환 및 환불</h2>
<p>불만족시 <span class="accent">100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>0000-0000<br>
<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>'HTML_CSS_JavaScript' 카테고리의 다른 글
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥ (0) | 2023.03.03 |
|---|---|
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑤ (0) | 2023.03.01 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ④ (0) | 2023.02.28 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ② (0) | 2023.02.19 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ① (0) | 2023.02.17 |