짝수 홀수 행 색상
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>
<!-- 줄복사 : ctrl + d(인텔리제이 단축키) -->
<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) {
/* 10진수 : 1 ~ 9까지 , 16진수: 1 ~ 15까지, 8진수 : 1 ~ 7까지, 2진수: 0,1 */
/* 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;
}
결과

exam css8

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>
<h1 class="heading">HTML</h1>
</body>
</html>
css
h1 {
font-size: 60px;
}
.heading {
/* 화면 단위 : px(픽셀, 고정크기),
%(부모의 크기를 물려받아 사용,) */
/*가로 */
width: 100%;
/*세로 */
height: 100px;
/* 배경색(바탕색) */
background-color: #222;
/* 글자색 : 키워드(red, orange), #16진수,
rgb(숫자,숫자,숫자) */
/* 글자색 */
color: rgb(255, 255, 255);
text-align: center;
}
fontsize
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: 1.0em; */
/* 고정 크기 */
font-size: 16px;
}
/* 2nd p태그 선택 */
p:nth-child(2) {
font-size: 1.5em;
}
/* 3nd p태그 선택 */
p:nth-child(3) {
font-size: 2.0em;
}
결과

Box
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>
<div></div>
<div></div>
</body>
</html>
css
/* box 기본 속성 : 높이, 가로, 바깥여백, 안쪽여백, 외곽선 */
div {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: red;
/* 외곽선 */
/* 사용법 : border: 선두께 선스타일 선색깔 */
border: 5px solid orange;
/* 안쪽 여백(padding) */
padding: 30px;
/* 바깥 여백(margin) */
margin: 10px;
}
결과

Box detail
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-left: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 30px; */
/* 바깥 여백 : 상/좌/하/우 */
/* 축약형 */
/* margin: 상 우 하 좌 */
margin-left: 0;
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
}
결과
/* box 기본 속성 : 상세 */
div {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 외곽선 */
/* border: 선두께 선스타일 선색깔 */
border: 5px solid orange;
/* 안쪽 여백 : 상/좌/하/우 */
/* 축약형 : */
/* padding: 상 우 하 좌 (12시 기준으로 시계방향 한바뀌 돈다)*/
padding: 30px 0 30px 0;
/* padding-left: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 30px; */
/* 바깥 여백 : 상/좌/하/우 */
/* 축약형 */
/* margin: 상 우 하 좌 */
margin-left: 0;
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
}
table box exam

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/s)</td>
</tr>
</table>
</body>
</html>
css
/* 문제 풀이 */
/* 선택자들에게 공통된 속성 적용하기 */
/* 사용법 :
선택자, 선택자2, ...{
속성:값;
}
*/
table, tr, th, td {
/* 외곽선 : border: 선두께 선스타일 선색상 */
border: 1px solid black;
/* 테이블 선사이 간격 붙이기 속성 */
border-collapse: collapse;
/* 안쪽 여백 */
padding: 8px;
}
table box exam2

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_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;
}
#weather {
color: red;
font-weight: bold;
}
#title2 {
color: green;
}
#location {
font-weight: bold;
}
#notice {
color: blue;
font-weight: bold;
}
table box exam3

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="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;
border: 5px solid #e1285a;
padding: 10px
}
table box exam4

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/06_exam_box_4.css">
</head>
<body>
<h3 id="title1">도심 속 생태문화공원 서울대공원</h3>
<h3 id="title2">도심 속 생태문화공원 서울대공원</h3>
<h3 id="title3">도심 속 생태문화공원 서울대공원</h3>
</body>
</html>
css
#title1 {
/* 외곽선 (위쪽) */
/* border-top: 선두께 선스타일 선색상 */
border-top: 3px solid black;
/* 가로크기 */
width: 345px;
/* 안쪽 여백 */
padding: 5px
}
#title2 {
/* 외곽선 (왼쪽) */
border-left: 3px solid #e1285a;
/* 가로크기 */
width: 345px;
/* 안쪽 여백 */
padding: 5px
}
#title3 {
/* 외곽선 */
/* border: 선두께 선스타일 선색상 */
border: 2px solid skyblue;
/* TODO: 둥근 사각형 속성 */
/* TODO: 사용법 - border-radius: 크기; (크기가 클수록 원이됨) */
border-radius: 3px;
/* 안쪽 여백 */
padding: 5px;
/* 가로 크기 */
width: 345px;
}
table box exam5

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 {
/* 외곽선 */
/* border: 선두께 선스타일 색깔 */
border: 5px solid blue;
/* 안쪽 여백 */
padding: 20px;
/* 바깥 여백 */
margin: 30px;
}
table box exam6

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: 선두께 선스타일 선색깔 */
border-left: 8px solid blue;
padding: 10px;
}
p {
/* 외곽선 */
border: 1px solid black;
width: 500px;
/* 안쪽 여백 */
padding: 20px;
/* 바깥 여백(위쪽) */
margin-top: 20px;
}
table box exam7

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>
<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 {
border: 1px solid black;
/* 축약형 */
padding: 20px 30px 30px 30px;
/* 가로크기 */
width: 450px;
/* 축약형 : margin 상 우 하 좌 */
margin: 20px 0 0 20px;
}
li {
/* 목록 앞에 점 없애기 */
list-style: none;
/* 외곽선(점선) */
/* border-bottom: 선두께 선스타일(점선) 색상 */
border-bottom: 1px dotted gray;
/* 안쪽 여백(축약형) : padding 상 우 하 좌 */
padding: 10px 0 10px 0;
}
'HTML > Css' 카테고리의 다른 글
[CSS] position (0) | 2023.08.11 |
---|---|
[CSS]특수 선택자, 가상 선택자 글꼴, 선택자 우선순위, div ,span (0) | 2023.08.09 |
[CSS] box collapse schedule (0) | 2023.08.08 |
[CSS] 폰트, 밑줄, 글자 속성, 정렬 (0) | 2023.08.04 |
[CSS] 사용법 및 입문 (0) | 2023.08.03 |