1 CSS
(Cascading Style Sheet)
CSS는 디자인에 집중하는 언어로,
HTML이 정보를 전달하는 것에 집중할 수 있게하기 위해서 시각적인 것과 관련된 것들이
퇴출되면서 CSS라는 언어가 만들어졌다.
CSS는 HTML과는 서로 다른 체계를 가진,
완전히 다른 독립된 언어이지만 HTML을 꾸미는 것을 목적으로 고안되었기 때문에
두 언어는 웹페이지 내에서 공존하게 되며,
공존하기 위해 사용하는 태그가 <style> 태그 이다.
웹 브라우저는 html을 해석하며 코드를 실행하다가
style 태그 이후의 코드는 css 문법에 따라 해석해서 실행시킨다.
*<style>태그는 html 태그이지만, style 태그 이후에 나오는 코드는 css 문법으로 실행시킨다
2 CSS 문법
(1)선택자와 서술자
h1 {color:red}
여기서 h1은 선택자(selector)이며, { } 안에는 선택자를 꾸미는 속성이 들어간다(서술)
h1 {color:red; font-size: 10px}
하나의 덩어리를 속성이라고 하며 속성과 속성을 구분하는 구분자로 세미콜론(;)을 사용한다.
태그 선택자와 id선택자(#)
body 태그에 같은 선택자가 여러개일 때, 하나의 선택자에만 속성을 적용하고 싶다면
상위태그를 지정한다.
<body>
<h1 id="this"></h1>
<h1><h1>
</body>
<style>
#this {
}
</style>
(2)박스모델
CSS를 이용해서 각각의 HTML 태그들의 위치, 부피, 여백을 지정하는 것으로
컨텐츠 밖에 border가 있으며, border와 컨텐츠 사이의 여백에 padding이 있다.
또 문서 내의 다른 태그와 이 태그 사이의 간격을 margin 이라고 한다.
컨텐츠의 크기 자체도 width, height로 변경할 수 있다.
t1.daumcdn.net/cfile/tistory/9921C3505A42FB1B07
(3)float
두 개의 컨텐츠가 나란히 화면에 배치되게 하는 기능을 가진 속성이다.
<body>안에 <img src="url"/> 이미지를 넣고 밑에 text가 온다면 여백이 생기는데,
이미지와 텍스트를 나란히 놓고 싶을때 <style> 태그 안에
img { float: left } 속성을 넣으면 화면에 이미지와 텍스트가 나란히 배치된다.
+Tip)
탬플릿: html:5 + Tap
전체 정리: crtl+K+F
태그 빠르게 치기: 태그 쓰고 Tap키
ex) li*3 + tap키 = 한번에 list 세개 만들어짐
'Web Programming' 카테고리의 다른 글
| web 5 : script의 위치 + use strict (0) | 2021.01.03 |
|---|---|
| web 4 : html과 css파일 분리하기 (0) | 2021.01.02 |
| web 2 : 의미론적인 웹(Semantic Web) (0) | 2020.12.31 |
| web 1 : html 태그와 리스트 (0) | 2020.12.31 |