CSS stylesheet : 외부스타일시트 연결 (코딩복습 / 독학)
1.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_선택자를 활용한 스타일주기</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrapper{
background-color: #FEFF89;
}
header, footer{
height:150px;
border:1px solid red;
text-transform:capitalize;
text-align:center;
line-height:150px;
}
#main{
background-color: #CFF2FF;
height:300px;
}
.bo{
border:1px solid red;
}
#content{
width:70%;
float:left;
box-sizing:border-box;
height:300px;
}
aside{
width:30%;
float:left;
box-sizing:border:box;
height:300px;
}
#content h1, aside h1{
font-size: 30px;
text-transform: uppercase;
text-align: center;
line-height: 60px;
}
#content li{
text-align: center;
line-height: 30px;
}
.a{color:#F56464;}
.b{color:#828d45;}
.c{color:#555CB0;}
.d{color:#589650;}
.e{color:#8F609C;}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>header</h1>
</header>
<section id="main">
<section id="content" class="bo">
<h1>content</h1>
<ul>
<li class="a">menu1</li>
<li class="b">menu2</li>
<li class="c">menu3</li>
<li class="d">menu4</li>
<li class="e">menu5</li>
</ul>
</section>
<aside class="bo">
<h1 class="b bo">banner</h1>
<img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixli
b=rb-1.2.1&ixid=eyJhcHBfaWQi0jEyMDd9&auto=format&fit=
crop&w=500&q=60" alt="fashion" height="235px">
</aside>
</section>
<footer>
<h1>footer</h1>
</footer>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_레이아웃_selfEX</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrapper{
background-color: #3BC59F;
width: 700px;
margin: 0 auto;
height: auto;
}
#box{
background-color: yellow;
width: 100%;
padding-top: 100px;
}
.upper{text-transform: uppercase;}
.text_center{
text-align: center;
}
.purple_big{
color: purple;
font-size : 2em;
font-weight: bold;
}
</style>
</head>
<body>
<div id="wrapper">
<h1 class="upper text_center">content</h1>
<ul class="text_center">
<li class="purple_big">menu1</li>
<li>menu2</li>
<li class="purple_big">menu3</li>
<li>menu4</li>
<li class="purple_big">menu5</li>
</ul>
<ol class="text_center">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ol>
</div>
<div id="box">test</div>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_외부스타일시트로 연결하기</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>header</h1>
</header>
<section id="main">
<section id="content" class="bo">
<h1>content</h1>
<ul>
<li class="a">menu1</li>
<li class="b">menu2</li>
<li class="c">menu3</li>
<li class="d">menu4</li>
<li class="e">menu5</li>
</ul>
</section>
<aside class="bo">
<h1 class="b bo">banner</h1>
<img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixli
b=rb-1.2.1&ixid=eyJhcHBfaWQi0jEyMDd9&auto=format&fit=
crop&w=500&q=60" alt="fashion" height="235px">
</aside>
</section>
<footer>
<h1>footer</h1>
</footer>
</div>
</body>
</html>#rel: relation의 약자로 -> 링크된 문서와의 관계를 말한다.
#href: hypertext reference의 약자로 -> 링크가 참조하는 파일의 위치를 말한다.
즉, 해당 링크를 현 페이지에 stylesheet로 사용하겠다는 뜻이다(:
stylesheet css 파일(외부파일)은 아래와 같다. 파일명은 'mystyle.css'
*{
margin: 0;
padding: 0;
}
#wrapper{
background-color: #FEFF89;
}
header, footer{
height:150px;
border:1px solid red;
text-transform:capitalize;
text-align:center;
line-height:150px;
}
#main{
background-color: #CFF2FF;
height:300px;
}
.bo{
border:1px solid red;
}
#content{
width:70%;
float:left;
box-sizing:border-box;
height:300px;
}
aside{
width:30%;
float:left;
box-sizing:border:box;
height:300px;
}
#content h1, aside h1{
font-size: 30px;
text-transform: uppercase;
text-align: center;
line-height: 60px;
}
#content li{
text-align: center;
line-height: 30px;
}
.a{color:#F56464;}
.b{color:#828d45;}
.c{color:#555CB0;}
.d{color:#589650;}
.e{color:#8F609C;}
그리고 아래는 stylesheet css파일을 또다른 페이지에도 적용한 경우다(:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04_외부스타일 같이 사용하기</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<h1 class="a">heading1</h1>
<h2 class="b">heading2</h2>
<h3 class="c">heading3</h3>
<h4 class="bo d">heading4</h4>
<h5 class="bo">heading5</h5>
<h6 class="bo">heading6</h6>
</body>
</html>반응형
'IT' 카테고리의 다른 글
| float 속성 활용하기 / display 속성 / 코딩 레이아웃 연습 (0) | 2022.06.27 |
|---|---|
| 속성 선택자 / 후손 및 자손 선택자 / 동위선택자 / float (0) | 2022.06.26 |
| Coding study : CSS / margin:0 auto; (0) | 2022.06.24 |
| CSS / 인라인방식 / 내부선언방식 / 외부선언방식 / 선택자 (0) | 2022.06.24 |
| 코딩연습 / 복습 / 공부 : semantic tag (0) | 2022.06.23 |