CSS 가상 엘리먼트

가상 element after, before

CSS에서 ::before와 ::after는 가상 엘리먼트(pseudo-elements)로, HTML 요소의 내용(content) 앞이나 뒤에 콘텐츠를 생성하거나 스타일을 적용할 때 사용됩니다. 이러한 가상 엘리먼트를 사용하면 실제 HTML 구조를 변경하지 않고도 시각적인 효과를 만들 수 있습니다.

/* 예시 */
.element::before {
  content: "Before content";
  /* 추가적인 스타일링을 적용할 수 있습니다 */
}

.element::after {
  content: "After content";
  /* 추가적인 스타일링을 적용할 수 있습니다 */
}

이외의 가상 엘리먼트

1. ::first-line: 선택한 요소의 첫 번째 줄에 스타일을 적용합니다. 주로 글자 스타일링에 사용됩니다.

2. ::first-letter: 선택한 요소의 첫 번째 글자에 스타일을 적용합니다. 주로 드랍캡(첫 글자 큰 스타일) 효과를 만들 때 사용됩니다.

3. ::selection: 텍스트 선택 영역에 스타일을 적용합니다. 예를 들어, 사용자가 텍스트를 드래그해서 선택하는 부분에 배경색이나 글자색을 변경할 수 있습니다.

4. ::placeholder: 입력 필드의 placeholder 텍스트에 스타일을 적용합니다. 입력 필드에 사용자가 아무것도 입력하지 않았을 때 표시되는 텍스트입니다.

5. ::marker: 목록 요소의 마커(숫자나 불릿)에 스타일을 적용합니다.

6. ::backdrop: 모달 창과 같은 배경 뒷면의 스타일을 정의합니다.

css 속성

box-sizing은 CSS 속성 중 하나로, 요소의 크기를 계산하는 방식을 지정하는 데 사용됩니다. HTML 요소의 크기는 기본적으로 해당 요소의 내용(content), 패딩(padding), 테두리(border), 그리고 마진(margin)의 합으로 결정됩니다.

content-box (기본값)

이 값은 요소의 크기를 내용(content) 영역만을 기준으로 계산합니다. 즉, 패딩, 테두리, 마진을 크기 계산에서 제외하고 내용 영역만을 고려합니다. 따라서 패딩과 테두리, 마진은 요소의 크기를 증가시키지 않습니다.

border-box

이 값은 요소의 크기를 테두리(border)까지 포함한 영역을 기준으로 계산합니다. 즉, 내용(content) 영역과 패딩(padding), 테두리(border)를 함께 고려하여 요소의 전체 크기를 결정합니다. 이 경우 패딩과 테두리, 마진은 요소의 크기를 증가시킵니다.

따라서 기본 속성인 content-box으로 설정되어 있을 땐, 포함된 padding 값을 고려해서 width 등을 설정해줘야 합니다.

Flex and Grid

CSS Flexbox (유연한 박스 모델)

CSS Flexbox(Flexible Box Layout)은 1차원(한 방향) 레이아웃을 만들 때 사용됩니다. 주로 행(row) 또는 열(column) 방향으로 요소들을 배치하고 정렬할 때 유용합니다. Flexbox는 부모 요소(컨테이너)와 그 안의 자식 요소(아이템) 간의 관계를 기반으로 배치와 정렬을 조정합니다.

Flexbox의 주요 개념과 속성:

display: flex;: 부모 요소를 Flex 컨테이너로 설정합니다.
flex-direction: 아이템의 배치 방향을 설정합니다 (row, column 등).
justify-content: 메인 축(main axis)을 따라 아이템을 정렬합니다.
align-items: 교차 축(cross axis)을 따라 아이템을 정렬합니다.
flex: 아이템의 크기를 조정하고 유연한 레이아웃을 만듭니다.
align-self: 개별 아이템의 교차 축 정렬을 설정합니다.
flex-wrap: 아이템들이 부모 컨테이너를 벗어날 경우 줄 바꿈 여부를 설정합니다.

CSS Grid (그리드 레이아웃)

CSS Grid Layout은 2차원(행과 열) 레이아웃을 만들 때 사용됩니다. 그리드 시스템을 사용하면 부모 요소 내에서 그리드 형태로 요소들을 배치하고 위치시킬 수 있습니다. Grid는 Flexbox와는 달리 행과 열 둘 다를 동시에 제어하여 더 복잡한 레이아웃을 구성할 수 있습니다.

Grid의 주요 개념과 속성:

