Html셀렉터, CSS 한눈에 훑어보기

Html

HyperTextMarkupLanguage : 웹에 표현되는 정보들을 태그라는 표시를 통해 구분해서 보여지도록 하는 언어문법이다. 왜? 구분이 안되면, 정렬이 안되고 제대로 보기가 어렵다. Html은 element로 구성되어 진다. 그리고 각각의 element 들은 아래 그림처럼 구성되어 있다.
https://flukeout.github.io/ 에서 게임으로 배워볼수 있으며 아래에 정리해 놓았다.
셀렉터 : 구현된 element 들을 골라서 가지고 있는 정보의 수정,삭제등을 할 수 있다. 수많은 element들을 원하는대로 빨리 골라낼수 있도록 다양한 셀렉방식을 지원하다.
element들의 상관관계, 최상위에는 Root element 가 있으며 (태그가 달린다.) 하위 element들을 child라고 한다. 같은 단계의 child 끼리는 sibling 이라고 불리며, 첫째부터 막내까지 작성한 순서대로 순서가 정해진다.
셀렉터 적용 방법들
- A B - A에 속한 B 엘리먼트
- A + B - A의 바로 다음 형제B
- *모든 엘리먼트
- A * - A 에 속한 모든 엘리먼트
- A ~B - A를 따르는 모든 B
- A > B - A의 직속자녀인 B
- A:first-child : 첫번째 A 엘리먼트
- A:only-child 혼자있는 A 엘리먼트 선택
- A :last-child 마지막 A 엘리먼트 선택
- A :nth-child(m) :m번째 , A 엘리먼트 선택
- A :nth-last-child(m) : 뒤에서 m 번째 A엘리먼트 선택
- A :first-of-type -첫번째 A 엘리먼트
- A: nth-of-type(odd / even) - 홀/짝 A 엘리먼트
- A: nth-of-type( Xn+B) - B순서부터 매 X번째 엘리먼트, B 포함됨
- A:only-of-type A 종류의 엘리먼트만 선택
- A:last-of-type : 마지막 A 엘리먼트
- A:empty 비어있는 모든 A 엘리먼트
- A:not(X) - X가 포함되어 있지 않은 모든 A , X는 id, class, tag 복수조건 가능하다.
- [attribute] attribute가진 엘리먼트
- A[attribute] attribute를 가진 A
- [attribute=“value”] - attribute===value
- [attribute^=“value”] - attibute가 value로 시작
- [attribute$=“value”] - attibute가 value로 종료
- [attribute*=“value”] -attibute가 value를 포함하고 있음

CSS

css 적용하기
- css 셀렉터
  - 셀렉터 구분
    - 클래스와 ID들은 대소문자를 구분하며 문자로 시작해야 하며 영어, 숫자와 언더바(_), 대쉬(-)를 포함할 수 있다.
    - 클래스는 어떠한 수의 요소에도 적용할 수 있다.
    - ID는 하나의 요소에만 적용할 수 있다.
  - 셀렉터 적용 순서
    - inline styling >>> >id>>>, class > , tag
상속과 그룹
- 묶어서 적용하기, 골라서 적용하기,
```
- p.pp  - p태그 이면서 pp클래스
- p .pp - p태그 아래의  pp클래스
- p#pp - p태그 이면서 pp아이디
- p #pp- - p태그 이면서 pp아이디
- p p p .pp #pp- p태그의 p태그의 p태그의 pp클래스의 pp 아이디
```
  - 태그 속성 셀렉팅’tag::attribute { }’
  - 동작 셀렉팅
    - 마우스 변경 button:hover {cursor : pointer }
- 선언 (declaration) - 속성과 속성값을 지정한다.
- 폰트 조절 속성들
  - 폰트의 적용
  - family -폰트 종류
  - size -크기
  - weight 굵기 일반 400, bold 700
- 문구 스타일
  - 가, 왼, 오 정렬 => text-align : center, left, right
  - 스페이스 삽입
  - ”
    ” 인용문 삽입 태그
- 마진, 보더, 패딩
  - 보더 : 선굵기, 스타일(solid, dot, dash…), 색상
  - 보더의 길이가 각기 다르게 설정가능하다.
  - 박스사이징
    - element 영역을 보더로 통일
    - {box-sizing: border-box;}
  - 적용순서 - 위 오 아 왼 시계방향
    - margin, padding, border: 0px = 0px 0px 0px 0px
      - margin, padding, border: 0px 5 px = 0px 5px 0px 5px
      - margin: ???px auto ; 로 좌우 같게 자동으로 할 수있다.
- 웹페이지 이미지 삽입하기
  - img 태그 사용
  - css로도 삽입이 가능하다.
    - 가로 화면 크기
    - 세로 div의 내용 만큼 사이즈
    - img 처럼 height,width 로 조정이 안될 수있다. 영역만 조정. 조정하려면 일치시켜야 한다.
      - background-size : ~%
    - css- backgroundimage 와 img 의 차이
      - backgroundimage는 % 사이즈 조절이 가능함, 100보다 작으면 다중이미지, 크면 부분적이미지
- 레이아웃
  - block vs inline
    - p, div, li, table ==(display : inline-block)==>인라인
    - span, img, a =(float: left || right , display: block )=> 블록
  - 가운데 정렬 위아래패딩 auto
- list
  - 리스트 스타일 dot, number, none
- table
  - 테이블 구성요소
    - table, th (tr, td )
  - 셀병합 ( 태그에 속성 삽입)
    - 가로 병합
      - colspan
    - 세로병합
      - rowspan
- Input
  - type
    - text
    - password
    - number
      - ” - ” 삽입 불가
    - value 미리 설정해놓은값
    - place holder
      - 셀렉트 ‘input::placeholder { }’
  - textarea input type=“text” 보다 긴 데이터 입력시 사용
- Position
  - relative 부모
    - absolute 자식 relative 부모가 없으면 작동이 안된다.
  - fixed
    - 절대 고정, 위아래로 움직이거나 말거나 상관없음 (부모안에서)
- 레이아웃.
  - semantic element - 담고있는 콘텐츠를 예상 할 수 있게 해주는 태그들
  - 경험이 재산이다 .
    - header, asider, nav, footer, section, article, figure
  - float
    - 레이아웃 구조짤때 활용하기 좋음
  - mediaquery
    - 사용자 환경변화에 따라 동적인 변화가능
  - 추가 템플릿과 유사하게 작용하는 태그들은 기본 포맷이 적용되어 있다.
FLEX - https://flexboxfroggy.com/#ko 플렉스 배우기 게임

Published 29 Jul 2019

개발로 세상을 발전시키는 개발!

Html셀렉터, CSS 한눈에 훑어보기

Html

CSS

css 적용하기

css 셀렉터

상속과 그룹