0213_TIL

Tips

텍스트 수직, 수평 정렬 -> text-align : center , line-height : 높이 px

HTML 기본구조 (!Tab)

• html 내의 head , body

Dom 트리

• 텍스트 파일인 HTML 문서를 브라우저에서 렌더링 하기 위한 구조
  ( 문서를 구조화 된 표현으로 보자 )
  • HTML 문서에 대한 모델을 구성
  • HTML 문서 내의 각 요서에 접근 / 수정에 필요한 프로퍼티와 메소드를 제공한다.

시맨틱 태그

• header, nav, footer, main, aside, article, section

블록 요소 vs 인라인 요소

• 블록 요소

div　p　ul　ol　li　h1~h6 form header nav footer section article aside table th td figure figcaption caption blockquote

크기 값을 가질 수 있고, 마진과 패딩을 설정 할 수 있다.
수직으로 쌓인다.

• 인라인 요소

주요 인라인 요소들
span　a　em b strong video audio 등

마진과 패딩을 설정 할 수 없고, 수평으로 쌓인다.

CSS

• Cascading Style Sheet
  ( 상위 요소에 적성해 놓은 속성이 하위 요소로 상속이 됨)
  ( 모든 요소가 상속이 되는 것은 아니다)
  

CSS selectors

기본 선택자
-전체 선택자, 요소 선택자 ( 요소 : h1,h2,div,span )

• 클래스 선택자 , 아이디 선택자 , 속성 선택자
  클래스 선택자 : .my_class{} 형식으로 사용
  아이디 선택자 : #my_id{} 형식으로 사용

결합자

• 요소들을 몇개 묶어서 해당 조건을 만족하는 요소만 선택

• 자손 결합자, 자식 결합자
  자손결합자 : A B {}
  - A의 자식들 중에서 B를 만족하는 모든 것 선택
  자식 결합자 : A > B {}
  - A의 자식 중에서 B를 만족하는 것만 선택

• 일반 형제 결합자, 인접 형제 결합자
  일반 형제 결합자 : A ~ B {}
  - A의 형제 요소 중에서 B를 만족하는 것
  인접 형제 결합자 : A + B {}
  - A의 몯느 형제 중에서 바로 다음에 오는 B만 선택 (바로 뒤에 B가 없으면 적용이 안됨 )
  

의사 클래스 와 의사 요소

• 의사 클래스 ( 선택하고자 하는 html 요소의 특정한 상태를 뽑는 것 )
  A : B{} 형식 , A가 B 상태가 되면서 CSS가 적용
• 의사 요소 ( html 부분의 특정 부분만 선택 )
  A : : B {} 형식, A다음에 B를 적용한다
  

CSS 우선 적용 우선순위

1. !important
2. 인라인
3. ID
4. 클래스 > 속성 > 의사클래스
5. 요소 > 의사요소

   같은 우선 순위에 있을 땐, 가장 마지막에 있는 것을 따른다.

CSS 상속

상속 되는 것 : Text 관련 요소 ( font ,color, text-align )
상속 되지 않는 것 : Box model 관련 요소 ( width, height, margin )
-> position 관련 요소

em -> 바로 위 부모 요소 크기에 대한 배수 단위 ( 상속 받음 )
rem -> 최상위 요소 ( html ) 의 사이즈를 기준으로 단위를 가짐
( 상속 받지 않음 )

Viewport : 내가 실제로 보고 있는 화면 ( 디바이스 기준 사이즈 달라짐 )

Box model

• Normal Flow
  모든 요소는 네모 이고, 위에서부터 아래 , 왼쪽에서 오른쪽으로 쌓임

• content -> padding -> border -> margin 순

  • content : 글, 이미지등 요소의 실제 내용
  • padding : content 와 border 사이
    • 요소의 적용된 배경색, 이미지는 padding 까지 적용
  • border : 테두리
  • margin : 요소와 요소의 거리

• margin

  • .margin 10 ( 4 방향 )
  • .margin 10 20 ( 상하 > 좌우 적용 )
  • .margin 10 20 30 ( 위 적용 > 좌 우 적용 > 아래 적용 )
  • .margin 10 20 30 40 ( 시계 방향으로 적용 )

• display : block

  • 줄 바꿈이 이러나는 요소
  • 가로폭을 차지
  • 블록안의 인라인 요소가 들어갈 수 있음
  • 대표적 : div, p, hr, form
  • block의 기본너비는 가질 수 있는 너비의 100%
  • 너비를 가질 수 없다면 자동으로 부여되는 margin

• display: inline

  • 줄바꿈이 일어나지 않는 행의 일부 요소
  • content 너비만큼 가로폭 차지
  • width , height , margin-top , margin-bottom 지정 불가
  • 상하 여백은 inline - height 로 지정
  • 대표적 : span , a, img
  • 기본 너비 : 컨텐츠 영역만큼

