[생활코딩] CSS - 박스모델
CSS 의 3번째 강좌를 보고 있다. 박스모델을 본고 있다.
CSS 2강에서 선택자를 보았는데, 선택자라는 것이 그러고 보니, body 부분의 tag 만 사용할 수 있었다. 그런데 그 tag 를 예를 들면 상의 라면 그게 런닝셔츠인지, 티셔츠인지, 쟈켓인지 알수가 없다. 그래서 상의라면 모두에게 적용된다.
그래서 CSS 는 각각 구별해서 style 을 적용하고 싶을 때 무엇을 쓸까요? id 를 쓴다.
id pw 의 그 id 가 아니라,.... 저 아래를 보면 id 도 있고, 그것을 css에서는 선택자에서는 # 을 적어서 사용을 한다.
그리고 추가적으로 box model 을 배우고 있는데, padding 이라는 것도 있고,
아래는 강의 들으면서 적은 Code 이다. 참고할 때가 있겠지..
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<style>
#selected {
border: 5px red dotted;
padding :30px;
margin: 50px;
}
#extra {
border: blue 1px solid;
}
</style>
</head>
<body>
<ul>
<li> html </li>
<li id="selected"> css </li>
<li id="extra"> javascript </li>
</ul>
</body>
</html>
강의 마지막 구글 크롬 개발자 도구에 대해서 설명을 하는 부분이 있다. 이런 부분 배워두는 것이 좋을 것 같다. 언제 공부해서 적어야지. 까먹지 말게~!!
CSS 2강에서 선택자를 보았는데, 선택자라는 것이 그러고 보니, body 부분의 tag 만 사용할 수 있었다. 그런데 그 tag 를 예를 들면 상의 라면 그게 런닝셔츠인지, 티셔츠인지, 쟈켓인지 알수가 없다. 그래서 상의라면 모두에게 적용된다.
그래서 CSS 는 각각 구별해서 style 을 적용하고 싶을 때 무엇을 쓸까요? id 를 쓴다.
id pw 의 그 id 가 아니라,.... 저 아래를 보면 id 도 있고, 그것을 css에서는 선택자에서는 # 을 적어서 사용을 한다.
그리고 추가적으로 box model 을 배우고 있는데, padding 이라는 것도 있고,
아래는 강의 들으면서 적은 Code 이다. 참고할 때가 있겠지..
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<style>
#selected {
border: 5px red dotted;
padding :30px;
margin: 50px;
}
#extra {
border: blue 1px solid;
}
</style>
</head>
<body>
<ul>
<li> html </li>
<li id="selected"> css </li>
<li id="extra"> javascript </li>
</ul>
</body>
</html>
강의 마지막 구글 크롬 개발자 도구에 대해서 설명을 하는 부분이 있다. 이런 부분 배워두는 것이 좋을 것 같다. 언제 공부해서 적어야지. 까먹지 말게~!!
Comments
Post a Comment