CSS를 HTML에 적용하는 세 가지 방법의 장단점
- inline style
- 장점: 태그 단위로 스타일을 지정하기 때문에 특정 태그에 어떤 스타일을 적용시켰는지 직관적으로 알기 쉽다
- 단점: 스타일 일괄 적용이나 일괄 변경 등의 작업을 할 때 매우 비효율적이다.
<style>- 장점: inline과 다르게 내용과 스타일이 분리되어 있기 때문에 어느정도 재사용이 가능하고 일괄 변경, 적용 등이 가능하다.
- 단점: 한 개의 HTML 문서 안에서는 재사용이 가능하지만 다른 HTML 문서에는 적용시킬 수 없다. 즉, 문서마다 작성해야 하기 때문에 문서가 많아질 수록 비효율적이다.
<link rel="stylesheet" href="...">- 장점: 하나의 스타일 시트만 만들어놓아도 여러 개의 HTML 문서에 적용시킬 수 있다.
- 단점: 독립적인 스타일 시트 파일이기 때문에 작업을 계속하면서 지속적으로 유지, 보수를 해야 하며 규모가 커질 수록 복잡해질 가능성이 있다.
<style>과 <link rel="stylesheet" href="...">의 장, 단점을 모두 사용할 수는 없을까. <link>를 사용하게 되면 재사용성은 매우 높아질 수 있지만 결국 네트워크를 활용하기 때문에 그만큼의 성능 상 문제가 생길 여지가 있다. 그러나 <style>의 경우, 재사용성의 측면에서 매우 비효율적이다. 사실 그렇기 때문에 webpack이라는 것을 사용한다고 볼 수 있다. 굳이 css만 한정된 이야기는 아니다. 코드의 재사용성은 극대화하하면서도 모든 코드를 한 개의 문서로 통합하면서 네트워크 사용을 최소화한다.
CSS 규칙의 우선 순위
각각의 CSS 적용 방식에는 점수가 있어서 그 점수가 높은 순서대로 우선 순위를 가지게 된다.
Inline Style: 1000점
ID: 100점
Class: 10점
속성선택자: 10점
가상클래스속성: 10점
태그선택자: 1점
전체선택(/*): 0점<div id="foo" class="foo1 foo2 foo3 ... foo20">안녕</div>
#foo {
color: blue;
}
.foo1.foo2.foo3.....foo20 {
color: red;
}위와 같은 코드가 있다고 가정해보자. 위의 div의 "안녕"은 빨간색이 될까, 파란색이 될까.
점수 상으로는 빨간색이 되어야 맞다. 그러나 정답은 파란색.
점수는 개념 상의 설명을 위한 것이고, 실제로 하위 우선 순위의 점수가 높아도 상위 우선 순위의 이상으로 갈 수는 없다.
float 속성은 왜 좋지 않을까?
- 기본적으로 이미지 정렬을 위해 등장한 CSS 스타일이지만 레이아웃 정렬에도 많이 사용했다. 그렇기 때문에 불편한 사항들이 있다.
overflow: visible인 경우, 부모 요소의 크기가 자동으로 늘어나지 않는다. (position: absolute와 비슷하게 렌더링) 3.float속성은clear하지 않는 이상 계속해서 상속이 된다.
화면의 플로우와 코드의 플로우는 가능하면 동일한 것이 좋다. 하지만 float를 쓴다는 것은 화면에서 띄워 애초에 플로우를 무시해버린다. 물론 이것 역시 CSS를 매우 잘하는 사람이 짤 경우엔 플로우에 맞게 짤 수 있겠지만...
Flexbox(Flexible box)와 CSS Grid의 차이와 장단점
Flexbox: flexbox는 기본적으로 1차원 레이아웃을 위해 만들어졌다. Row or Column.
- 장점: 모든 방향으로 정렬이 가능하고, reverse도 가능하다. Container로 사용할 경우, 하위 item들을 정렬하기가 매우 수월하다.
- 단점: 퍼포먼스 이슈가 있다.
Grid: grid는 2차원 레이아웃을 위해 만들어졌다. Row and Column
- 장점: prototyping할 때 매우 쉽고 효율적으로 간단하게 작성하여 2차원의 레이아웃을 관리할 수 있다.
- 단점: 모든 브라우저에서 지원하는 것이 아니다.
차이점: flexbox는 행과 열을 매우 효율적으로 정렬하고 구성할 수 있기 때문에 비교적 작은 단위의 레이아웃에 적합하고, grid는 2차원의 레이아웃을 효율적으로 정렬할 수 있으므로 조금 더 큰 단위의 레이아웃을 구성할 때 사용하면 좋다.
