CSS에 대해서

CSS (Cascading Style Sheets)란?

CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 디자인과 레이아웃을 제어하기 위한 스타일 시트 언어이다.
HTML은 웹 페이지의 구조를 정의하고, CSS는 이러한 구조에 스타일을 적용하여 웹 페이지를 디자인한다.

#. 스타일 지정

CSS를 사용하면 웹 페이지의 요소에 스타일을 지정할 수 있다.
글꼴, 색상, 배경, 여백, 테두리 등의 모양과 디자인을 정의할 수 있다.

<head>
  <style>
    선택자 {
      속성: 속성값;
      속성: 속성값;
    }
  </style>
</head>

위와 같이 스타일을 지정해줄 수 있다. 위에서는 html 파일의 내부에 있는 <head> 태그 안에 <style> 태그를 입력 후 그 안에 ‘선택자’, ‘속성’, ‘속성값’ 을 입력해줌으로 모양과 디자인 등이 정의 되는 것이다.

01. 선택자, 속성, 속성값

선택자(selector)는 html 문서에서 스타일을 지정할 대상을 말한다.
속성(property)는 주고자 하는 스타일의 종류이다. 예) color(속성) = red
속성값(value)는 지정한 속성에서 세부적인 선택이다. 예) color = red(속성값)

<head>
  <style>
    input {
      background: tomato;
    }
    .class_selector {
      color: pink;
      background: #ddd;
    }
    #id_selector {
      color: blue;
      background: #ddd;
    }
  </style>
</head>
<body>
  <div class="class_selector">Hello World!</div>
  <br />
  <div id="id_selector">Lorem Ipsum!</div>
  <br />
  <input type="text" />
</body>

선택자의 종류

태그(tag) 선택자
- 태그 선택자는 html 문서의 태그명을 그대로 가지고 와서 사용하면 된다.
클래스(class) 선택자
- 클래스 선택자는 태그(tag)에 부여한 클래스명을 가져오되 앞에 .을 꼭 붙혀주어야한다.
  .을 안붙히는 실수를 자주하게 되니 꼭 기억하도록 하자.
  예) .class_selector{}
아이디(id) 선택자
- 아이디 선택자도 클래스(class) 선택자와 동일하게 태그(tag)에 부여한 아이디명을 가져오되 #을 꼭 붙힌다.
  잊지말자 #. 예) #id_selector{}

📍출력물

Hello World!

Lorem Ipsum!

각각 태그, 클래스, 아이디 선택자를 사용하여 속성과 속성값을 적용한 위 코드의 출력물이다.

02. CSS 스타일의 종류

CSS를 정의하는 방법은 시간에 걸쳐서 변해왔고 특별한 상황이 아니면 마지막 방법이 주로 사용한다.

인라인 스타일
- html 문서의 태그에 직접적으로 스타일을 적용한다.
  예) <span style="font-size:10px;">
- 매번 태그 안에 스타일을 부여하려니 한계가 존재하기에 이후에 설명하는 방법들로 바뀌었다.
내부 스타일
- html 문서의 <head>태그 안에 <style>태그를 넣고 스타일 태그안에 css를 작성한다.
- 같은 페이지 안에 있는 요소들에 스타일을 부여할 수 있다.
- 인라인 스타일에 비해서 확실히 편하고 가독성이 좋아졌다.
- 인라인 스타일과 마찬가지로 한계가 존재하여 “외부 스타일”이 도입된다.
외부 스타일
- .html 페이지를 만드는 것 같이 .css 페이지를 만들고 원하는 html 페이지에 작성한 .css파일을 적용시킬 수 있다.
- 태그로 작성한 .css 파일을 적용시킨다.
  예시)

⭐️이번 포스팅부터는 css에 대해서 알아보도록 하겠습니다.

Newer post