<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 속성</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap" rel="stylesheet">
<style>
h1.title {
background-color: black;
color: pink;
font-size: 30 px
}
body {
/*url은 경로를 표현한다*/
background-image: url(image/tae4.jpg);
}
</style>
<style>
#size1>div:nth-child(1) {
font-size: 100%;
}
#size1>div:nth-child(2) {
font-size: 150%;
}
#size1>div:nth-child(3) {
font-size: 200%;
}
</style>
<style>
#size2>div:nth-child(1) {
font-size: 1.0em;
}
#size2>div:nth-child(2) {
font-size: 1.5em;
}
#size2>div:nth-child(3) {
font-size: 2.0em;
}
</style>
<style>
#size3>div:nth-child(1) {
font-size: 16px;
}
#size3>div:nth-child(2) {
font-size: 24px;
}
#size3>div:nth-child(3) {
font-size: 32px;
}
</style>
<style>
#color>h4:nth-child(1) {
/*키워드를 이용한 색상 표현*/
background-color: aquamarine;
color: blue;
}
#color>h4:nth-child(2) {
/*rgb를 이용한 색상 표현*/
background-color: rgb(255, 225, 255);
color: rgb(0, 150, 150);
}
#color>h4:nth-child(3) {
/*#rgba를 이용한 색상표현 : 투명도 표현*/
background-color: rgba(100, 200, 240, 0.7);
color: rgb(0, 0, 150);
}
#color>h4:nth-child(4) {
/*#000000을 이용한 색상표현*/
background-color: #1F158A;
color: #FF889A;
}
</style>
<style>
/*박스속성 : width, height, border, padding, margin*/
#box1 {
background-color: black;
color: wheat;
/*표현영역*/
width: 100px;
height: 100px;
/*테두리*/
border: 10px solid pink;
/*테두리와 텍스트 사이의 간격*/
padding: 15px; /*padding-top: 50px;*/
/*요소 태그들과의 간격*/
margin : 20px;
margin-left : 300px;
}
</style>
<style>
#box2 {
background-color: pink;
width : 100px; height: 100px;
padding:10px; margin:10px;
border : 10px solid grey;
/*raidus 순서 : 11시 방향부터 시계방향*/
/*border-radius: 10px 30px 10px 30px*/
border-radius: 100px;
background-image : url(image/tae1.jpg);
background-size : contain;
}
</style>
<style>
#display span{
background-color : #FFFFF0;
width:100px;
height: 100px;
}
#display>span:nth-child(1){
/*화면에서 요소 태그를 표현하지 않는다*/
/*display: none;*/
}
#display>span:nth-child(2){
/*블럭속성*/
display :inline-block;
}
#display>span:nth-child(3){
}
</style>
<style>
#font{
font-family: 'Nerko One', cursive;
font-size : 4em;
font-weight: bold;
font-style : italic;
color : darkorchid;
text-align: center
}
</style>
<style>
h3{
text-align: center;
}
h3+h4{
text-align: right;
margin-right: 50px;
}
h3+h4+p{
line-height: 180%;
}
</style>
</head>
<body>
<h1 class="title">텍스트의 중앙 정렬</h1>
<h3>텍스트 수평 방향의 정렬</h3>
<h4>2020.11.24</h4>
<p>에스콰이어는 방탄소년단에 대해 “멤버들은 팝의 정상에 올랐고, ‘인기’를 새롭게 정의했으며, 전통적인 ‘남성성’에 정면 도전했다”라고 소개했다. 이어 “멤버 간 서로에 대한 애정, 자신의 인생이나 가사를 통해 본인의 약점과 감정을 드러내는 (방탄소년단의) 방식이, 스스로에게는 물론이고 서로에게 정형화한 틀을 끊임 없이 강요하는 전통적인 남성들의 방식보다 더 어른스럽고 남성적으로 보인다”라고 평가했다.</p>
<h1 class="title">폰트 속성 : font-family, -size, -style -weight</h1>
<div id="font">
Hello! we are BTS!
</div>
<h1 class="title">Display 속성 : none, block, inline, inline-block</h1>
<div id="display">
<span>span1</span>
<span>span2</span>
<span>span3</span>
</div>
<h1 class="title"> 박스 속성 : width, height, border, padding, margin</h1>
<div>
<div id="box2">BOX2</div>
<div id="box1">BOX BOX BOX BOX BOX BOX BOX BOX BOX BOX </div>
</div>
<h1 class="title">color를 표현하는 단위</h1>
<div id="color">
<h4> 키워드를 이용한 색상 표현</h4>
<h4> rag (R,G,B) 이용 색상 표현</h4>
<h4> rgba(R,G,B,A) 이용 색상표현</h4>
<h4> #000000</h4>
</div>
<h1 class="title">Font-size : 단위를 확인</h1>
<div id="size1">
<div>font-size : 100 %</div>
<div>font-size : 150 %</div>
<div>font-size : 200 %</div>
</div>
<div id="size2">
<div>font-size : 1.0em</div>
<div>font-size : 1.5em</div>
<div>font-size : 2.0em</div>
</div>
<div id="size3">
<div>font-size : 16px</div>
<div>font-size : 24px</div>
<div>font-size : 32px</div>
</div>
</body></html>