yngmanie 블로그

html, css 노트

frontend • html • css

HTML5

• 컨텐츠 모델이란?
  • 기존 block과 line만으로 컨텐츠를 그룹화하는 것을 보다 명확하게 하기위해 비슷한 카테고리를 그룹화한 것을 컨텐츠 모델이라고 한다.
• 아웃라인 알고리즘: html5 이전에는 h태그가 아웃라인을 형성했지만 HTML5 도입된 후에는 section, article, nav, aside 태그도 아웃라인을 결정짓는 태그로 추가되었다.
• 마크업: 컨텐츠에 의미를 부여하는 것
  • 논리적인 순서 ( 눈에 보이는 것이 아니라 컨텐츠를 논리적으로 )
  • 의미에 맞는 마크업
  • 네이밍 (class or id)
• tab키를 눌렀을 때 포인터를 받을 수 있는 방법
  • a[href], area[href], form, tab index 속성을 가지고 있을때

defer

• 브라우져가 html을 파싱하면서 script태그를 만나면 html 파싱과 함께 scr 태그를 다운받는 것을 동시에 진행한다.
• html5에서 처음 도입됨.

article

• rss가 가능한 독립적인 아웃라인 영역

figure

• 이미지와 이미지를 설명하는 간단한 내용을 담은 태그
• img, figcaption.

fieldset

• form안의 묶은 정보를 action으로 전송할 때 사용하는 태크

small

• 작은 단위의 정보를 표현하기위한 태그로 사용하지만 copyright와 같은 정보를 담을 때도 사용한다.

  CSS

  cascading

  1. 중요도
  2. 점수
  3. 나중에 선언된 태그

property 특징

margin

• normal flow일 때만 적용된다
  • normal flow란? 마크업 순서의 흐름, 위에서 아래
  • normal flow가 벗어나는 경우: flot
• 음수 값을 사용할 수 있음 (padding 값은 음수 값 사용 X)

float

• value: left, right
• 레이아웃 모델
• 부모의 크기만큼 line box가 생성되 그 부분에 띄어진다.
• 내부가 block가 된다.
• content 크기만큼 width 값을 가진다. (width 값을 가질 수 있음)
• block 성격을 가지는 태그 위에 떠있지만 inline 속성을 가진 태그는 밀어낸다.
• 보모가 flot이면 자식에게 inherit 된다.
• 동작원리: 워드 파일에 그림은 띄우고 글자는 그림을 감싸 흐르게 하는 것.

clear

• value: both, right, left
• flot가 normal flow의 block 범위를 침범하는 경우, 침범하는 높이만큼 margin값을 주는 것.
• block 속성에서만 사용할 수 있다.

overflow

• value: scroll, hidden, auto, visible
• 대부분, flot을 포함하는 부모에서 사용한다.
• hidden의 경우, 부모에게 자식이 가지는 가로,높이만큼 block 영역을 생성한다.
• 자식이 flot되면서 부모가 높이값을 잃어버리는 현상을 해결하는 방법
  • 부모 overflow: hidden
  • flot이 적용된 태크 밑에 의미없는 div 태그 삽입, css에 clear: both
  • 부모에 flot 속성 적용
  • ::befor, ::after 사용

display(property: flex)

• 정렬하려는 아이템의 부모에게 스타일링을 해야함.
• 레이아웃 모델
• flex-direction: row, column
• flex-wrap: nowrap, wra, wrap-reverse
• Justify-content: space-evenly

  display(property: inline-block)

• 보이는 것은 inline, 성격은 block

인라인에서는 padding이 text밖으로 적용되고, 블록은 text안쪽 영역에 적용된다.

배치관련 속성은 자식에게 상속안되지만, 데코레이션관련 속성은 상속된다.

css 전처리 언어

• sass
• Less

border-collapse

• value: separate, collapse
• collapse일 때, 중첩되는 라인에 중복되는 border값을 없앤다.

position

value: absolute

• flot과 가장 큰 차이점은 inline 속성을 떠있는 부분 밖으로 밀어내지 않는다.
• 본인이 있던 자리에서 뜬다.
• offset
  • 특정 기준점으로 배치를 사용할 때 사용하는 css 개념.
  • absolute의 offset 기준: 부모의 position이 static이 아닐 때
  • property: top, right, left, bottom

relative

• offset
  • relative의 offset 기준: normal flow, 자기자신

display (inline)

• padding 값이 중첩된다.

text-align

• value: justify, left, right, center
• 정렬하려는 아이템 부모에게 적용.

flot, relative 동시에 사용이 가능하다

clip

• value: rect(0, 0, 0, 0);
  • 사각형으로 짤라 준다는 것
• position: absolute 일때만 사용 가능
• 항상 출발은 top, left 기준이다.

outline

• 배경 밖으로 선을 그려준다.
• 실제 box-sizing에 영향을 주지는 않는다.

outline-offset

• value: px

  position

• 퍼센트(%) 적용 방법: 배경과 이미지의 % 좌표를 매칭시켜서 보여준다.

background-attachment

• value: fixed (배경 고정)

background-img

• value: linear-gradient(to bottom, red, green 30%, blue 100%)
• value: repeating-linear-gradient

z-index

• 먼저 마크업이 먼저 되어 있는 경우, 레이어가 아랫 쪽으로 쌓인다.

line-height

• line-height - font-szie / 2 = half-reading(자간)

white-space

• value: no-wrap (부모 너비 값을 넘어도 줄바꿈이 안일어남)
• block 성격에만 사용 가능

keyframes

• 사용법

@keyframes animationName {
  0% {}
  100% {}
}

애니메이션 keyframes를 사용하기 위한 필수조건.

• animation-name
• animation-duration
• cf. animation-fill-mode: forwards 를 활용하면 100%에서 0% 이동
• cf. animation-iteration-count

transform

!important

• value에 직접 주는 것이다.

text-overflow

• value: ellipsis
• 말줌임표가 생김.

width

• width: calc(100% - 000px)
• 반응형에서 많이 사용함.

grid

• display가 grid일 때만 사용 가능
  • 부모
    • grid-template-columns
    • grid-template-rows
    • grid-column-gap
    • grid-template-areas
  • 자식
    • grid-row: 시작번호/끝나는번호
    • grid-column: 시작번호/끝나는번호

word-break

• value: keep-all (공백단위로 줄바꿈) / break-all (width보다 넘치면 줄바꿈)

img sprite 기법

• 배경의 위치를 바꾸기
• backgrond-position: x축, y축

transform

• value: translate(%)
• background-image를 %로 조절할 때, 원하는 방향으로 배치되지 않을 때 사용하면 좋다.

stiky

• top 좌표를 만나기 전에는 relative처럼 ​