2. CSS

2.1. CSS 개요

기본 문법, 주석

• CSS의 역할은 HTML 문서를의 우리가 원하는 대로 보여지도록 하는 것이다.

  • HTML의 특정한 요소에 대하여 스타일을 적용하는 예를 다음과 같이 살펴볼 수 있다.

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>CSS연습</title>
      <link rel="stylesheet" href="./css1.css" />
    </head>
    <body>
      <div>Hello world!</div>
    </body>
  </html>
  

  div {
    /* fz50탭 */
    font-size: 50px;
    /* c:blue탭 */
    color: blue;
    /* tdu탭 */
    text-decoration: underline;
  }
  

• CSS의 기본 문법

  • 선택자 { 속성: 값; [속성: 값; …] }
    • 선택자: 스타일을 적용할 대상(selector)
    • 예1) div { color: blue;}
    • 예2) div { color: red; margin: 20px;} /* 글자색은 빨강, 바깥 여백은 20px*/

• 주석

  • 형태: /* 주석 내용 입력 */
  • 단축키: ⌃ + /

선언방식

• CSS의 선언 방식

  • 내장방식: html 문서의 <head> 태그 내에 <style> ~~~ </style> 태그 내에 스타일을 작성하는 방식

    <style>
    	div {
    		color: red;
    		margin: 20px;
    	}
    </style>
    

    • 별도의 CSS 파일을 만들지 않아도 되는 장점이 있지만, CSS 내용이 복잡해 지면 유지보수 차원에서 관리가 어렵다. 일반적으로 간단한 CSS 연습을 위한 방법이 아니라면 추천되지 않는 방식이다.
    • 개발 할 때는 html, css, js 를 별도의 파일로 작성하지만, 자동으로 html 문서 내에 삽입 되기도 하는 경우도 있다.

  • 인라인 방식: 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음)

    • <div style=”color: red; margin: 20px;”></div>
    • CSS 적용에 있어 인라인 방식의 우선순위가 매우 높으므로 유지보수에 어려움을 초래한다. 권장하지 않는 방식이다.

  • 링크방식

    • 링방식의 예

        <link rel="stylesheet" href="./main.css" />
    

    div {
      /* fz50탭 */
      font-size: 50px;
      /* c:blue탭 */
      color: blue;
      /* tdu탭 */
      text-decoration: underline;
    }
    

  • @import 방식: CSS 파일 내에 또다른 CSS를 가져오는 경우에 사용하는 방식

    • CSS의 @import문으로 CSS 문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식
    • main.css가 link에 의해 연결되기 전까지는 box.css 는 적용되지 않는다. (연결이 지연되는 단점이 있다.)
    • link로 연결된 css 파일은 순차적으로 가져오는 것이 아니라, 동시에(병렬로) 가져와서 적용된다.
    • 특별하게 의도된 경우가 아닌경우 link를 이용한다.

        <link rel="stylesheet" href="./main.css" />
    

    @import url("./box.css");
    
    div {
      /* c:red탭 */
      color: red;
      /* tdu탭 */
      text-decoration: underline;
    }
    

    .box {
      /* bgc:red탭 */
      background-color: red;
      /* p20탭 */
      padding: 20px;
    }
    

CSS 선택자

• 선택자: 기본
• 선택자: 복합
• 선택자: 가상 클래스
• 선택자: 가상 요소

선택자 기본

• 선택자 기본:

  • 전체(*)
  • 태그(ABC)
  • 클래스(class)
  • 아이디(id))

• • (전체 선택자): 모든 요소를 선택

    • 단독으로 사용하는 경우는 드물며 복합선택자를 통해서 특정 범위 안의 모든 내용에 적용할 때 사용된다.

    * {
    	color: red;
    }
    

• ABC(태그 선택자): 태그 이름 ABC인 요소 선택

<div>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li>오렌지</li>
  </ul>
  <div>당근</div>
  <p>토마토</p>
  <span>오렌지</span>
</div>

li {
	color: red;
}