• display : inline-block

  • block 과 inline 레별 요소의 특징을 모두 가짐
  • inline 처럼 한줄 표시 가능, width, height, margin 속성 모두 지정 가능

CSS Position

• relative : 상대위치
  • 자기 자신이 static 위치로 이동
• absolute : 절대 위치
  • 요소의 일반적인 문서 흐름에서 제거후 레이아웃에 공간을 차지 하지 않음
  • static이 아닌 가장 가까운 부모 / 조상 요소를 기준
• fixed : 고정위치
  • 요소를 문서 흐름에서 제거 후 , 레이아웃에서 공간을 차지하지 않음
  • 부모요소 관계없이 viewport를 기준으로 이동

색상 단위

• 색상 키워드 ( 직접 단어로 나타냄 )

  • ex ) black , white

• RGB 색상 ( 16 진수로 표현 )

  • ex ) #000000 (검은색) #FFFFFF (하얀색)

• HSL 색상

• rgb(A,B,C)

  • A , B , C 의 숫자 범위 : 0 부터 255
  • rgb ( 0 0 0 ) : 검정색 rgb(255,255,255) 하얀색

• rgba()
  - a는 투명도
  

Flexbox

• Flex Container 에 줄 수 있는 속성
  • display, flex-flow , justify-content
  • Flex Item에 줄수 있는 속성
    • order flex ...

Flex Container

• display ( Flex Container 를 정의 )
  • display : flex; : 블럭방식의 컨테이너 생성 (아래로 쌓임 )
  • display : flex - inline; : 인라인 방식의 컨테이너 생성 ( 오른쪽으로 쌓임)

• flex-flow - flex-direction 과 flex-wrap를 줄여서 사용 가능

• flex - direction : item 들의 주 축 (main-axis) 설정

  • row ( 기본 값 ), row-reverse , column, column-reverse

• flex-wrap : item 들의 줄 바꿈 설정

  • 아이템의 여러줄 묶음 방식을 어떻게 설정할건지 결정
  • nowrap (defalut) : 한줄로 모든 아이템 표현
  • wrap : 아이템을 여러줄로 묶어서 표현

• justify-content : 주 축의 정렬 방법 설정

  • flex-start , end : 정렬 기준에 따라 왼쪽이 start 오른쪽이 end
  • center : 아이템 가운데 정렬 ( 단 , 주 축 방향에 주의 )
  • space-between : start와 end 사이의 아이템의 간격을 일정하게 둔다
  • space-around : 아이템들의 여백들 균등하게 만들어서 정렬
  • space-evenly : 모든 여백을 균등하게 만들어 정렬

• align-content : 교차 축의 정렬 방법 설정 ( 2줄 이상 )

  • flex-wrap : nowrap; 일땐 의미가 없음

• align-items : 교차 축의 정렬 방법 설정 ( 1줄 )

  • baseline : item 안에 문자 기준선을 맞춰서 정렬

Flex Item

• order : Item의 순서를 결정
• flex - grow : Item의 너비 증가 (grow) 비율 설정
  • viewport 를 늘릴 때, 아이템의 너비 증가 비율을 설정한다.
    • ex) 1 : 2: 1
  • flex-container 가 nowrap이 아니면 의미가 없다.

• flex - shrink : item의 너비 감소 비율 설정

• flex - basis : item의 기본 너비 설정

  • 기본 값 : auto

• align - self : 교차축을 기준으로 Item을 정렬하는 방법

  • 기본 값 : auto
  • align - items() 보다 우선순위 높음

justify-content

1. flex-start
2. flex-end
3. center
4. space-between
5. space-around
6. space-evenly

align - content

1. flex-start
2. flex-end
3. center
4. space-between
5. space-around
6. space-evenly

align - items

1. stretch
2. flex-start
3. flex-end
4. center
5. baseline

align - self

1.stretch ( 컨테이너 가득)
2. flex-start
3. flex-end

Bootstrap

spacing

• 1rem -> 16px
• rem 잘 알아두자

Grid system

• 요소들의 디자인과 배치에 도움을 주는 시스템

• 기본 요소

  • column : 실제 컨텐츠 포함
  • gutter : 컬럼과 컬럼 사이의 공간
  • container : column 들을 담고 있는 공간

• container -> row -> column 으로 컨텐츠를 배치하고 정렬

IMPORTANT

• 12개의 column 으로 구성 되어 있음
  • 왜 12개 인가? 약수가 많기 때문
  • 12개를 넘어가면? 다음 행에 붙게 된다.
• 6개의 breaking point
  - 쓰는 거 5개 안쓰는 none 한개 총 6개로 구성되어 있다.

  576px 미만 : .contaienr
  576 이상 : .container-sm -> 스마트폰
  768 이상 : .contaienr-md -> 태블릿
  992 이상 : .contaienr-lg -> 데스크탑
  1200 이상 : .container-xl
  1400 이상 : .container-xxl

• Col - [breakpint] - [숫자]
  로 작성