지난 챕터를 통해, HTML이 웹 페이지의 구조를 작성하는 마크업 언어인 것을 확인했다.
이번 챕터에서는 CSS를 학습했다.
CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정한다.
HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당한다.
같은 HTML 구조를 가지고 있는 문서에, 각기 다른 CSS파일을 적용하면 전혀 다른 웹사이트처럼 보이게 할 수도 있다.
Achievement Goals
- CSS의 사용목적을 이해할 수 있다.
- 프론트엔드 개발자의 기초소양에 대해 이해할 수 있다.
- CSS의 기본 문법과 구조를 이해할 수 있다.
- CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
CSS는 스타일링을 위한 도구
같은 구조와 로직이라면 당연히 CSS가 적용된 웹 어플리케이션이 더 좋은 웹 어플리케이션이다.
그러나 우리가 옷을 입을 때 항상 심미적인 이유로만 옷을 입지 않듯이, CSS도 화려함만을 위해 사용되지는 않는다.
- 콘텐츠의 배치와 위치 (레이아웃 디자인)
- 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)
위의 요소를 갖추고 있으면 더 나은 사용자 경험(UX, User expirenece)을 제공할 수 있다.
CSS는 기존 웹 페이지에 다른 CSS 파일을 적용해 활자 매체로 출판을 할 수도 있거나, 색약이나 장애인이 웹 페이지를 이용할 때 도움을 줄 수도 있다.
CSS는 디자이너의 영역이다?
나는 서버 개발자가 될 테니까 또는 나는 디자인 감각이 없으니까 등의 생각은 기본소양을 학습하는 데에 방해가 될 수 있다.
CSS를 작성해서 간단한 UI를 만드는 일은 개발자의 기본적인 소양이다. 위에서 언급한 콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인은 디자이너가 아니라도 할 수 있어야 한다.
프론트엔드 개발자가 되려면...
사용자가 웹 서비스를 이용할 때, 크롬과 같은 브라우저에 보이는 부분을 프론트엔드(앞 단, Front-end)라고 한다.
그리고 프론트엔드를 개발하는, 프론트엔드 개발자는 레이아웃 디자인과 타이포그래피 정도는 다룰 수 있어야 한다.
- 화면의 구성이나 배치 (레이아웃 디자인)
- 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
그리고 아래의 내용은 프론트엔드 개발자에게 있으면 좋고, 없어도 크게 상관없는 부분입니다.
- 정렬이나 배색에 대한 감각
- UX에 대하여 고민해보고, UX가 잘 적용된 웹이나 앱을 분석해본 경험
/* 여기부터 */
.menu-item {
text-decoration: underline;
}
/* 여기까지가 변경된 CSS 입니다! 이전 화면과 비교해서 무엇이 달라졌나요? navigation list 에만 밑줄이 생긴 것을 볼 수 있습니다.*/
.selected {
font-weight: bold;
color: #009999;
}
#navigation-title {
color: red;
}
body {
margin: 0;
padding: 0;
background: #fff;
color: #4a4a4a;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #4a4a4a;
color: #f9f9f9;
}
nav {
background: #eee;
flex: 0 0 180px;
padding: 0 10px;
}
main {
background: #f9f9f9;
flex: 1;
padding: 0 20px;
}
aside {
background: #eee;
flex: 0 0 130px;
padding: 0 10px;
}
.container {
display: flex;
flex: 1;
}Html파일에 Css파일을 만들어서 가독성 좋게 사이트를 구성할 수 있다.
