오늘 배운 CSS를 기록해보자!
CSS는 Cascading Style Sheets약자이다. (ㅎ....)
CSS는 문서의 콘텐츠와 레이아웃, 글꼴 그리고 시각적 요소들을 꾸며주고 표현하고 등등 이전에 HTML에서 일일이 세부 스타일을 지정해 주던 것을 타파하고 따로 분리해서 만들어진 '스타일 시트 언어'다!
CSS에는 중요한 문법이 있다. 바로 '선택자(selector)'이다. 선택자는 HTML의 어떤 tag를 고를 것인가를 규정한는 문법이다. 선택자를 코드를 통해서 기록해보자!
<style>
* /*Universal 모든 tag를 선택*/
tag명 /*type selector 지정된 태그명을 가지는 요소를 선택*/
#id /*ID selector id 값을 지정하여 일치하는 요소를 선택*/
.class /*calss selector class값을 지정하여 일치하는 요소를 선택*/
selector[attribute] /*지정된 attribute를 갖는 모든 요소를 선택*/
</style>html문법으로 작성하고 나서 해당하는 셀럭트를 활용하면 쉽게 웹페이지를 디자인할 수 있다.
그리고 선택자를 잘 활용하는 것이 중요한 과제중에 하나이다.
그렇다면 셀렉터로 html의 요소를 선택하고 나서는 어떻게 활용하는지도 코드를 통해서 기록해보자!
<style>
body {
color : red;
font-size : 100px;
}
</style>
<body>
HELLO WORLD!
</body>style 태그에서 지금 body태그를 셀렉트 했고, {}내에 속성 : 속성값을 지정했는데, 색이라는 속성에는 빨강이라는 값을 넣어주고, 글씨크기라는 속성에는 100픽셀이라는 값을 지정했다. 이렇게 셀렉트로 지정하고 자신이 원하는 디자인대로 프로퍼티를 연속으로 지정할 수 있다! 그리고 중요한 것은 꼭 작성끝나면 세미콜론(;) 붙여주기~
HTML과 CSS를 연동하는 방법에는 3가지 방법이 있다.
첫번째로는 HTML에서 내부에서 연동하는 방법이다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: blue; }
p { background: yellow; }
</style>
</head>
<body>
<h1>Hello World</h1>
<p>NICEDAY:)</p>
</body>
</html>style 태그 안에 CSS를 작성하는 방법이다.
두번째는 HTML 외부에서 연동하는 방법이다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello World</h1>
<p>NICEDAY:)</p>
</body>
</html>h1 { color: black; }
p { background: green; }link태그를 활용해서 외부에 있는 CSS파일을 로드해오는 방식이다.
마지막으로는 Inline방법이다.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: beige">Hello World</h1>
<p style="background: pink">NICEDAY:)</p>
</body>
</html>HTML에 원하는 태그에 직접 작성하는 방식이다.
아무래도 외부에서 연동하는 방식이 가장 깔끔할 것 같다.
이전에 기록했듯이, 보이기에도 예쁜게 아무래도 좋다. 개발자 도구를 열었을 때 문법이 정갈하고 깔끔하면 보는 사람의 입장에서도 쉽게 이해할 수 있고, 정보과 의미를 파악할 수 있기 때문이다(semantic).
다음에는 무엇을 기록해볼까?
'리코딩 : HTML & CSS' 카테고리의 다른 글
| HTML & CSS (1) (0) | 2020.09.21 |
|---|