display: grid;: 부모 요소를 그리드 컨테이너로 설정합니다.
grid-template-columns 및 grid-template-rows: 그리드의 열과 행을 설정합니다.
grid-gap 또는 gap: 그리드 아이템 사이의 간격을 설정합니다.
grid-column 및 grid-row: 아이템의 열과 행 위치를 지정합니다.
grid-template-areas: 그리드 영역을 정의하여 복잡한 레이아웃을 생성할 수 있습니다.
justify-items: 아이템의 수평 정렬을 설정합니다.
align-items: 아이템의 수직 정렬을 설정합니다.
place-items: align-items와 justify-items를 한 번에 설정합니다.

Flex vs. Grid

• flex는 1차원 레이아웃, grid는 2차원 레이아웃을 위해 주로 사용합니다.
• flex는 아이템을 main axis(주 축)에 따라 배치하고 정렬합니다. grid는 아이템을 행과 열을 기준으로 정렬하고 배치합니다.
• flex는 컨텐츠의 순서나 정렬을 조정할 때, 주로 사용합니다. grid는 복잡한 레이아웃을 구성해야 할 때 사용합니다.

emotion library

CSS-in-JS 스타일을 지원하는 라이브러리로, 컴포넌트 기반의 개발을 할 때, 동적으로 생성되는 스타일을 쉽게 관리하고 수정할 수 있도록 해줍니다.

Styled Components 와의 차이점

문법과 사용

• Styled Components: Styled Components는 템플릿 리터럴을 사용하여 CSS 스타일을 정의합니다. 컴포넌트 내부에서 스타일을 정의하고 사용할 수 있습니다. 예를 들어, styled.div와 같이 스타일을 정의하고 해당 스타일을 컴포넌트에 적용할 수 있습니다.

• Emotion: Emotion은 JavaScript의 객체 리터럴 또는 매크로 문법을 사용하여 스타일을 정의합니다. Emotion은 객체 리터럴 문법과 매크로 문법을 모두 지원하므로, 스타일을 작성하는 방식에 대한 선택권을 제공합니다.

클래스명 생성

• Styled Components: Styled Components는 랜덤한 클래스명을 생성하여 컴포넌트마다 유니크한 스타일을 가질 수 있도록 합니다. 이를 통해 스타일 간의 이름 충돌을 피할 수 있습니다.

• Emotion: Emotion은 스타일링 작업을 컴파일 시간에 해시화하여 클래스명을 생성합니다. 이는 런타임 성능을 향상시키고 스타일 간의 충돌을 피할 수 있게 해줍니다.

CSS 변수 지원

• Styled Components: Styled Components는 기본적으로 CSS 변수 지원을 제공하지 않습니다.

• Emotion: Emotion은 CSS 변수를 사용하여 스타일을 구성할 수 있는 기능을 제공합니다.

성능

• Styled Components: Styled Components는 성능 면에서 좋은 결과를 보여줍니다. 컴파일 시간에 스타일을 최적화하고 불필요한 리렌더링을 줄일 수 있습니다.

• Emotion: Emotion도 성능을 중요시하며, 스타일을 컴파일 시간에 최적화하여 성능을 개선하려고 노력합니다.

SSR and SSG

SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)은 웹 애플리케이션의 렌더링 방식을 나타내는 용어입니다. 둘 다 사용자 경험을 향상시키고 검색 엔진 최적화(SEO)를 개선하기 위해 사용됩니다.

SSG (정적 사이트 생성, static site generation)

정적 사이트 생성(SSG)은 웹 애플리케이션의 모든 페이지를 미리 렌더링하여 정적인 HTML 파일로 생성하는 방식입니다. 사이트의 콘텐츠가 자주 변경되지 않는 경우에 유용합니다. 사이트를 빌드할 때 필요한 모든 페이지가 미리 생성되며, 사용자가 사이트에 접속할 때 서버가 아닌 CDN(Content Delivery Network)을 통해 정적인 HTML 파일을 제공합니다.

초기 로딩 속도가 매우 빠릅니다. 모든 페이지가 미리 렌더링되어 있어서 필요한 데이터만 불러오면 됩니다. 서버에 부담이 적습니다. CDN을 통해 정적 파일을 전달하므로 서버 측에서의 렌더링이 필요하지 않습니다.

단, 동적인 콘텐츠에 대한 업데이트가 자주 발생하는 경우 적합하지 않습니다. 동적 기능은 클라이언트 측에서 추가 작업이 필요할 수 있습니다.

