css?
우리가 사용하는 웹사이트들은 다양한 기능과 정보를 제공해준다.
그 기능 중 포근한 색감을 주는 색깔과 클릭시 닫히고 열리는 등
웹사이트를 다채롭게 만들어주는 기능을 CSS로 만들 수 있다.
문법
css는 key와 value 두가지를 작성해 사용한다.
크게 두가지 사용법이 있는데,
html에 queryString 형태로 직접 넣는 방법과
css파일을 작성하여 사용하는 방법이 있다.
1. style element
-
html태그 뒤에 queryString 형태로 작성한다.
-
queryString: key=value (속성=속성값)
<h1> i like cat </h1>
<h1 style="font-style: italic"> i like cat </h1>2. 외부파일
-
외부파일 작성 전, html의 body태그 안에서 id,class 속성값을 사용한다.
-
id와 class? 특정 element에 이름을 부여해준다.
-
새로운 css파일을 생성하여 원하는 id,class 속성값을 선택해준다.
이것을 '선택자'라 부른다.
<body>
<h2 id="title"> 고양이 얌전하게 만드는 법 </h2>
<h2 class="content"> 없습니다. </h2>
</body>html 예시
<body>
<h1 id="title">간식으로 뭘 먹었지?</h1>
<h2 class="content">내가 어제 먹은 과일이 뭘까?</h2>
<ul>
<li class="ate">사과</li>
<li>포도</li>
<li>귤</li>
</ul>
</body>위의 html을 꾸며줄 css예시
* {
font-size: 10px;
}
#title {
color: red;
}
.content {
background-color: yellow;
}
ul > li {
height: 40px;
}
.ate > li {
background-color: green;
}-
title이라는 속성값을 가지고 있는 id에 css를 적용시키기 위해 '#' 을 앞에 적고 title을 선택했다.
-
content는 class로 명시되었으니, '.' (쩜)을 앞에 적었다.
-
과일목록을 선택하기 위해 '>' 꺽쇠를 사용했다.
-
ul안에 있는 li중 ate클래스만 적용하기 위해 예시의 방법을 사용했다.
css는 선택자를 통해 제한된 영역을 꾸며줄 수 있다.
css로 바꿔줄 수 있는 속성값은 무수히 많으나, 그 중 두개만 꼽아보자.
선택한 영역의 공간을 조절 할 수 있는 margin과 padding이다.
3. 자주 사용하는 속성값
margin
- element간의 간격을 띄울 수 있다.
#content {
margin: 25px 0 30px 0;
}padding
- element안에 있는 content의 위치를 변경할때 사용한다.
- padding값을 작성하면 해당 방향으로 늘려준다.
#content {
pdding: 10px 5px 10px 5px;
}margin과 padding 모두 4방향 (동서남북)으로 설정이 가능하다.
왼쪽부터 북,동,남,서 (12시, 3시, 6시, 9시)로 기억하자!
Box-sizing
신나게 속성값을 바꿔가며 css를 적용시켜가다 보면 어느 순간 봉착하게 되는 문제가 하나 있다. 내가 설정한 크기(width)는 하나인데, 어째서 출력되는 크기는 다를까?!
그 이유는 라떼를 마실 필요도 없이 안 찾아봐도 된다.
하나의 속성값만 적용시켜주면 해결된다.
* {
box-sizing: border-box;
}