html, css, sass 정리

마크업

마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지.

 

 

마크업 개발의 실질적 의미는!?

웹 페이지의 뼈대를 구성하는 HTML

화면 디자인을 코드로 나타내는 CSS 를 개발을 의미

 

 

웹 서비스의 규모가 클수록,

디자인 복잡도 상승 = 마크업 복잡도 상승

• 디자인 관리를 위해 생겨난 디자인 시스템을 개발 및 유지하기 위해서는 결국 마크업 의 역할이 가장 중요

 

HTML

HTML의 사전적 정의

• 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language)
• 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공

 

 

Block

• div, h1, p

Inline

• span, img, a, strong

 

 

시맨틱 마크업

1. 검색 엔진 최적화 (SEO)
2. 접근성
3. 유지보수

• 시맨팅 HTML은 주어진 목적을 위해 요소를 사용하기 때문에 사람과 기계가 읽고 이해하기가 더 쉽다.

 

 

 

HTML Emmet

 

 

CSS

• 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어
• 속성들을 작성하는 순서를 정하기

 

 

CSS-BOX-Model

box-sizing : border-box

• padding, border값을 합산하여 width, height를 계산하여 길이를 나타냄 / 필수 속성!

그 외 속성 정리

font-align : 문자 정렬 방향

overflow : 문자의 영역이 넘치게 되면? auto, scroll…  

---

:focus-visible

• 클릭 후 focus가 취소 됨

button:not(:disabled):hover 

• button이 disabled일 때 hover값을 넣지 않을 때 not을 사용

 

 

단축속성

• font: style weight size height family
• border: width style color
• background: color image repeat position

---

Sass

Sass를 사용해야하는 이유

- 가독성 저하

- 중복 코드, 레거시 코드를 생성하기 쉬움

- 단순 수정에도 전체 코드를 모두 확인해야함

- 프로젝트가 커질수록 css로 작업하는 속도가 느림

---

sass - $Variables

- size, color... 변수를 사용해서 속성값을 입력 / $

 

sass - @mixin

- 여러가지 속성들을 지정해놓고 @include 을 사용해서 지정

 

sass- @function

- 매개변수를 받아서 사용할 수 있다. return도 사용!

@function half-opacity($color) {
  $color: rgba($color, .5);
  @return $color;
}