Folders and files Name Name Last commit message
Last commit date
parent directory
View all files
CSS는 Cascading StyleSheet의 약자입니다. 웹브라우저에 표시되는 HTML 문서의 스타일을 지정하는 (거의) 유일하지만 다루기 쉽지 않은 언어입니다. 이번 퀘스트를 통해 CSS의 기초적인 레이아웃 작성법을 알아볼 예정입니다.
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
CSS를 HTML에 적용하는 세 가지 방법은 무엇일까요?
CSS 규칙의 우선순위는 어떻게 결정될까요?
CSS의 박스모델은 무엇일까요? 박스가 화면에서 차지하는 크기는 어떻게 결정될까요?
float
속성은 왜 좋지 않을까요?
Flexbox(Flexible box)와 CSS Grid의 차이와 장단점은 무엇일까요?
CSS의 비슷한 요소들을 어떤 식으로 정리할 수 있을까요?
Quest 01에서 만들었던 HTML을 바탕으로, 이 그림 의 레이아웃과 CSS를 최대한 비슷하게 흉내내 보세요. 꼭 완벽히 정확할 필요는 없으나 align 등의 속성은 일치해야 합니다.
주의사항: 되도록이면 원래 페이지의 CSS를 참고하지 말고 아무것도 없는 백지에서 시작해 보도록 노력해 보세요!
왜 CSS는 어려울까요?
CSS의 어려움을 극복하기 위해 어떤 방법들이 제시되고 나왔을까요?
CSS가 브라우저에 의해 해석되고 적용되기까지 내부적으로 어떤 과정을 거칠까요?
웹 폰트의 경우에는 브라우저 엔진 별로 어떤 과정을 통해 렌더링 될까요?
You can’t perform that action at this time.