생활코딩 WEB2 - CSS 정리 1 (1~7)

1. 수업 소개

2. CSS가 등장하기 전의 상황

• 웹 페이지를 보다 아름답게 만들기
• 디자인 관련한 태그를 추가하기 vs 디자인에 최적화된 언어를 만들기

3. CSS의 등장

• 주석

<!--
-->

<!--
    <ol>
        <li><a href="1.html", target="_blank"><font color="red">회화 반복 학습 프로그램</font></a></li>
        <li><a href="2.html", target="_blank"><font color="red">남은 식재료를 활용한 레시피</font></a></li>
        <li><a href="3.html", target="_blank"><font color="red">일정 관리 프로그램</font></a></li>
        <li><a href="4.html", target="_blank"><font color="red">나만의 웹사이트</font></a></li>
    </ol>
-->

<!-- CSS 예시
a 태그의 색을 red로  -->
	<style>
        a {
            color:red;
        }

    </style>

• CSS
  • html에서 디자인 기능을 추린 것
  • 효율적으로 디자인

4. CSS의 기본 문법

• style 태그를 활용하는 방법
  • 속성 간 구분에는 세미콜론(;)을 사용

 <style>
        a {
            color:black;        
            text-decoration: none;
        }

    </style>

• style 속성을 활용하는 방법
  • 속성 간 구분에는 세미콜론(;)을 사용

<!-- html 에 style 속성 안에는 CSS가 들어감 -->

<li><a href="1.html", target="_blank" style="color:red;text-decoration:underline">회화 반복 학습 프로그램</a></li>

5. 혁명적 변화

6. CSS 속성을 스스로 알아내기

검색하는 법

• 글자 크기 변경

font-size

• 텍스트 정렬

text-align

<style>
        a {
            color:black;        
            text-decoration: none;
        }
        h1 {
            font-size:60px;
            text-align:center;
        }

    </style>

7. CSS 선택자의 기본

<style>
        a {      
            color:black;
            text-decoration: none;
        }
        
        /* id가 active인 선택자를 선택 */
        #active {
            color:red;
        }

        /* class가 saw인 선택자를 선택하는 법 */

        .saw {                        
            color:gray;
        }

        h1 {
            font-size:60px;
            text-align:center;
        }

    </style>

    <ol>
        <li><a href="1.html", target="_blank" class="saw">회화 반복 학습 프로그램</a></li>
        <li><a href="2.html", target="_blank" class="saw" id="active">남은 식재료를 활용한 레시피</a></li>
        <li><a href="3.html", target="_blank">일정 관리 프로그램</a></li>
        <li><a href="4.html", target="_blank">나만의 웹사이트</a></li>
    </ol>

• 선택자(selector) 우선순위

tag 선택자 < class 선택자(.) < id 선택자(#)

같은 선택자라면 나중에 등장한 것이 우선

id 선택자가 active라면 한 번만 쓰여야함

더 구체적인 선택자가 포괄적인 선택자들이 더 우선