Project.log

WebDevCurriculum / CSS의 기초와 응용 본문

ETC

WebDevCurriculum / CSS의 기초와 응용

jinuk_ 2023. 5. 7. 13:31
728x90
반응형

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다.

Introduction

  • CSS는 Cascading StyleSheet의 약자입니다. 웹브라우저에 표시되는 HTML 문서의 스타일을 지정하는 (거의) 유일하지만 다루기 쉽지 않은 언어입니다. 이번 퀘스트를 통해 CSS의 기초적인 레이아웃 작성법을 알아볼 예정입니다.

Checklist

  • CSS를 HTML에 적용하는 세 가지 방법은 무엇일까요?

내부스타일 시트를 이용하는 방법과 외부스타일 시트이용 그리고 인라인스타일 이용하는 방법이 있습니다.

 

먼저 내부스타일 시트는 HTML 문서의 <head> 태그 내부에서 <style> 태그를 사용하여 CSS 코드를 작성합니다. 이 방법은 한 문서 내에서 스타일을 적용할 때 유용합니다.

 

예시: 

!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightskyblue;
      }
      h1 {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is html5 p tag</p>
  </body>
</html>

 

다음으로 외부스타일 시트는 HTML 문서와 별도로 CSS 파일을 작성하고, HTML 문서에서 CSS 파일을 참조합니다. 이 방법은 여러 문서에서 동일한 스타일을 적용할 때 유용합니다.

 

예시:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>Show head tag !</p>
  </body>
</html>

▼style.css

body {
  background-color: lightskyblue;
}
h1 {
  color: #fff;
}

 

마지막으로 인라인스타일은 HTML 요소의 style 속성을 사용하여 CSS 코드를 작성합니다. 이 방법은 특정 요소에만 스타일을 적용할 때 유용합니다.

 

예시:

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color: #fff;">Hello, world!</h1>
    <p style="background-color: lightskyblue;">This is an example of inline style.</p>
  </body>
</html>

 

  • 세 가지 방법 각각의 장단점은 무엇일까요?

내부 스타일 시트

장점: 한 문서 내에서 스타일을 적용하기 편리합니다. / 스타일 시트가 HTML 파일 안에 있기 때문에, 파일을 다운로드하는 시간이 줄어들어 성능이 향상됩니다.

단점: 여러 문서에서 동일한 스타일을 적용하려면, 모든 문서에 동일한 내부 스타일 시트를 작성해야 하므로 유지보수가 어렵습니다. / 스타일 시트가 HTML 파일 내부에 있기 때문에, HTML 코드와 혼재하여 가독성이 떨어질 수 있습니다.

 

외부 스타일 시트

장점: 여러 문서에서 동일한 스타일을 적용할 수 있습니다. / 스타일 시트와 HTML 파일이 분리되어 있기 때문에, 유지보수가 용이합니다. / 스타일 시트를 브라우저가 캐시하므로, 다운로드 시간이 줄어듭니다.

단점: HTML 파일과 CSS 파일을 모두 다운로드 해야 하기 때문에, 초기 로딩 시간이 길어질 수 있습니다.

 

인라인 스타일

장점: 특정 요소에만 스타일을 적용할 수 있습니다. / HTML 태그 안에서 스타일을 작성하기 때문에, CSS 파일을 별도로 로드할 필요가 없습니다.

단점: 여러 요소에서 동일한 스타일을 적용하려면, 모든 요소에 인라인 스타일을 작성해야 하므로 유지보수가 어렵습니다. / HTML 코드와 스타일이 혼재하여 가독성이 떨어질 수 있습니다. / 인라인 스타일을 사용하면, 스타일과 내용이 분리되지 않기 때문에 유지보수성이 저하됩니다.

 

  • CSS 규칙의 우선순위는 어떻게 결정될까요?
  1. 중요도 (Importance) : !important 규칙이 적용된 스타일은 다른 모든 스타일보다 우선합니다.
  2. 명시도 (Specificity) : 스타일 규칙이 구체적일수록 우선순위가 높습니다. 
  3. 선언 순서 (Declaration Order) : 동일한 우선순위를 가지는 스타일 규칙일 경우, 나중에 작성된 규칙이 우선순위가 높습니다.

위에 2번 명시도는 다음과 같은 규칙으로 계산됩니다.

 

예를 들어, 다음과 같은 CSS 규칙이 있다고 가정해봅시다.

p {
  color: skyblue;
  font-size: 18px;
}

#header p {
  color: red;
}

