728x90
html이 구조를 만드는거였다면 css는 꾸미는 것과 같다.
div{
color: red;
}위 코드를 css로 둔다면, div의 color가 설정되는 방식이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./01_main.css">
</head>
<body>
<div>반갑습니다~</div>
</body>
</html>위와같은 html을 연동해서 실행한다고 치면
위와같이 색이 입혀지게 된다.
css에 대해서는 나중에 자세하게 공부하겠지만, 오늘 내가 공부한걸로는
<!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>GitHub</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="header">
<div class = "container">
<div class = "container-left clearfix">
<div class = "logo">
<img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub Logo">
</div>
<div class = "menu clearfix">
<div class="menu-item">Personal</div>
<div class="menu-item">Open Source</div>
<div class="menu-item">Business</div>
<div class="menu-item">Explore</div>
</div>
</div>
</div>
</div>
</body>
</html>저번에 html공부할때 썼던 github 목차를 실제 github처럼 꾸며보는걸 공부했다
body{
margin : 0;
padding : 0;
}
.header{
width : auto;
height : auto;
background : white;
border-bottom: 1px solid lightgray;
}
.container {
width : 980px;
margin : auto;
}
.container-left{
padding-top: 20px;
padding-bottom:20px;
}
.logo {
float : left;
margin-right : 5px;
}
.logo img {
display: block;
}
.menu{
float : left;
}
.menu-item{
float: left;
padding: 8px 10px;
}
.clearfix::after{
content: "";
display: block;
clear : both;
}margin과 padding은 둘다 공백인데 내부공백과 외부공백의 차이가 있는듯 하다. 마진(이득)은 안에서 보고 패딩은 밖에서 껴입으니까 그런거 같다.
그외 float,display 등 아직 안배운 개념들이 나왔는데 빨리 배워보고 싶다. 간단히 css의 구조를 알아보았다. 참고로 위 코드를 실행시키면
위처럼 나오게 된다. 빨리 배워서 여러 프로젝트를 진행하고 싶다.
728x90
'FrontEnd > HTML&CSS' 카테고리의 다른 글
| 06_멀티미디어(img,audio,video) (0) | 2021.10.31 |
|---|---|
| 05_HTML 인라인 요소 (0) | 2021.10.31 |
| 04_content 구분 & 문자콘텐츠 (0) | 2021.10.30 |
| 03_HTML 블록과 인라인, 메타데이터 (0) | 2021.10.28 |
| 01_html 기초 (0) | 2021.10.27 |