CSS 기본 문법

CSS는 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역하을 한다. 개발자는 이 CSS로 웹 애플리케이션에 접근 할 수 있는 사용자 인터페이스(user interface)부터 만들게 된다.

 

사용자 인터페이스(UI; user interface)

 

인터페이스는 컴퓨터와 교류하기 위한 연결고리이다. 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI를 사용했다. 키보드로 작성한 비밀 암호같은 코드를 적어서 엔터를 눌러야만 애플리케이션을 작동시킬 수 있었다.

 

우리가 지금처럼 키보드와 마우스를 사용해서 컴퓨터를 사용하는 것은 잘 만들어진 인터페이스 덕분이다. 이렇게 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 "사용자"를 붙여 사용자 인터페이스, UI라고 부른다. UI는 사용자가 애플리케이션을 사용하게 하는데 매우 중요한 역할을 하고, UI가 없으면 애플리케이션과 소통이 불가능하다. 즉, 사용자가 애플리케이션을 사용하게 하려면 UI가 꼭 필요하다.

 

😲 직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양이다.

웹 프론트엔드 개발자는 웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당한다. 그래서 애플리케이션과 소통에 필요한 UI 제작은 프론트엔드 개발자의 기본 양이다.

 

"좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나온다."

UX, 사용자를 고려하여 UI를 만든다. - 화면크기는 같지만, 사용자가 하나의 내용에 집중할 수 있도록 화면을 디자인.

CSS는 심미적인 화려함 뿐 아니라, 더 나은 사용자 경험(UX, user experience)을 주기 위한 콘텐츠 배치와 타이포그래피 등을 적용하기 위해 사용한다.

 

 

❗셀렉터(Selector, 선택자)

h1 {color: red; font-size:12px;}

셀렉터(Selector) {선언(Delaration);선언(Delaration);}

    - 선언 → 프로퍼티(Property): 값(Property value)
    - 선언 블록(Declaration block)

 

< 기본 셀렉터 >

 

1. 전체 셀렉터

전체 셀렉터는 문서의 모든 요소를 선택한다.(하나하나 전부다!)

* { }

 

2. 태그 셀렉터

태그 셀럭터는 같은 태그명을 가진 모든 요소를 선택한다.(복수로도 선택 할 수 있다.)

h1 { }
div{ }

section, h1{ }

 

3. ID 셀렉터

ID 셀렉터는 #id로 입력하여 선택한다.

#only { }

 

4. class 셀렉터

class 셀렉터는 .class로 입력하여 선택한다.(같은 class를 가진 모든 요소를 선택)

.widget { }
.center { }

 

5. attribute 셀렉터

attribute 셀렉터는 같은 속성을 가진 요소를 선택한다.

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

 

6. 자식/ 후손/ 형제 셀렉터

  1) 자식 셀렉터

     - 자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다.(후손 셀렉터와의 차이를 반드시 알고 있어야 한다.)

header > p { }

<header>
    <p> <!-- 선택 -->
        <span>
            <p></p>
        </span>
    </p>
    <p> <!-- 선택 -->
        <span>
            <p></p>
        </span>
    </p>
</header>

  2) 후손 셀렉터

- 후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다.(자식 셀렉터와의 차이점을 반드시 알고 있어야 한다.)

header p { }

<header>
    <p><!-- 선택 -->
        <span>
            <p><!-- !!선택!! -->
            </p>
        </span>
    </p>
    <p><!-- 선택 -->
        <span>
            <p><!-- !!선택!! -->
            </p>
        </span>
    </p>
</header>

  3) 형제 셀렉터

- 인접 형제 셀렉터는 같은 ㅇ부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다.

section + p { }

<header>
    <section></section>
    <p></p> <!-- 선택 -->
    <p></p>
    <p></p>
</header>

 

7. 기타 셀렉터

  1) 가상 클래스 셀렉터

     가상 클래스는 요소의 상태 정보에 기반해 요소를 선택한다.

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

 

  2) UI 요소 상태 셀렉터

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */