CSS 공부

CSS

그동안 JS보다 더 피한게 하나 있다. 그건 바로 CSS! 나는 CSS가 정말 싫었다. 뭘 어쩌라는건지, 내가 원하는대로 안되고... 디버깅도 쉽지않고, 공부도 어려웠다. (사실 핑계지 뭐...) 아무튼 그래서 나는 프론트랑 정말 안맞는다고 생각했고, 프론트 공부를 기피했다.

그러나 전회사에서 플러터를 공부하게 되고, css랑은 다르지만 화면을 그리는 법을 배우고, 이번에 다시 CSS를 접하니 감회가 새롭다. 나는 앞으로 프론트 개발자가 된다는 마인드로 열심히 공부해 보았다.

우선 제일 크게 html은 글자와 상자로 이루어져 있다! 이것만 잘 이해해도... 아니 이것만으론 부족하다.

그리고 화면을 이루는 상자들이나 글자들을 요소라고 부른다. 요소가 화면에 출력되는 특성, 크게 2가지로 구분되는데, 인라인과 블록이 그것이다.

• 인라인(Inline) 요소 : 글자를 만들기 위한 요소들.
• 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들.

인라인 (inline)

• ex) a, br, button, img, input, span 등
• 왼쪽에서 오른쪽으로 (요소가 수평으로 쌓임)
• 가로 세로 모두, 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
• 가로 세로 사이즈를 지정할 수 없음
• 마진(외부 여백) 그리고 패딩(내부 여백)의 좌우는 적용되지만 위아래는 적용 안됨
• 자식요소로 블록을 사용 할 수 없다.

블록 (block)

• ex) div, h1, header, hr, p, ul 등
• 위에서 아래로 쌓인다. (요소가 수직으로 쌓임)
• 가로 너비는, 부모 요소의 크기만큼 자동으로 늘어남!
• 세로 너비는, 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
• 가로 세로 사이즈 지정할 수 있음
• 마진 패딩 모두 적용 가능
• 자식요소로 블록, 인라인 모두 가능

인라인-블록 (inline-block)

• ex) input
• 인라인 요소와 블록 요소의 중간 형태
• 베이스는 인라인, 근데 가로세로를 지정할 수 있다고 생각하며 됨
• 왼쪽에서 오른쪽으로 (요소가 수평으로 쌓임)
• 가로 세로 모두, 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
• 가로 세로 사이즈 지정할 수 있음
• 마진(외부 여백) 그리고 패딩(내부 여백)의 좌우, 위아래 모두 적용 가능
• 자식요소로 블록, 인라인 모두 가능

인라인 요소와 블록 요소와의 주요 차이점은 인라인-블록은 요소 뒤에 줄 바꿈을 추가하지 않아서 다른 요소 옆에 위치할 수 있다는 것입니다. 따라서 인라인 요소처럼 인라인-블록은 가로 및 세로 크기를 설정할 수 있습니다. 인라인 요소는 가로 및 세로 크기를 설정할 수 없습니다

---

선택자 (selector)

CSS의 선택자란, HTML 요소를 선택하는 방법을 말한다. 선택자를 통해 선택된 요소에 CSS 속성을 적용할 수 있다. 종류는 다음과 같이 크게 다섯 종류가 있다.

• 기본
• 복합
• 가상 클래스
• 가상 요소
• 속성

기본

선택자	설명	예시
전체 선택자 (Universal Selector)	모든 요소를 선택	*
태그 선택자 (Type Selector)	태그 이름이 ABC인 요소 선택	div
클래스 선택자 (Class Selector)	HTML class 속성의 값이 ABC인 요소 선택	.test
아이디 선택자 (ID Selector)	HTML id 속성의 값이 ABC인 요소 선택. 기본적으로 하나만 존재 가능	#test

복합

1. 일치 선택자 (Basic Combinator) : 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택.

   <!-- 붙여서 쓰는게 포인트 -->
   <style>
     span.test {
       color: red;
     }
   </style>
   
   <span class="test">test</span>

2. 자식 선택자 (Child Combinator) : 선택자 ABC의 자식 요소 XYZ 선택.

   <style>
     ul > .test {
       color: red;
     }
   </style>
   
   <ul>
     <li class="test">test</li>
   </ul>

3. 하위(후손) 선택자 (Descendant Combinator) : 선택자 ABC의 하위 요소 XYZ 선택. '띄어쓰기'가 선택자의 기호!

   <style>
     div .test {
       color: red;
     }
   </style>
   
   <div>
     <ul>
       <li class="test">test</li>
       얘는 선택 됨
     </ul>
   </div>
   <span class="test">test</span> 얘는 선택 안됨

가상 클래스 (Pseudo-Classes)

해당 요소에 특별한 상태가 적용되었을 때 선택하는 방법

• HOVER : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

• ACTIVE : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

• FOCUS : 선택자 ABC 요소에 포커스가 있는 동안 선택

• first-child: 선택자 ABC 요소의 첫 번째 자식 요소 선택

• last-child: 선택자 ABC 요소의 마지막 자식 요소 선택

• nth-child(n): 선택자 ABC 요소의 n번째 자식 요소 선택

  <!-- hover 예시 -->
  <style>
    .test:hover {
      color: red;
    }
  </style>
  
  <span class="test">test</span>

근데 hover나 active같은건 js로 처리하는게 좋은거 아닌가 하는 의문이 듬

가상 요소 (Pseudo-Elements)

• 요소 선택자 (Pseudo-Elements) BEFORE , AFTER: 선택자 ABC 요소의 내부 앞/뒤에 내용(Content)을 삽입.

  <style>
    .test::before {
      content: "before";
    }
    .test::after {
      content: "after";
    }
  </style>
  
  <span class="test">test</span>

속성

• 속성 선택자 (Attribute): 특정 속성을 포함한 요소 선택

• 이거 자주 씀

  <style>
    [disable] {
      color: red;
    }
  </style>
  
  <input type="text" value="test" disabled />
  
  <style>
    [type="text"] {
      color: red;
    }
  </style>
  
  <input type="text" value="test" />

---

상속되는 CSS 속성들

모두 글자/문자 관련 속성들! (모든 글자/문자 속성은 아님 주의!)

속성명	설명
font	글꼴 관련 속성들을 한꺼번에 지정
font-family	글꼴(서체) 지정
font-size	글자 크기 지정
font-style	글자 기울기 지정
font-weight	글자 두께 지정
line-height	줄 높이 지정
color	글자 색상 지정
text-align	정렬 방법 지정
text-indent	들여쓰기 지정
text-decoration	문자 장식(선) 지정

자식요소에 강제 상속 하려면 inherit 값을 주면 됨

선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

1. 점수가 높은 선언이 우선함!

2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선함!

선택자 종류	점수
!important	∞
inline	1000
id	100
class	10
tag	1
*	0

---