/ LECTURE

CSS - Selector

이 페이지는 다음에 대한 공부 기록입니다

JAVA(자바), Python(파이썬) 기반의

AI 활용 응용 소프트웨어 개발자 양성 과정

2021.11.10. ~ 2022.05.18.

찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

34일차 수업

========복습========

태그는 박스 형태를 띔

  • 마진 : 테두리 외부와 다른 요소 까지의 공간

  • 테두리 : 내용과 패딩을 감싼 공간

  • 패딩 : 내용과 테두리 사이에 있는 공간

  • 내용 : 실질적인 공간

display

화면 상에 보이는 것을 관리하는 속성

블록 속성 : 너비를 화면의 너비만큼 가짐, 항상 새로운 라인에서 시작

인라인 속성 : 내용에 따른 너비를 가짐, 현재 라인에서 시작

  • inline-block 속성 : 블록 속성처럼 크기 조절 가능, 인라인 속성처럼 현재 라인에서 시작

position

화면 상에 위치하는 것을 관리하는 속성

  • static : 기본값, 기본 흐름(상담에서 하단으로, 좌측에서 우측으로)대로 요소들을 배치

  • relative : 원래 static 위치 기준으로 해당 요소의 변경될 위치로 배치

  • fixed : 사용자한테 보여지는 화면(viewport)을 기준으로 위치 배치

z-index : 요소 간에 겹쳐져서 쌓여있을 때 순서를 설정하는 속성, 숫자가 클수록 앞쪽

absolute : 자신의 상위 태그를 기준으로 위치를 배치, 없을 경우 <body> 태그가 기준

float

이 속성을 가진 태그는 공중에 떠있다, 기본흐름에서 빠져나온다

left : 왼쪽에 떠있는 블록 태그를 만든다, vice versa

이 이후에 작성되는 태그는 float의 영향을 받는다, clear을 통해서 해제할 수 있음

======== 끝 ========

34일차 수업

Style 적용법

태그 안에 작성을 하는 인라인 스타일 방법은 코드의 재활용이 어려움

내부스타일 시트, 외부 스타일 시트 방법이 있음

선택자

내부 혹은 외부 스타일 시트 방법에서

어떤 태그에 어떤 스타일을 입힐지 작성하기위해 태그를 선택하는 방법

- 전체 선택자 : *

- 태그 선택자 : 태그명{…}

- id 선택자 : #아이디명{…}

- class 선택자 : .class명{…}

- 그룹 선택자 : 여러 선택자를 사용하고자 할 때, 쉼표로 구분

자손 선택자

해당 태그에서 하위 태그 중에 특정 타입을 선택하는 선택자, 공백으로 구분

  • 상위선택자 하위선택자{…}

자식 선택자

해당 태그에서 바로 밑 하위 태그 중 특정 타입을 선택하는 선택자, > 으로 구분

  • 상위선택자 > 하위선택자{…}

동위 선택자

sibiling, 형제요소, 기준 태그보다 뒤에 존재하는 태그로만 선택됨

일반 동위 선택자 : 기준 요소와 동위 요소를 찾는 선택자, ~으로 구분

인접 동위 선택자 : 기준 요소와 바로 뒤에 동위 요소를 찾는 선택자, +으로 구분

<style>
  div ~ p {
    background-color: tomato;
  }
  div + p {
    color: teal;
  }
</style>
<body>
  <div>
    <p></p>
    <div>
      <p></p>
    </div>
    <p>~p, +p 때문에 tomato, teal</p>
    <p>~p 때문에 tomato</p>
  </div>
  <p>~p, +p 때문에 tomato, teal</p>
  <p>~p 때문에 tomato</p>
</body>

pseudo-class

의사 클래스, 가상 클래스

선택하고자 하는 태그의 상태를 명시할 때 사용하는 문법, 기능

태그의 상태에 따른 효과들에게 CSS 스타일을 적용시키는 기능

문법

  • 태그 :가상클래스명{…}

종류

동적 가상 클래스

  • link, visited, hover, active, focus

상태 가상 클래스

  • checked, enabled, disabled

구조 가상 클래스

  • first, last, child, type

기타 가상 클래스

  • not, lang

구조 가상 클래스

계층 구조에서 특정 위치를 선택하기 위한 기능

:nth-child(a) 모든 자식 태그 중에 a 번째에 있는 태그 선택, n 사용 가능

:nth-of-type(a) 모든 자식 태그 중에 a 번째에 있는 특정 타입의 태그