따라서 프로젝트의 목적와 요구사항에 따서 적절히 선택되어야 합니다. SSR은 초기 로딩 속도와 SEO 개선을 필요할 떄, SSG는 정적 컨텐츠를 빠르게 전달할 때 유용하게 사용할 수 있습니다.

CDN(Content Delivery Network)

CDN(Cotent Delivery Network)은 웹 콘텐츠를 더 빠르게 전달하기 위한 분산 네트워크 시스템입니다. CDN은 전세계에 분산된 서버 네트워크를 구축하여 사용자들이 웹 사이트의 콘텐츠를 빠르게 로드할 수 있도록 도와줍니다. 이는 대규모 트래픽이나 지리적으로 분산된 사용자에게 더 나은 성능을 제공하는 데 도움이 됩니다. 주로 이미지나 스크립트 같은 정적인 데이터 전송에 사용됩니다.

CDN의 작동 방식:

1. 캐싱: CDN은 웹 사이트의 정적인 콘텐츠(이미지, 스크립트, 스타일 시트 등)를 여러 지역의 서버에 캐싱하여 저장합니다. 사용자가 웹 사이트에 접속하면 가장 가까운 서버에서 콘텐츠를 빠르게 로드할 수 있습니다.

2. 지리적 분배: CDN은 여러 곳에 위치한 서버를 사용하여 콘텐츠를 제공합니다. 사용자가 웹 사이트에 접속할 때 가장 가까운 서버를 통해 콘텐츠를 받아올 수 있어 더 빠른 로딩 속도를 제공합니다.

3. 부하 분산: CDN은 웹 사이트의 트래픽을 여러 서버에 분산하여 서버의 부하를 분담하고 대량의 트래픽에 대응할 수 있도록 도와줍니다.

4. 보안: 일부 CDN은 보안 기능도 제공하여 DDoS 공격 및 다른 보안 위협으로부터 웹 사이트를 보호할 수 있습니다.

CDN의 장점:

• 로딩 속도 개선: 콘텐츠를 사용자에게 가장 가까운 서버에서 제공하여 로딩 속도를 향상시킵니다.
• 대규모 트래픽 관리: CDN은 서버 부하를 분산하여 대규모 트래픽에 대응할 수 있게 도와줍니다.
• 전세계적인 서비스: 전 세계 여러 지역에서 콘텐츠를 빠르게 제공할 수 있습니다.
• 보안 및 안정성: 일부 CDN은 웹 사이트를 보안 위협으로부터 보호할 수 있는 기능을 제공합니다.

대표적인 CDN 서비스로는 Cloudflare, Akamai, Amazon CloudFront 등이 있으며, 이러한 서비스는 웹 사이트의 성능과 안정성을 향상시키는 데 도움을 줍니다.

CDN과 프록시 서버의 연관성

CDN은 웹 콘텐츠를 여러 지역의 서버에 분산하여 사용자에게 가까운 서버에서 콘텐츠를 제공하여 로딩 속도를 개선하는 데 중점을 둡니다. 주로 정적인 콘텐츠(이미지, 스크립트 등)의 전송에 사용됩니다. 예를 들어, 사용자가 한국에 있다면 한국 서버에서 이미지를 빠르게 받아올 수 있도록 도와줍니다.

프록시 서버는 중계 서버로서 사용자와 원격 서버 사이에서 요청과 응답을 전달하는 역할을 합니다. 이를 통해 익명성을 보장하거나, 콘텐츠 필터링, 보안 검사 등을 수행할 수 있습니다. 프록시 서버는 동적인 콘텐츠를 처리하는 데 사용되며, 웹 페이지 내에서 리소스의 요청과 응답을 중계합니다. 사용자의 IP 주소를 숨기거나 웹 필터링을 위해 사용되기도 합니다.

두 기술 모두 컨텐츠 전달 과정에서 중간자 역할을 하며, 전송 효율성 및 사용자 경험을 개선하기 위해 요청과 응답을 중간에서 조작하거나 보완할 수 있습니다.

CDN은 주로 정적인 컨텐츠를 빠른 속도로 전송하기 위함이고, 전 세계 여러 지역에 서버를 두고 최적화된 컨텐츠를 제공합니다. 프록시 서버는 주로 동적인 컨텐츠를 처리하고 사용자의 익명성 보호 및 보안 검사의 목적을 수행합니다.

참조링크

CSS 레이아웃 - 처음부터 반응형 웹까지 핵심만 간단히 정리해 봅시다.
CSS Flexbox와 CSS Grid, 한번에 정리!