앞에서는 html의 간단한 sheet를 소개 하였습니다. html은 주로 골격을 나타나는 것이라, 디자인을 하는데는 css로 하여야 합니다.
아래 코드와 같이 css 관련 하여 매우 간단하게 코딩 하겠습니다.
- body 부분의 css 코딩
body {
background:yellow;
color:blue;
font-size : 20px;
font-weight:liter;
text-align:center;
margin-top: 10px;
}
- html 코딩
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
Please accept ou cokkies!
</body>
</html>
- 클래스 선택자(class selector) css 코딩
.main {margin-top: 100px;}.log-img {display: block;width: 380px;}.search-input {display: block;width: 480px;}
- 클래스 선택자(class seledctor) html 코딩
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main" align = "center">
<img
class="log-img" src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
width="100%"
/>
<input class="search-input" type="text" />
<div>
</div>
</div>
</body>
</html>
- margin(마진)의 css 코딩
body {
margin: 0;
}
.red {
background: #c71226;
height: 100px;
/* margin-top: 10px;
margin-left: 10px;
margin-right: 10px;*/
}
.blue {
background: #0d1b88;
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
}
.green {
background: #397327;
height: 100px;
}
- margin(마진)의 html 코딩
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
- 구글 main page 마진과 넒이 조정 css 코딩
.main {margin-top: 50px;}.log-img {display: block;width: 200px;margin-bottom: 20px;}.search-input {display: block;width: 400px;}
- 구글 main page 마진과 넒이 조정 html 코딩
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<img class = "log-img" src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
width="100%"
/>
<input width="100%" type="text" />
</div>
</body>
</html>
결과
- margin을 이용한 center 조정 css
img{display:block;width:200px;margin-left:auto;margin-right:auto;}
- margin을 이용한 center 조정 html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img src ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyygEBHnnwLxf2fLCYQZZjTKXCL2n87uhgG3k9vowLJsMCslhwKv_L010V6lgNCYdg8W7iqfUgnepSlO08F9dRx4gMvnQ6c6In5j6kd1wQK8yYy6ExrX6j-usLbZHTw-TXv587bq7gvZyqfzvY3vIgsPE2tAe-BIZIjvShxHPn53Yuqu-pv2lFBiRNV3c7/w263-h213/%EC%BA%A1%EC%B2%98.JPG">
</body>
</html>
결과
