클라우딩 어플리케이션 엔지니어링 TIL Day 4 (1)

HTML 수업이 끝나고 CSS 시작하는 날이다

CSS는 너무 복잡하고 기능이 다양해서 어려웠는데 이번 기회에 확실하게 개념을 잡고 가야겠다

 

# CSS

CSS란? Cascading Style Sheets, 웹 문서를 꾸미기 위한 Style Sheet 언어

선택자 { 속성1 : 값1; 속성2 : 값 2; .... }

내부 CSS : 웹 문서 안에서 스타일 작성

    <style>
      body {
        color: red;
      }
      div {
        color: blue;
      }
    </style>

외부 CSS : 별도의 파일을 만들어서 스타일 코드 관리, 가장 많이 사용되는 방식

body {
  color: red;
}
div {
  color: blue;
}

inline CSS : 태그에 직접 스타일 정의, 코드 유지보수 어렵고 반응형 처리 불가능 등 사용 지양

    <div style="color: blue">안녕안녕 반가워</div>

CSS 주석 : /* ..... */ , 개발자 도구로 볼 수 있기 때문에 중요한 정보 작성 X

---

# 선택자

전체 선택자 (*) : 모든 요소에 스타일을 적용할 수 있는 선택자

* {
  color: red;
}

유형(태그) 선택자 : HTML 태그 이름으로 선택

div {
  color: red;
}

ID, Class 선택자 : ID와 Class와 동일한 값을 가신 요소를 선택

ID는 "#" 으로 선택 -> 절대 중복 XXXX

Class는 "." 으로 선택

#my-id {
  color: red;
}

.my-class {
  color: red;
}

속성 선택자 : 요소가 가진 속성을 선택자로 함, "[ ]" 안에 속성 이름

[href] {
  color: black;
}

의사(가상) 클래스 : 기존 선택자에 추가하는 특별한 상태를 선택하는 선택자

• :hover -> 마우스 올리면 적용
• :focus -> tab키로 이동시 포커스
• :first-child -> 리스트의 첫번째 요소만 선택

a:hover {
  color: blue;
}

의사(가상) 요소 : 기존 선택자에 추가하는 선택한 요소의 일부를 스타일링

• ::before -> 요소의 앞에 의사요소 생성
• ::after -> 요소의 뒤에 의사요소 생성

---

# 상속과 초기화

상속 : 부모 요소의 스타일 값을 이어받아 자식 요소에 적용하는 것

/* div 요소의 css를 h2에 상속*/
div h2 {
  color: inherit;
}

초기화 : 브라우저가 지정한 속성의 초기값을 요소에 적용

초기값은 예상치 못한 값이 될 수 있기 때문에 주의

/* 브라우저가 정의한 기본값으로 초기화*/
div h2 {
  color: initial;
}

---

# 결합자와 우선순위

자손 결합자 : 한 칸의 공백을 주어 앞 셀렉터의 자식 요소 선택, 여러 개의 셀렉터 선택 가능

/* div 안의 span 태그 선택*/
div span {
  color: red;
}

자식 결합자 : 앞 셀렉터의 직계 자식 요소를 선택

/* > 를 사용하여 직계 자식 선택*/
div > span {
  color: red;
}

인접 형제 결합자 : 앞 셀렉터 바로 다음에 위치한 형제 요소 선택, 바로 옆에 있는 태그에만 css 속성 적

/* + 기호 사용 바로 아래에 인접한 형제 요소 속성 변경 */
a + span {
  color: brown;
}

일반 형제 결합자 : 앞 셀럭터 다음에 위치한 모든 형제 요소 선택

a ~ span {
  color: brown;
}

 

# 우선순위(명시도)

작성 순서, 결합, 선택자에 따라 우선순위 변경

inlineCSS > ID선택자 > Class선택자, 속성 선택자, 의사(가상) 클래스 > 유형(태그) 선택자, 의사(가상) 요소

!important 추가시 우선순위를 가장 높여줌 -> 하지만 사용 지양

 

# 새로 배운 것

결합자와 우선순위에 대한 지식이 부족했는데 이번 강의를 통해서 확실한 사용법과 개념을 알게 되었다

편하다는 이유로 !important 를 종종 사용하곤 했는데 앞으로는 그러지 말아야겠다