🔍 CSS

웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어로, HTML로 구성한 외부와 내부를 꾸미는 역할을 담당한다. HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 사용자 인터페이스(User Interface; UI)를 제공할 수 있다.

✔ CSS 문법 구성

셀렉터로 특정 요소(요소 이름, id,class)를 선택하고, 선언블록({}) 안에서 적용할 내용을 작성한다. 이렇게 적용할 수 있는 내용을 속성(색상, 글자 크기 등)이라고한다. 속성명에 속성값을 할당하여 스타일을 표현하며 값의 끝에는 세미콜론(;)을 속성끼리 구분한다.

👀 CSS로 기본적인 스타일링하기

CSS는 스타일링 도구이므로, 독립적으로 기능하지 않기때문에 반드시 HTML이 있어야 동작할 수 있다.

body {
    margin: 0;
    padding: 0;
    background: #fff;             /* 배경 색 변경 */
    color: #4a4a4a;               /* 글자 색 변경 */
  }
  header, footer {
    font-size: large;
    text-align: center;           /* 텍스트의 가운데를 정렬 */
    padding: 0.3em 0;             /* em : 상위 요소 크기의 n배의 크기로 지정, px와 다르게 상대적인 값을 표현해주는 단위이다. */
    background-color: #4a4a4a;   
    color: #f9f9f9;             /* 글자 색 변경 */
  }
  nav {
    background: #eee;
  }
  main {
    background: #f9f9f9;
  }
  aside {
    background: #eee;  
  }
   
  /* background-color는 색깔만 지정, background는 color 이외의 다른 background 옵션들을 지정해 사용할 수 있다. */

✔ CSS 스타일 적용 방법

1. 인라인 스타일 : 같은 줄에서 스타일을 적용.

<nav style="background: #eee; color: blue">...</nav>

2. 내부 스타일 시트 : 별도의 파일로 구분하지 않고 style요소 내에 작성.

3. 외부 스타일 시트 : 별도의 파일을 만들어 html head에서 링크로 받아옴.

<link rel="stylesheet" href="index.css" />   <!-- CSS 파일을 추가하는 링크, css 파일이 다른 폴더에 존재할 경우, 경로를 입력해 연결 -->

하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일, 내부 스타일 시트는 권장하지 않는다.

Reference: 코드스테이츠