[CSS] css 기본 지식 1

성장을 즐기는 개발자, 최호경·2023년 4월 22일

CSS란?

다양한 웹 개발 언어를 사용해서 복잡하고 화려하게 기능을 구현하여도, 결국 최종적으로 웹 브라우저에 출력되는 모든 웹 페이지는 HTML로 구성되어 있습니다. 브라우저는 HTML 문법을 해석해서 웹 페이지를 출력하기 때문이지요.

그런데 이 웹 페이지를 누군가가 보고 사용할텐데, 예쁘거나 보기 불편하다면 온라인 공간 또는 서비스로서 웹 사이트는 가치가 없을 것입니다.

그래서 CSS를 통해 HTML을 사용자가 보기 좋도록 예쁘게 꾸며줘야 합니다.

HTML과의 관계

HTML은 정보를 전자 출판을 통해 표현하기 위한 언어입니다. 과거에는 HTML이라는 하나의 언어에 정보와 디자인을 모두 표현할 수 있었습니다. 하지만 웹 시장이 급격하게 성장하면서, 더 효율적이고 강력한 기능을 수행할 필요가 생기면서 변화가 생깁니다. HTML은 정보를 표현하는 것에만 집중하게 하고, CSS라는 디자인만 담당하는 언어가 생겨난 것이죠.

CSS는 Cascading Style Sheet라는 이름을 갖고 있으며, 개발자나 사용자 누구나 자신이 원하는 형식으로 바꿔서 가변적으로 정보를 볼 수 있도록 하고자 하는 의도가 있습니다. 따라서 웹 문서를 자유롭게 다양한 형식으로 변경하는데 도움을 주도록 만들어졌다고 합니다.

HTML와 CSS가 만나는 법

inline 방식

<h1 style="color: red">Hello World</h1>

style tag

	<style>
    /** 선택자 */
      li {
          /** 선언 */
        color: rebeccapurple;
      }
   </style>

선택자와 선언

css 문법은 선택자와 선언으로 이루어져 있습니다. 어떤 태그 또는 속성에 css를 적용할지 선택하는 것이 '선택자'이고, 원하는 css 내용을 부여하는 내용이 적힌 것이 '선언'입니다.

선택자의 종류

tag 선택자
- 존재하는 각 태그마다 동일하게 적용할 때 사용합니다.
id 선택자
- 반복되지 않고 딱 한번만 적용할 필요가 있는 속성에는 id를 사용합니다.
class 선택자
- 반복되고 중복적용될 필요가 있는 속성에는 class를 사용합니다.

<style>
    /* tag 선택자 */
    li {
      color: red;
      text-decoration: underline;
    }
    /* id 선택자 */
    #select {
      font-size: 50px;
    }
    /* class 선택자 */
    .deactive {
      text-decoration: line-through;
    }
  </style>

선택자끼리의 관계

<style>
      /* 부모 자손 선택자 */
      ul li {
        color: red;
      }
      /* 부모 자식(직계 자손) 선택자 */
      .lecture > li {
        border: 1px solid red;
      }
      /* 형제 or 대등한 관계 선택자 */
      ul,
      ol {
        background-color: powderblue;
      }
      /* 여러 속성 동시 적용 */
      orange.small {
      		/* orange 태그 + small 클래스 */
      }
    </style>

Cheat Sheet : 모든 문법적인 지식을 외우기 힘들기 때문에, 필요할 때마다 찾아보는 것이 개발에서는 중요합니다. 따라서 관련된 cheat sheet를 검색하면, 누군가가 정리해놓은 내용을 참조해서 빠르게 원하는 기능을 구현할 수 있습니다.

pseudo(가상) class selector

클래스 선택자는 아니지만 클래스 선택자처럼 동작하여, 모든 태그가 아닌 특정한 요소들만 골라서 선택할 수 있는 선택자입니다. 항상 적용되는 기능이 아니고, 특정한 상황 또는 맥락에서만 작동하게 됩니다.

	  a:link {
        color: black;
      }
      a:visited {
        color: antiquewhite;
      }
      a:hover {
        color: pink;
      }
      a:active {
        color: green;
      }
      a:focus {
        color: white;
      }

html에서 tag의 속성

font-size

가장 많이 쓰이는 단위는 px(고정), em(가변), rem(가변)입니다. 현재 웹 개발에서는 rem을 주로 사용합니다. 사용자가 브라우저 설정에서 글꼴 크기를 키웠을 때, px은 변하지 않지만 rem을 일정한 비율로 변하게 됩니다.
최상위 태그인 html 태그의 font-size가 기준이 되어, 1rem은 그 폰트 사이즈와 동일합니다.