001.css
h1 {
color:red
}001.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="001.css">
</head>
<body>
<h1>외부 CSS</h1>
<h1 style="color:blue;">인라인 CSS</h1>
</body>
</html>
002.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1, h2, h3 {
color: skyblue;
}
</style>
<!-- h1, h2, h3는 선택자(selector)
color는 속성(property)
skyblue는 값(value) -->
</head>
<body>
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
</body>
</html>
003.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {color: red;}
h2 {color: blue;}
.one {color: green;}
.two {border: solid 1px black;}
#three {font-style: italic;}
#four {color: black;}
</style>
<!-- * 범용 선택자
h2 타입 선택자
. 클래스 선택자
# 아이디 선택자 -->
</head>
<body>
<h1>범용 선택자 *</h1>
<h2>타입 선택자 h2</h2>
<h3>범용 선택자 *</h3>
<p>범용 선택자 *</p>
<p class="one">클래스 선택자 .one</p>
<p class="two">클래스 선택자 .two</p>
<p class="one two">클래스 선택자(class끼리 중첩 가능) .one two</p>
<p id="three">아이디 선택자 #three</p>
<p id="four">아이디 선택자 #four</p>
<p id="three four">아이디 선택자(id끼리 중첩 불가) #three four</p>
</body>
</html>
004.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.one {font-size: 32px;}
.two {font-size: 2em;}
.three {font-weight: normal;}
div {font-size: 16px;}
.box-one {
width: 40vw;
height: 30vh;
background-color: green;
}
.box-two {
width: 200px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<p class="one">class one / font-size 32px</p>
<p class="two">class two / font-size 2em</p>
<h1 class="three">class three / font-weight normal</h1>
<div>
<p class="box-one">창 크기 기준 퍼센트 단위</p>
<p class="box-two">픽셀 단위</p>
</div>
</body>
</html>
005.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {color: white;}
.one {
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: solid 20px black;
}
.two {
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: solid 20px black;
box-sizing: border-box;
}
.three {
width: 200px;
height: 200px;
background-color: green;
margin: 20px;
border: solid 20px black;
border-radius: 20px;
}
.four {
width: 200px;
height: 200px;
background-color: blue;
border: solid 20px black;
opacity: 0.5;
}
.five {
width: 200px;
height: 200px;
background-color: yellow;
border: dotted 20px black;
}
</style>
</head>
<body>
<div class="one">
padding 20px<br>
때문에 넓어짐<br>
(200+20)*(200+20)
</div>
<div class="two">
사각형이 넓어지는게 싫다면?<br>
box-sizing: border-box;로<br>
200*200 안에서 해결 가능
</div>
<div class="three">
margin은 넓이에<br>
포함되지 않음<br>
radius 둥글게
</div>
<div class="four">
padding, margin 미적용<br>
opacity 투명도
</div>
<div class="five">
padding, margin 미적용<br>
dotted 점선
</div>
<p>border 속성은 이 외에도 double, dashed, groove, ridge, inset, outset 등 다양함</p>
</body>
</html>
006.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.container {
width: 600px;
height: 600px;
background-color: skyblue;
position: relative;
top: 10px;
left: 10px;
}
.one {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
margin: -50px;
top: 50%;
left: 50%;
}
.two {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<p>
위치 기준점 정할 때<br>
absolute는 절대<br>
relative는 상대
</p>
<p>
.center {<br>
width: 100px;<br>
height: 100px;<br>
background-color: yellow;<br>
position: absolute;<br>
top: 0;<br>
bottom: 0;<br>
left: 0;<br>
right: 0;<br>
margin: auto;<br>
}<br>
이런 식으로 설정하면 화면 크기에 맞춰서 가운데로 자동정렬됨
</p>
</body>
</html>
007.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@800&display=swap" rel="stylesheet">
<style>
h1 {font-family: 'Nanum Myeongjo', serif;}
</style>
</head>
<body>
<h1>구글폰트 나눔명조 적용하기</h1>
</body>
</html>
008.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.black {
width: 100px;
height: 100px;
background-color: #000000;
color: #ffffff;
border: solid 1px black;
}
.white {
width: 100px;
height: 100px;
background-color: #ffffff;
border: solid 1px black;
}
.gray {
width: 100px;
height: 100px;
background-color: #333333;
color: #ffffff;
border: solid 1px black;
}
.red {
width: 100px;
height: 100px;
background-color: #ff0000;
border: solid 1px black;
}
.green {
width: 100px;
height: 100px;
background-color: #00ff00;
border: solid 1px black;
}
.blue {
width: 100px;
height: 100px;
background-color: #0000ff;
color: #ffffff;
border: solid 1px black;
}
.one {
width: 100px;
height: 100px;
background-color: #FFB6C1;
border: solid 1px black;
}
.two {
width: 100px;
height: 100px;
background-color: Beige;
border: solid 1px black;
}
</style>
</head>
<body>
위치별로 빨빨초초파파, 빛의 삼원색 생각하면 됨
<div class="black">#000000<br>zero*6<br>검정색</div>
<div class="white">#ffffff<br>full*6<br>흰색</div>
<div class="gray">#333333<br>중간*6<br>회색</div>
<div class="red">#ff0000<br>빨빨없없없없<br>빨강</div>
<div class="green">#00ff00<br>없없초초없없<br>초록</div>
<div class="blue">#0000ff<br>없없없없파파<br>파랑</div>
<div class="one">#FFB6C1<br>color value</div>
<div class="two">Beige<br>color name</div>
</body>
</html>
출처
반응형
'개발(Web) > Web' 카테고리의 다른 글
| [JavaScript] JS 기초 (1) (0) | 2021.02.02 |
|---|---|
| [HTML] 에밋(Emmet) 설치 (0) | 2021.02.01 |
| [Eclipse] Processing instruction not closed. 버그 (0) | 2021.01.30 |
| [HTML] HTML 기초 30분 요약 (0) | 2021.01.30 |
| [Eclipse] Could not delete C:/경로. May be locked by another process. (0) | 2021.01.28 |