생활코딩 [WEB2 - CSS] STUDY 기록
시작
2021. 12. 27. ~
1. 수업 소개
이 과정이 끝나면 아름다움에 대한 관심을 가지게 될 것 이다.
처음에 css 사용을 위해, html 코드 안에 아이니다 클래스를 넣을 때 어리둥절했다.
그 둘의 관계에 대해서 이해가 제대로 안 된 상태라서!
지금은 어느정도 이해했지만, 문제는 아이디명이나 클래스명을 어떤식으로?
적절하게 정해야 하는지를 잘 모르겠다.
뭐,,, 하다 보면 차차 나아지겠지.
2. CSS가 등장하기 전의 상황
웹페이지를 만든 사람들은 웹페이지를 아름답게 만들기 위한 고민에 빠지게 된다.
그래서 등장한 게 <font> 태그. (현재는 사용하지 않는다.)
html 내에 사용하던 태그로, 컬러 변경이 가능했다.
<h1><a href="index.html"><font color="green">윤동주 시인 시</font></a></h1>
<ol>
<li><a href="1.html"><font color="green">서시</font></a></li>
<li><a href="2.html"><font color="green">별 헤는 밤</font></a></li>
<li><a href="3.html"><font color="green">쉽게 쓰여진 시</font></a></li>
</ol>
3. CSS의 등장
극단적으로 생각해보기!
바꿔야 할 a 태그의 개수가 1억개라고!
하나하나 찾아서 바꾸는 것에는 한계가 있다.
<style>~</style>
<head>
<title>윤동주</title>
<meta charset="utf-8">
<style> --- 이 부분
a {
color: pink;
}
</style>
</head>
<body>
<h1><a href="index.html">윤동주 시인 시</a></h1>
<ol>
<li><a href="1.html">서시</a></li>
<li><a href="2.html">별 헤는 밤</a></li>
<li><a href="3.html">쉽게 쓰여진 시</a></li>
</ol>
</body>
위와 같지만, 다른 코드.
컬러를 변경해야할 때 바꾸기 훨씬 쉽다.
<font color="green"></font> 라는 4개의 중복코드를 제거할 수 있다.
나중에 유지보수하기 용이하다.
300x250
'LEARN > HTML | CSS' 카테고리의 다른 글
| [CSS] 6~7 id class 선택자 (0) | 2022.01.26 |
|---|---|
| [CSS] 4~5 style 속성 , a 태그 (0) | 2022.01.11 |
| [HTML] 16~22 생활코딩 WEB1 HTML&Internet 실습 끝 (0) | 2021.12.31 |
| [HTML] 15 웹사이트 완성 (+윤동주 시인 시) (0) | 2021.12.30 |
| [HTML] 12~14 LIST, ul, ol, li, html 구조, a 태그 (링크) (0) | 2021.12.29 |
