지난 시간까지 웹페이지를 만드는 뼈대, HTML에 대해 간략하게 알아 보았다. 그리고 이번 시간에는 CSS, 즉 웹페이지를 트랜디하게 바꿔주는 언어에 대해 알아볼 것 이다.
먼저, CSS를 알기 전에 HTML의 구조에 대해 생각해 볼 필요가 있다. HTML의 태그는 부모-자식의 구조를 가지는데, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다.
HTML을 왼쪽과 같은 그림처럼 부모와 자식간의 관계를 가지는데, 자식 태그의 속성들은 부모 태그에 영향을 주지는 않지만, 부모 태그의 속성은 자식 태그에 영향을 준다.
즉, 부모 태그의 글씨 속성을 빨강으로 변경 하였다고 하면, 자식 태그1, 2가 모두 영향을 받는다. 반대로, 자식 태그 1의 글씨 속성이 빨강으로 변경된다고 부모 태그나 자식 태그 2에 영향을 주지 않는다.
HTML의 특징을 이해하고, 이제부터 CSS를 사용하는 방법을 알아볼 것 이다.
CSS는 HTML의 <head> ~ </head> 안에 <style> ~ </style> 태그를 이용해 작성한다. <body> ~ </body> 안의 html 태그에 내가 편집할 각각의 요소에 class를 만들어, class 단위로 편집하는 것이 가장 큰 특징이다. 즉, 하나의 태그가 여러개의 class를 가질 수 있다.
이 특징을 이해하고 이제부터 CSS를 다루어 볼 것이다.
'HTML,CSS,JavaScript' 카테고리의 다른 글
| 06. CSS, 로그인 페이지 만들기 (0) | 2022.11.03 |
|---|---|
| 05. CSS, 사용하기 (0) | 2022.11.03 |
| 03. HTML, 본문 (0) | 2022.11.03 |
| 02. HTML, 제목 (0) | 2022.11.03 |
| 01. HTML, 시작 (0) | 2022.11.03 |