[CSS] 개념 및 Selector

1. CSS

• CSS의 . 과 #의 차이의 개념
• 절대 단위와 상대 단위 구분
• CSS의 박스 모델
• content-box와 border-box 의 차이

위 개념은 기본적으로 알고 넘어가야 하는 것 입니다!

---

2. 한단계 더 높아지기 위한 공부

• CSS의 셀렉터 규칙
  • 후손 셀렉터 / 자식 셀렉터 차이
• 레이아웃을 위한 HTML만들기
• Flexbox 이용해 레이아웃 만들기
  • 방향 / 늘리기 / 수평 정렬 / 수직 정렬 / 크기 조절

---

3. 셀렉터(selector / 선택자)

p {color: red; paddin: 5px;}

같은 경우
p : 선택자 (selector)
{} : 선언 블록 (Declaration block)
color : 선언 부분의 속성(property)
red : 선언 부분의 속성값(Property Value)

---

4. 셀렉터 종류

4.1. 전체 선택자

• {}

HTML 페이지 내부 모슨 요소를 css속성을 적용합니다.
많이 쓰는 경우는 margin / padding 값을 초기화 하거나 기본값으로 정해 둘 때 사용합니다.

4.2. 태그 선택자

p {}
div {}

태그 셀렉터는 HTML 요소를 선택한 가장 작은 단위의 선택자 입니다.
태그에는 개발자가 지정해주는 스타일이 적용되지 않습니다.

4.3. 클래스 선택자 VS ID 선택자

.클래스명 {} //클래스선택자 | #클래스명 {} //id선택자

• class 선택자 : 반복되는 여역을 유형별로 구분 할때 사용
• id 선택자 : 고유한 이름을 사용할 때

4.4. 하위 선택자 VS 자식 선택자

두 개념은 비슷하면서 다른 개념입니다.
이 개념은 확실히 알고 넘어가야 됩니다.

하위선택자
section ul {}

이라는 가정하면

section 안에 모든 ul은 모두 CSS가 적용 적용됩니다!

      

      

      

    
    

      <code />
    
<p> 하위선택자
<section>
    <ul> CSS 적용! </ul>
    <ul>
        <li>
            <ul> CSS 적용! </ul>
        </li> 
    </ul>
</section>

---

하지만 자식 선택자는 다릅니다

자식선택자
section > ul {}

이라고 자식 선택자를 선택하면

section 안에 바로 아래 있는 ul만 적용 됩니다.

      

      

      

    
    

      <code />
    
<p> 자식선택자
<section>
    <ul> CSS 적용! </ul>
    <ul>
        <li>
            <ul> CSS 적용 안됌! </ul>
        </li> 
    </ul>
</section>

그림으로 직관적인 이해가 필요하신분은 넥스트리 블로그에 들어가셔서 찾아 보시면 됩니다!

---

4.5. 인접 선택자 VS 형제 선택자

비슷하면서 다른 개념이니 확실하게 알고가는게 좋습니다

인접선택자
h1 + ul {}

h1 속성의 뒤에 따르는 ul속성을 선택합니다.
즉 h1선택자와 ul선택자 사이에 다른 속성이 존재한다면 선택하지 않습니다.
또한 연속으로 ul 선택자가 나온다면 가장 첫번쨰 ul만 선택 됩니다.

      

      

      

    
    

      <code />
    
<h1>
    <ul>...</ul> >>>>>>>>> x
</h1>
<ul></ul> >>>>>>>>> o

하지만 형제 선택자는 다릅니다

형제 선택자
h1 ~ ul {}

h1선택자가 ul 선택자보다 먼저 등장하지않으면 선택하지 않습니다.

하지만 개념이 두개가 정말 모호해서 한가지만 쓰는걸 추천드립니다.

---

5. 속성 선택자

속성 선택자의 기본 방식은

a[]

입니다. 하지만 브락켓 안에는 다양한 패턴이 들어갑니다. 필요한 셀렉터가 있으면, 그때 찾아서 쓰면 됩니다.

6. 가상 클래스 선택자

가상 클래스 선택자의 기본 방식은

a::

입니다.

가상 클래스 선택자는 링크 선택자와 동적 선택자가 있습니다.

6.1. 링크 선택자

a::link 방문하지 않은 링크 a 선택
a::visited 방문한 링크 a 선택

6.2. 동적 선택자

a::active
a::hover
a:focus

동적 선택자는 마우스 등의 어떤 이슈가 있을 때 발생되는 선택자 입니다. 한번 사용해보시면 금방 아실 수 있습니다.

6.3. 그 외의 선택자

구조적 가상 클래스 선택자, 언어 선택자, 부정 선택자 등 다양한 선택자가 있으며, 필요할 시 찾아서 사용하시면 됩니다.

와이어 프레임 : 화면 단위의 레이아웃을 설계하는 작업

목업 : 실제품을 만들어보기전, 실물과 비슷하게 제작하는 작업 // 고정적

프로토타입 : 처음부터 종료까지 핵심 동작이 기능하게 구현된 앱

하드 코딩 : 데이터를 코드 내부에 직접 입력한 것