본문 바로가기
CSS/CSS 기초

CSS 기초(1) CSS의 구성과 HTML과의 관계

by 쫑뚱이 2022. 7. 7.
728x90
반응형

CSS 기초(1)


오늘은 CSS에 대해 알아보겠습니다.

CSS는 보통 HTML과 함께 사용하며 HTML에서 웹페이지의 뼈대를 구성하면

CSS에서 디자인을 해서 웹페이지를 구성할 수 있습니다. 

 

CSS는 '선택자{ 속성: 속성 값;}'으로 구성이 되어있는데

'속성: 속성 값;' 부분을 선언부라고 부릅니다.

 

선택자는 스타일링하고 싶은 속성과 속성 값을 작성하는 영역으로

HTML에서 태그를 선택하거나, class 속성, id 속성의 값을 입력하여 지정할 수 있습니다.

 

CSS 코드를 예시로 보여드리면

'div { color: red;}'

여기서 div가 해당하는 영역이 선택자, color가 해당하는 영역이 속성,

red가 해당하는 영역을 속성 값이라 하며 'color: red;' 부분을 선언부라고 부릅니다.

 

CSS 코드를 작성하시려면 HTML의 기초가 정말 중요한데 그중에서

HTML의 부모 태그, 자식 태그, 형재 태그를 알아두시면 좋습니다.

 

왜냐하면 CSS 코드를 작성하시면서 어떤 태그에 스타일을 적용하냐에 따라

웹디자인의 모습이 완전히 달라지기 때문에 CSS를 공부하시기 전에

HTML의 기초에 대해서는 꼭 알아두시면 좋습니다.

 

https://jjong-wiki-bigdia.tistory.com/11

 

HTML 기초(2) div, span, a, img, ul, ol, li, dl, dt, dd 태그

HTML 기초(2) 저번 시간에는 HTML 페이지에서 head 태그 안에 있는 메타 태그에 대해 설명드렸습니다. 이번 시간에는 HTML 태그를 사용하여 직접 텍스트를 작성해 보도록 하겠습니다. HTML 태그를 작성

jjong-wiki-bigdia.tistory.com

 


 

오늘은 여기까지 하겠습니다.

다시 정리해보면 CSS는 HTML과 함께 사용하는데

HTML에서 웹페이지의 뼈대를 구성하면

CSS는 디자인을 담당하고 있습니다.

 

그렇기 때문에 CSS를 배우기 전에 HTML에 대해서

기본적으로 알고 CSS를 배우시면 정말 유용할 것입니다.

 

특히 HTML에서 부모 태그, 자식 태그, 형재 태그에 대해서는 꼭 알아두시면 좋습니다.

 

다음 글에도 CSS의 기초에 대해서 다뤄보겠습니다.

감사합니다!!

728x90
반응형

댓글