Skip to content

Latest commit

 

History

History
 
 

Quest02

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
screen.png
screen.png
 
 

README.md

Quest 02. CSS의 기초와 응용

Introduction

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

Topics

  • CSS의 기초 문법과 적용 방법
    • Inline, <style>, <link rel="stylesheet" href="...">
  • CSS 규칙의 우선순위
  • 박스 모델과 레이아웃 요소
    • 박스 모델: width, height, margin, padding, border, box-sizing
    • position, left, top, display
    • CSS Flexbox와 Grid
  • CSS 표준의 역사
  • 브라우저별 Developer tools

Resources

Checklist

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

    • 세 가지 방법 각각의 장단점은 무엇일까요?
    1. 내부 스타일 시트 (Internal Style Sheet)
    • 장점 : HTML 문서 안에서 스타일을 정의하기 때문에, 스타일 시트 파일을 따로 불러올 필요가 없습니다.
    • 단점 : 같은 스타일을 사용하는 다른 HTML 파일에서도 스타일을 일일이 정의해 주어야 합니다.
    1. 외부 스타일 시트 (External Style Sheet)
    • 장점 : 여러 HTML 파일에서 같은 스타일을 사용할 경우, 스타일 시트 파일을 한 곳에 모아서 관리할 수 있습니다. 또한, 캐싱을 이용해 브라우저 측면에서의 성능 향상을 가져올 수 있습니다.
    • 단점 : HTML 문서에서 외부 스타일 시트를 불러오기 위한 추가적인 HTTP 요청이 필요하며, 이로 인해 로딩 속도가 느려질 수 있습니다.
    1. 인라인 스타일 (Inline Style)
    • 장점 : 특정 요소에 대한 스타일을 빠르게 적용할 수 있습니다.
    • 단점 : 스타일을 정의하는 HTML 요소의 크기가 커지며, 유지보수가 어려워집니다. 또한, 같은 스타일을 사용하는 다른 요소에서도 스타일을 일일이 정의해 주어야 합니다.

  • CSS 규칙의 우선순위는 어떻게 결정될까요?

    1. 중요도 (Importance) : !important를 사용한 속성은 다른 모든 규칙보다 높은 우선순위를 가집니다.
    2. 명시도 (Specificity) : 선택자가 명시적으로 지정된 요소는 다른 선택자보다 우선순위가 높습니다.
    3. 소스 코드의 순서 (Source Order) : 동일한 중요도와 명시도를 가진 규칙이 있을 경우, 나중에 선언된 규칙이 우선합니다.
  • CSS의 박스모델은 무엇일까요? 박스가 화면에서 차지하는 크기는 어떻게 결정될까요?
  1. 콘텐츠 영역(Content Area): 요소의 실제 내용이 들어가는 영역입니다. 콘텐츠 영역의 크기는 width와 height 속성으로 지정할 수 있습니다.
  2. 패딩 영역(Padding Area): 콘텐츠 영역과 테두리 사이의 여백 영역입니다. 패딩 영역의 크기는 padding 속성으로 지정할 수 있습니다.
  3. 테두리 영역(Border Area): 요소의 경계선을 감싸는 영역입니다. 테두리 영역의 크기는 border 속성으로 지정할 수 있습니다.
  4. 마진 영역(Margin Area): 요소와 다른 요소와의 간격을 나타내는 영역입니다. 마진 영역의 크기는 margin 속성으로 지정할 수 있습니다.
  • float 속성은 왜 좋지 않을까요?
  1. 높이가 있는 요소를 감싸지 못할 경우가 있습니다.
  2. 다음 요소가 float 요소 아래로 이동할 수 있습니다.
  3. float 속성이 있는 요소를 가진 컨테이너의 크기가 제대로 계산되지 않을 수 있습니다.
  4. float 속성이 있는 요소가 있는 컨테이너의 크기는 해당 요소를 포함하지 않습니다.
  5. 느린 성능과 복잡성
  • Flexbox(Flexible box)와 CSS Grid의 차이와 장단점은 무엇일까요?

    Flexbox와 다르게 CSS Grid는 행과 열 모두에서 요소의 크기와 위치를 조정할 수 있기 때문에, 다양한 요소를 복잡하게 배치하는 데 매우 유용합니다.

  • CSS의 비슷한 요소들을 어떤 식으로 정리할 수 있을까요?
  1. 클래스(Class)와 ID를 활용한 선택자 사용 : 클래스와 ID를 사용하여 특정한 요소들을 그룹화하고, CSS 스타일을 적용할 수 있습니다. 이를 통해 비슷한 디자인 요소를 갖는 여러 개의 요소들을 한번에 스타일링할 수 있습니다.
  1. 상속(Inheritance) 사용 : 부모 요소에 적용된 CSS 스타일이 자식 요소에 상속되는 특징을 활용하여, 비슷한 스타일을 갖는 요소들을 그룹화할 수 있습니다.
  1. 속성(Attribute) 선택자 사용 : 특정 속성 값이 일치하는 모든 요소들에 스타일을 적용할 수 있습니다. 예를 들어, 모든 링크 요소에 스타일을 적용하려는 경우, a[href] 선택자를 사용하여 모든 href 속성이 있는 링크 요소에 스타일을 적용할 수 있습니다.
  1. 자식 선택자(Child selector)와 후손 선택자(Descendant selector) 사용 : 자식 선택자와 후손 선택자를 사용하여 특정 요소의 하위 요소들에 대해서만 스타일을 적용할 수 있습니다. 이를 활용하여 비슷한 스타일을 갖는 요소들을 그룹화할 수 있습니다.
  1. 그룹화(Grouping) 사용 : 여러 개의 선택자를 쉼표로 구분하여 그룹화하면, 하나의 스타일 규칙에 여러 요소를 포함시킬 수 있습니다. 이를 통해 비슷한 스타일을 갖는 여러 요소들을 한번에 스타일링할 수 있습니다.

Quest

  • Quest 01에서 만들었던 HTML을 바탕으로, 이 그림의 레이아웃과 CSS를 최대한 비슷하게 흉내내 보세요. 꼭 완벽히 정확할 필요는 없으나 align 등의 속성은 일치해야 합니다.
  • 주의사항: 되도록이면 원래 페이지의 CSS를 참고하지 말고 아무것도 없는 백지에서 시작해 보도록 노력해 보세요!

Advanced

  • 왜 CSS는 어려울까요?
  • CSS의 어려움을 극복하기 위해 어떤 방법들이 제시되고 나왔을까요?
  • CSS가 브라우저에 의해 해석되고 적용되기까지 내부적으로 어떤 과정을 거칠까요?
  • 웹 폰트의 경우에는 브라우저 엔진 별로 어떤 과정을 통해 렌더링 될까요?