p {
  font-size: 14px;
}

위 규칙에서는 첫 번째 규칙과 세 번째 규칙의 명시도와 선언 순서가 같습니다. 하지만 첫 번째 규칙은 먼저 선언되어 있으므로, 첫 번째 규칙이 우선적으로 적용됩니다.

 

  • CSS의 박스모델은 무엇일까요? 박스가 화면에서 차지하는 크기는 어떻게 결정될까요?

CSS의 박스 모델은 웹 페이지의 레이아웃을 결정하는 핵심 개념 중 하나입니다. 박스 모델은 각 HTML 요소가 화면에 표시될 때 해당 요소의 크기와 위치를 결정합니다. 각 요소는 모두 사각형 박스로 표현되며, 이러한 박스는 다음과 같은 4가지 구성 요소로 구성됩니다.

  • 콘텐츠 (Content) : 텍스트, 이미지 등의 실제 콘텐츠가 들어가는 영역입니다.
  • 패딩 (Padding) : 콘텐츠와 테두리(border) 사이의 여백을 말합니다.
  • 테두리 (Border) : 박스의 경계선을 말합니다.
  • 마진 (Margin) : 박스와 주변 요소 간의 여백을 말합니다.

박스의 크기는 이러한 4가지 요소의 크기에 따라 결정됩니다. 예를 들어, 박스의 너비는 콘텐츠 너비 + 좌우 패딩 너비 + 좌우 테두리 너비 + 좌우 마진 너비로 결정됩니다. 박스의 높이도 비슷한 방식으로 결정됩니다.

박스의 크기를 조정하려면 CSS의 width, height, padding, border, margin 등의 속성을 사용할 수 있습니다. 예를 들어, width 속성을 사용하여 박스의 너비를 지정할 수 있으며, padding 속성을 사용하여 콘텐츠와 테두리 사이의 여백을 지정할 수 있습니다. 이러한 속성을 사용하여 웹 페이지의 레이아웃을 조정할 수 있습니다.

 

  • float 속성은 왜 좋지 않을까요?

float 속성은 웹 페이지 디자인에서 요소를 배치하는 데 사용되는 CSS 속성 중 하나입니다. float를 사용하면 요소를 왼쪽 또는 오른쪽으로 띄워서 다른 요소들과 함께 배치할 수 있습니다. 그러나 float 속성에는 몇 가지 문제점이 있습니다.

  • 레이아웃 깨짐 : float 속성을 사용하면 요소가 흐름에서 벗어나게 됩니다. 이로 인해 다른 요소들이 레이아웃을 깨지게 되는 경우가 있습니다. 특히, float된 요소가 부모 요소를 넘어가는 경우, 부모 요소의 높이가 자식 요소의 높이에 맞지 않아서 레이아웃이 깨지는 경우가 많이 있습니다.
  • 반응형 디자인 어려움 : float 속성을 사용하면 다른 요소들이 그 주위를 감싸는 형태로 배치됩니다. 이로 인해 반응형 디자인을 구현하기가 어려워집니다. 예를 들어, float된 요소가 작은 화면에서는 너무 작아지면서 다른 요소들과 겹치는 문제가 발생할 수 있습니다.
  • 접근성 문제 : float된 요소가 흐름에서 벗어나면서, 키보드나 스크린 리더 등의 보조 기술을 사용하는 사용자들이 요소를 탐색하기가 어려워집니다.
  • 코드의 복잡성 증가 : float 속성을 사용하면 레이아웃을 구성하는 데 추가적인 HTML 요소가 필요해지므로 코드가 복잡해지고 유지보수가 어려워집니다.

따라서 float 속성은 요소 배치를 위해 사용할 수는 있지만, 위와 같은 문제점 때문에 최대한 피하는 것이 좋습니다.

대신, flexbox나 CSS Grid 같은 최신 CSS 레이아웃 기술을 사용하는 것이 더 권장됩니다.

 

  • Flexbox(Flexible box)와 CSS Grid의 차이와 장단점은 무엇일까요?

