지난번에 HTML에 대해서 배웠던 내용을 정리해봤는데, 오늘은 CSS의 시작하면서 배운 내용을 정리해보려고 한다.
먼저 코드이다.
<!doctype html>
<html>
<title>Hwan's HTML world</title>
<meta charset="utf-8">
<head>
<p style="color:greenyellow">made by Hypertext Markup Language (HTML)</style>
<style>a{ color:skyblue; text-decoration:none}</style>
</head>
<body>
<p><strong>hello my name is <u>Hwan</u></strong></p>
<img src="codingPic.jpg" width="50%">
<p style="margin-top:100px"> Guten Tag, ich heisse Hwan</p>
<p>Things We Are Going to Learn
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
<br>
<h1>
<font color="red">Ways of Saying Hello in Multiple Languages</font>
</h1> <ul>
<li>hi</li>
<li>hola</li>
<li>guten tag</li>
<li>annyeong</li>
</ul>
</p>
<p>
<a href="https://www.google.com/" target="_blank" title="google">Google Here!</a></p>
<p>
<a href="2.html" target="_blank" title="what is one plus one"> What is 1+1?</a>
</p>
</body>
</html>우선적으로 CSS는 웹사이트를 꾸밀 때 사용하는 언어이다.
언어를 예쁘게 꾸미는 방법은 다양하다.
먼저, html 자체 기능을 사용하는 방법이다.
html의 font 함수는 언어를 바꿀 수 있는 방법이다.
하지만, 이렇게 언어를 바꾸려면 일일이 모두 해당 font 함수를 적용해줘야 하고, 또한 html의 기능은 웹사이트의 기본적인 텍스트 및 형태를 구성하는 용도로 쓰이는데 CSS의 본 용도와 섞이게 된다.
그렇기 때문에, 우리는 해당 방법을 자주 사용하지는 않는다고 한다.
그렇다면, 어떤 방법을 사용하는가?
이렇게 CSS의 문법을 이용해서, 자동화하는 방법이다.
style함수는 html 함수인데, style 안에 CSS 문법을 이용해서 나타낸다.
이렇게 하면, 앞으로 a, 즉 링크들은 모두 색이 하늘색으로 바뀌고, 밑줄 없이 보여진다.
여기서 우리는 링크를 나타내는 a를 Selector (선택자)라고 한다.
이 웹 페이지에 있는 모든 a들은 해당 문법을 따른다고 해서, 선택자라는 이름이 붙었다.
color:red;와 같이 안에 괄호 안에 있는 내용을 Declaration (선언자),
그 중 color는 Property (속성), red는 Value라고 정의한다.
결과물은 다음과 같다.
하지만 모든 태그들이 일괄적으로 변한다면, 몇몇개는 이를 따르지 않도록 자체적으로 꾸밀 수도 있다.
이렇게 하면, 해당 한 줄은 앞선 선택자와 별개로 연두색으로 변하게 된다.
결과물은 다음과 같다.
CSS 문법을 잘 공부하면, 더욱 예쁜 코드를 만들 수 있을 것 같다.
'Computer Science > html + css + js' 카테고리의 다른 글
| CSS #2: 클래스, 박스모델, 그리드, 미디어 쿼리 (0) | 2022.12.28 |
|---|---|
| HTML 기본 함수 정리 <head, body, p...> (1) | 2022.12.23 |
| html+css 2일차: 웹의 기본 내용 (0) | 2022.01.08 |
| html 1일차: 드디어 첫 시작 (0) | 2022.01.06 |