CSS
- html과 다른 문법을 가짐.
- html 시각적으로 문서를 꾸밀 수 있음
- style 태그를 통해 CSS로 해석하라고 알려줄 수 있음.
Selector
- 강한순서
- id, class, tag
- 뒤로 갈수록 추상화 되어있고 id로 올수록 구체적이다.
tag
h1 {
font-size:100px;
text-align: center;
}
class
- 모든 클래스에 대해 지정
- 클래스 속성에 여러개의 값이 들어올 수 있지만 이렇게 쓰진 않음.
- 여러개가 들어가 있을 경우 먼저 정의 된것이 선택됨.
.saw {
color:gray;
}
id
#active{
color:red;
}
상위 클래스 지정 가능
#grid #article {
padding-left: 10px;
}
- id grid 밑에있는 id article 만 지정
Box model
- HTML tag 한개 한개가 차지하는 부피
- block element(tag): block 단위로 area를 차지 -> 줄바꿈이 됨.
- inline element(tag): 자신의 크기만큼 area를 차지 -> 줄바꿈 안됨.
a {
border:5px solid red;
/* padding: 글자와 영역간 차이*/
padding: 20px;
/* margin: 영역과 영역간 차이 */
margin:0;
/* display: block inline 등 영역범위 바꾸기 */
/* width: 영역 범위 줄이기 */
display: block;
width: 100px;
}
Grid
디자인을 목적으로 영역을 잡는 태그
- div: block element
- span: inline element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px solid red;
}
#grid {
border: 3px solid pink;
display: grid;
grid-template-columns: 150 1fr;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
Media Query
- 웹의 크기에 따라 조건이 만족할때 CSS내용을 실행하게 만드는 것
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border:10px solid green;
font-size:60px;
}
/* 800보다 작다면 */
@media(max-width:800px) {
div {
display:none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
CSS 파일 재사용
- 모든 HTML 파일에 CSS를 넣는다면 유지보수에 힘들다.
- 따라서 CSS파일을 따로 만들어서 HTML에 연결시켜야함.
<link rel="stylesheet" href="style.css">
- HTML head에 CSS파일을 연결시키는 문법