Flexbox와 CSS Grid는 모두 최신 CSS 레이아웃 기술이며, 각각의 특성과 장단점이 있습니다.

  • Flexbox는 1차원적인 레이아웃을 다루는 데에 사용됩니다. 주로 요소를 수평 또는 수직 축을 기준으로 배치할 때 사용됩니다. 예를 들어, 네비게이션 메뉴를 수평으로 정렬하는 경우에 사용할 수 있습니다. Flexbox는 다음과 같은 특징을 가지고 있습니다.

장점:

  • 간단한 레이아웃을 만들 때 유용합니다.
  • 브라우저 호환성이 좋습니다.
  • 레이아웃이 유연하게 조정됩니다.

단점:

  • 복잡한 레이아웃에 적합하지 않습니다.
  • 다차원 레이아웃을 다루기 어렵습니다.
  • 일부 속성의 동작이 예상과 다를 수 있습니다.

 

  • CSS Grid는 2차원적인 레이아웃을 다루는 데에 사용됩니다. Flexbox와 달리 행과 열 모두를 사용하여 레이아웃을 조정할 수 있습니다. 예를 들어, 이미지 갤러리나 뉴스 사이트의 레이아웃을 만들 때 사용할 수 있습니다. CSS Grid는 다음과 같은 특징을 가지고 있습니다.

장점:

  • 다양한 레이아웃을 만들 수 있습니다.
  • 레이아웃을 쉽게 변경할 수 있습니다.
  • 다차원 레이아웃을 다루기 쉽습니다.

단점:

  • 브라우저 호환성이 좋지 않습니다.
  • 초기 설정이 복잡할 수 있습니다.
  • Flexbox에 비해 학습곡선이 높을 수 있습니다.

따라서, 간단한 레이아웃을 만들 때는 Flexbox가 적합하며, 복잡한 레이아웃이나 다차원 레이아웃을 다룰 때는 CSS Grid가 더 적합합니다. 하지만, 두 기술은 상호 보완적이며, 같은 레이아웃에서 함께 사용할 수도 있습니다.

 

  • CSS의 비슷한 요소들을 어떤 식으로 정리할 수 있을까요?

 

  • Display 속성
  • block: 블록 레벨 요소
  • inline: 인라인 요소
  • inline-block: 인라인 블록 요소
  • none: 화면에서 숨기는 요소
  • Position 속성
  • static: 기본값으로, 위치 지정 없이 요소를 배치합니다.
  • relative: 요소를 이동시키면서 원래 위치를 기준으로 배치합니다.
  • absolute: 가장 가까운 조상 요소를 기준으로 위치를 지정합니다.
  • fixed: 뷰포트를 기준으로 위치를 고정합니다.
  • sticky: 스크롤 위치에 따라 동적으로 상대적인 위치를 지정합니다.
  • Box Model 속성
  • margin: 요소의 외부 여백을 지정합니다.
  • padding: 요소의 내부 여백을 지정합니다.
  • border: 요소의 테두리를 지정합니다.
  • Text 속성
  • color: 글자 색상을 지정합니다.
  • font-size: 글자 크기를 지정합니다.
  • font-family: 글꼴을 지정합니다.
  • Flexbox 속성
  • display: flex; 요소를 플렉스 컨테이너로 만듭니다.
  • flex-direction: 플렉스 아이템의 배치 방향을 지정합니다.
  • justify-content: 플렉스 아이템을 수평으로 정렬합니다.
  • align-items: 플렉스 아이템을 수직으로 정렬합니다.
  • Grid 속성
  • display: grid; 요소를 그리드 컨테이너로 만듭니다.
  • grid-template-rows: 그리드 행의 크기를 지정합니다.
  • grid-template-columns: 그리드 열의 크기를 지정합니다.
  • grid-gap: 그리드 아이템 사이의 간격을 지정합니다.

위와 같이 CSS에서는 많은 요소들이 있지만, 이러한 비슷한 속성들을 함께 묶어서 사용하면 코드를 더욱 효율적으로 작성할 수 있습니다.

728x90
반응형
저작자표시 비영리 변경금지

'ETC' 카테고리의 다른 글

WebDevCurriculum / OOP 특훈  (0) 2023.05.09
WebDevCurriculum / OOP의 기본  (0) 2023.05.08
WebDevCurriculum / 자바스크립트와 DOM  (0) 2023.05.07
WebDevCurriculum / HTML과 웹의 기초  (0) 2023.05.06
WebDevCurriculum / 형상관리 시스템  (0) 2023.05.04
'ETC' Related Articles more