라라리라
2023.08.08 / CSS1 - 코딩 20 일차 본문
0100_css선택자.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
/*
CSS 선택자(selector)
1. 태그 선택자
2. 클래스 선택자
3. 아이디 선택자
4. 그룹 선택자
*/
h1, h2 {
color: red;
}
.blue-h1 {
color: blue;
}
#yellow-h1 {
color: blueviolet
}
h1{
background-color: aqua;
}
</style>
</head>
<body>
<h1>Hello, CSS</h1>
<h1 class="blue-h1">Hello, CSS</h1>
<h1 class="blue-h1">Hello, CSS</h1>
<h1 class="blue-h1">Hello, CSS</h1>
<h1 id="yellow-h1">Hello, CSS</h1>
<h2>Hello, CSS</h2>
</body>
</html>
0101_tag1.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
h1 {
background-color: yellow;
border: 4px solid red; /*border 경계선 / solid 그냥선*/
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
</body>
</html>
0102_tag2.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
h1 { color: red; }
p { color: #1327e2; }
</style>
</head>
<body>
<h1>This is a headline.</h1>
<p>This is a paragraph.</p>
</body>
</html>
0103_tag3.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
h1, p {
font-family: serif; /* 글꼴 */
}
h1 {
border-bottom: 1px solid gray;
color: red;
}
body {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to Web Coffee!</h1>
<img src="coffee.gif" width="100" height="100">
<p>
하우스 로스팅 원두의 신선한 커피를 맛보세요!
공인 1급 Barista가
최고급 원두만을 직접 엄선하여 사용합니다.
</p>
<h2>메뉴</h2>
<p>
아메리카노,카페라떼,카푸치노,카페모카, ...
</p>
</body>
</html>
0104_class1.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
.type1 {
text-align: center;
}
</style>
</head>
<body>
<h1 class="type1">class가 type1인 헤딩입니다.</h1>
<p class="type1">class가 type1인 단락입니다</p>
</body>
</html>
0105_class2.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
p.type1 {
text-align: center;
}
</style>
</head>
<body>
<h1 class="type1">class가 type1인 헤딩입니다.</h1>
<p class="type1">class가 type1인 단락입니다</p>
</body>
</html>
0106_class3.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
h1 { background-color: #6495ed; }
p.a { background-color: #ff0000; }
p.b { background-color: #00ff00; }
p.c { background-color: #0000ff; }
p.d { background-color: #888888; }
</style>
</head>
<body>
<h1>CSS Color Chart</h1>
<p class="a">Color #1</p>
<p class="b">Color #2</p>
<p class="c">Color #3</p>
<p class="d">Color #4</p>
</body>
</html>
0107_id1.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
#special {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<!--
id 는 중복값을 허용하지않는다.
class 는 중복값이 허용된다.
좀 더 큰 범주는 id로 셋팅하고,
그 세부 범주를 class로 셋팅한다.
-->
<p id="special">id가 special인 단락입니다.</p>
<p>정상적인 단락입니다.</p>
</body>
</html>
0108_id2.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
#aa1{color:skyblue;}
#aa2{color:blue;}
</style>
</head>
<body>
<h1 id="aa1">아이디 연습</h1>
<h1 id="aa2">아이디 연습2</h1>
</body>
</html>
0109_div1.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
#container {
width: 1200px; /* 내용 전체의 너비 */
margin: 0 auto; /* 내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */
border: 1px solid red;
}
#header{
width:100%; /* 부모 요소의 너비와 똑같게 */
height:120px; /* 헤더의 높이 */
background-color:#acacac;
}
#contents {
width:100%; /* 본문의 너비 */
height:600px; /* 본문의 높이 */
background-color:#f7f7f7;
}
#footer {
width:100%; /* 부모 요소의 너비와 똑같게 */
height:100px; /* 푸터의 높이 */
background-color:#888888;
}
</style>
</head>
<body>
<!--
<div>
[1] div는 아무 기능이 없다.
[2] 태그기능 없이 오로지 스타일을 주기위해 사용한다.
[3] class 나 id 값을 세팅하기 위해서 사용한다.
-->
<div id="container">
<div id="header">
사이트 제목
</div>
<div id="contents">
본문
</div>
<div id="footer">
푸터
<div>
</div>
</body>
</html>
0110_div2.html
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
div {
width: 200px;
height: 100px;
margin: 15px;
text-align: center;
font-size: 20px;
line-height: 100px; /* height값과 동일한 값을 적용하면 텍스트를 상하 중앙 정렬할 수 있음 */
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>