코딩야학#4. CSS 기초 및 실습
CSS는 Cascading Style Sheets의 약자로 정보를 전달하는 HTML 문서에 미적인 요소를 더해주는 언어라고 보면 된다. 쉽게 말해서 웹페이지의 레이아웃이나 텍스트의 색상, 크기 등의 디자인이 가능하다. 바로 예를 들어 살펴보자.
* CSS 코드가 없는 HTML 문서
HTML 문서라고 하기도 뭐하지만... 무튼 웹을 공부할 때 나오는 개념들을 몇 가지 적어보았는데, 크기가 조금 다를 뿐 미적인 요소는 전혀 없다(기본적인 크기는 h1, h2, h3 ... 등에 의해 정해진다). HTML 문서에 CSS의 디자인 요소를 추가하려면 <head></head> 태그 안에 <style></style> 속성을 사용하여 CSS 소스코드를 작성해주면 된다. 아래를 참고.
* CSS 기초 실습코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html> <head> <meta charset="utf-8"> <style> h1, h2 { color:red; font-size:30px } h2 { text-decoration: underline; } header h1 { border:1px solid pink; } </style> </head> <body> <header> <h1>CSS</h1> </header> <h2>Javascript</h2> <h1>HTML</h1> <h3>PHP</h3> </body> </html> | cs |
위 코드를 보면, <style></style> 태그까지는 HTML 코드이고 <style></style>로 감싸져 있는 부분이 CSS 코드이다. 색상을 지정해줄 수 있고, 밑줄을 그을 수도 있도 경계선을 그려줄 수도 있다. CSS 코드만 천천히 살펴보면,
- h1, h2 태그에 해당하는 콘텐츠는 색상을 red 로 하고 폰트 사이즈는 30px 로 정한다.
- h2 태그에 해당하는 콘텐츠에는 밑줄을 그어준다.
- header 의 h1에 해당하는 콘텐츠에는 red 색상의 1px 경계선을 그려준다.
* CSS 코드가 적용된 HTML 문서
간단하게 몇 가지 CSS 속성들이 적용된 웹페이지는 이렇다. 이런 식으로 CSS 요소들을 HTML 문서 내의 각각의 태그들에 적용시켜 주면 된다(이번 포스팅의 핵심인 CSS에 pink 색상의 테두리를 둘러주었다...ㅎㅎ). 끄읕.
