HTML what is CSS

0-0eong

|2023. 9. 1. 13:37

CSS란 Cascading Style Sheet의 약자로
Cascading이란 "위에서 아래로 흐르다" 라는 뜻으로
폭포를 연상케 하는 단어인데 왜 이런 이름을 갖게 되었는지 알아보자.😁

HTML은 웹페이지에 자료를 디자인하는 마크업 언어라고 했다.
HTML 속 수많은 태그들 안에 일일히 style 속성을 적용해주면 어떻게 될까?
코드가 매우 복잡하고 어수선해질 것이다.
이는 코드에 가속성에 영향을 끼치기에 비효율적이다.

하여 CSS란 HTML 안에 적용하는 style 속성을 따로 모아둔 저장공간이라고 할 수 있겠다.
때문에 HTML 안에 link 태그를 통해 CSS 파일을 다운로드 하는 이유가 여기에 있다.

<link href="님들의css파일경로~~" rel="stylesheet">

클래스

.profile { 
  width : 200px;
  display : block;
  margin : auto;
}

위와 같이 넣고싶은 스타일을 나열하고 .스타일이름 와 {}로 묶어주는 방식인데 이를 클래스라고 한다.

방금 만들어준 클래스를 HTML에서 어떻게 불러올까?

<img src="lion.png" class="profile">

위와 같이 태그를 생성할 때 "class=".클래스명"" 을 넣어주면
해당 태그에 CSS 스타일이 적용되는 것이다.

이와 같이 CSS에 스타일을 나열하고 HTML에서 불러오는 것을
스타일 셀렉터라고 한다.
셀렉터는 총 클래스 셀렉터, 아이디 셀렉터, 태그 셀렉터 3가지가 있다.

.profile { font-size : 20px }  /*클래스*/
#special { font-size : 30px } /*아이디*/
p { font-size : 16px } /*태그*/