Example
[E-HTML&CSS] 선택자 예시, 연습문제
송기동
2023. 8. 7. 14:03
728x90
구조 선택자
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/19_etc_structure.css" />
</head>
<body>
<ul>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
<li>네 번째</li>
<li>다섯 번째</li>
<li>여섯 번째</li>
<li>일곱 번째</li>
</ul>
</body>
</html>css 코드
/* 구조 선택자 */
li {
list-style-type: none;
}
/* 2n : 짝수, 2n +1 : 홀수 */
/* 사용법 :
선택자:nth-child(수식) {
속성:값;
}
*/
li:nth-child(2n) {
/* 2진수 : 0,1 8진수 : 1 ~ 7까지, 10진수 : 1 ~ 9까지, 16진수 : 1 ~ 15까지 */
/* 16진수 : 10(a), 11(b), 12(c), 13(d), 14(e), 15(f) */
/* 색깔 지정 : red, (#16진수 6자리, 색상표 표기) */
background-color: #ff0003;
}
li:nth-child(2n + 1) {
background-color: #800000;
}연습문제
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/20_exam_css_8.css" />
</head>
<body>
<!-- 힌트 : heading -> width(%, px), height -->
<!-- font-size, text-align -->
<h1 class="heading">HTML</h1>
</body>
</html>css 코드
h1 {
font-size: 60px;
}
.heading {
/* 화면 단위 : px(픽셀, 고정크기),
%(부모의 크기를 물려받아 사용, 반응형 디자인) */
/* 가로 */
width: 100%;
/* 세로 */
height: 100px;
/* 글자색 : 키워드(red,orange), #16진수, rgb(숫자,숫자,숫자) : 숫자(0~255) */
color: rgb(255, 255, 255);
/* 배경색(바탕색) */
background-color: #222;
/* 글자 정렬 */
text-align: center;
}폰트 사이즈
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/21_font_size.css" />
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>css 코드
/* 글자 단위 : px, em(rem), % */
/* 1st p태그 선택 */
p:nth-child(1) {
/* 상대 크기 단위(글자) */
/* 1.0em == 16px(웹 브라우저 기본 글자 단위 : 부모태그에서 상속받음) */
/* font-size : 100% == 1.0em == 16px */
/* 고정 크기 */
font-size: 1em;
}
/* 2nd p태그 선택 */
p:nth-child(2) {
font-size: 1.5em;
}
/* 3rd p태그 선택 */
p:nth-child(3) {
font-size: 2em;
}box 속성1
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/01_box_width_height.css" />
</head>
<body>
<!-- 1st 박스 -->
<div></div>
<!-- 2nd 박스 -->
<div></div>
</body>
</html>css 코드
/* box 속성 : 높이, 가로, 바깥여백, 안쪽여백, 외곽선 */
div {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: red;
/* 외곽선 */
/* 사용법 : border: 선두께 선스타일 선색깔 */
border: 5px solid orange;
/* 안쪽여백(padding) */
padding: 30px;
/* 바깥여백(margin) */
margin: 30px;
}box 속성2
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/02_box_detail.css">
</head>
<body>
<div></div>
</body>
</html>css 코드
/* box 기본 속성 : 상세 */
div {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 외곽선 */
/* border: 선두께 선스타일 선색깔 */
border: 5px solid orange;
/* 안쪽여백 : 상/우/하/좌 */
/* 축약형 :
padding: 상 우 하 좌(12시 기준으로 한바뀌 돈다); */
padding: 30px 0 30px 0;
/* padding-top: 30px;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px; */
/* 바깥여백 : 상/우/하/좌 */
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}연습문제1
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/03_exam_table_box_1.css" />
</head>
<body>
<!-- border-collapse: collapse; (테이블 안쪽선 붙히기 속성) -->
<h3>태풍 정보</h3>
<table>
<tr>
<th rowspan="2">일시</th>
<th colspan="2">중심위치</th>
<th rowspan="2">중심기압(hPa)</th>
<th colspan="2">최대풍속</th>
</tr>
<tr>
<td>위도</td>
<td>경도</td>
<td>초속(m/s)</td>
<td>시속(km/h)</td>
</tr>
</table>
</body>
</html>css 코드
/* 문제 풀이 */
/* 선택자들에게 공통된 속성 적용하기 */
/* 사용법 :
선택자, 선택자2,...{
속성: 값;
}
*/
table,
tr,
th,
td {
/* 외곽선 : border: 선두께 선스타일 선색상 */
border: 1px solid black;
/* 테이블 선사이 간격 붙이기 속성 */
border-collapse: collapse;
/* 안쪽 여백(padding) */
padding: 8px;
}연습문제2
html 코드
<!-- 04_exam_2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/04_exam_box_2.css" />
</head>
<body>
<h3 id="title1">딸기</h3>
<p>
딸기는 25℃ 이하의 <span id="weather">선선한 기후</span>
를 좋아하는 여러해살이 열매 채소로 5월에 열매를 수확합니다. 다른 작물에
비해 잘 기르기 위해서 많은 노력이 필요합니다.
</p>
<h3 id="title2">양평 딸기 축제</h3>
<ul>
<li>일 시 : 2018년 1월 15일~5월 15일</li>
<li>장 소 : <span id="location">양평군 내 딸기 마을</span></li>
<li>연락처 : 031-774-0000</li>
<li id="notice">일정은 바뀔 수 있으므로 방문 전 전화 요망</li>
</ul>
</body>
</html>css 코드
#title1 {
color: purple;
}
#title2 {
color: green;
}
#weather {
color: red;
font-weight: bold;
}
#location {
font-weight: bold;
}
#notice {
color: blue;
font-weight: bold;
}연습문제3
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/05_exam_box_3.css" />
</head>
<body>
<h3>도심 속 생태문화공원 서울대공원</h3>
</body>
</html>css 코드
h3 {
/* 가로 */
width: 400px;
/* 안쪽 여백 */
padding: 10px;
/* 외곽선 */
border: 5px solid red;
}연습문제4
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/06_exam_box_4.css" />
</head>
<body>
<!-- 힌트 : border-top, border-left, border-right 등 -->
<h3 id="title1">도심 속 생태문화공원 서울대 공원</h3>
<h3 id="title2">도심 속 생태문화공원 서울대 공원</h3>
<h3 id="title3">도심 속 생태문화공원 서울대 공원</h3>
</body>
</html>css 코드
#title1 {
/* 가로 크기 */
width: 400px;
/* 외곽선 (위쪽만) : border-top */
border-top: 2px solid black;
/* 안쪽 여백 */
padding: 5px;
}
#title2 {
/* 외곽선 (왼쪽만) : border-left */
border-left: 5px solid red;
/* 안쪽 여백 */
padding: 5px;
}
#title3 {
/* 가로 크기 */
width: 400px;
/* 외곽선 */
border: 2px solid skyblue;
/* TODO: 둥근 사각형(모서리) 속성 */
/* TODO: 사용법 - border-radius: 크키;(크기가 클수록 원이됨 */
border-radius: 5px;
/* 안쪽 여백 */
padding: 5px;
}연습문제5
html 코드
<!-- 07_exam_box_5.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/07_exam_box_5.css" />
</head>
<body>
<h3>웹이란?</h3>
<p>
- 웹(Web)은 거미줄을 뜻하는 말로 WWW(World Wide Web)의 약어입니다.<br />
- 인터넷과 웹 브라우저를 통해 사용자에게 정보를 제공하고 서로 소통하게
해줍니다.<br />
- 웹과 관련된 직업에는 웹 기획자, 웹 디자이너, 웹 퍼블리셔, 웹
프로그래머가 있습니다.<br />
</p>
</body>
</html>css 코드
h3 {
/* 가로 */
width: 600px;
/* 외곽선 */
border: 5px solid blue;
/* 안쪽 여백 */
padding: 20px;
/* 바깥 여백 */
margin: 30px;
}연습문제6
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/08_exam_box_6.css" />
</head>
<body>
<h3>동물원 속 온실식물원</h3>
<p>
온실식물원은 울창한 숲으로 둘러싸인 청계산 자락에 위치하고 있으며, 총
928종의 다양한 식물이 전시되고 있습니다.
</p>
</body>
</html>css 코드
h3 {
/* 왼쪽 외곽선 */
border-left: 8px solid blue;
/* 안쪽 여백(왼쪽) */
padding-left: 10px;
}
p {
/* 외곽선 */
border: 1px solid black;
/* 가로 */
width: 500px;
/* 안쪽 여백 */
padding: 10px;
/* 바깥 여백(위쪽) */
margin-top: 20px;
}연습문제7
html 코드
<!-- 09_exam_box_7.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/09_exam_box_7.css" />
</head>
<body>
<!-- 힌트 : border-bottom: 1px dotted 색깔; -->
<h3>주말 야간 개장 안내</h3>
<ul>
<li>- 기간 : 7.28~8.20 09:00~21:00 (입장마감 20시)</li>
<li>- 대상 : 동물원, 식물원</li>
<li>- 프로그램 : 야간동물원 관람, 동물생태 설명회, 식물전시</li>
</ul>
</body>
</html>css 코드
h3 {
/* 바깥여백 */
margin-top: 20px;
margin-left: 20px;
}
ul {
/* 가로 */
width: 500px;
/* 외곽선 */
border: 1px solid black;
/* 안쪽여백 */
padding: 20px 30px 30px 30px;
/* 바깥여백 */
margin: 20px 0 0 20px;
}
li {
/* 외곽선(점선) : dotted */
border-bottom: 1px dotted gray;
/* 안쪽 여백 */
padding: 10px 0 10px 0;
/* 목록 앞에 점 없애기 */
list-style-type: none;
}
728x90