CSS
이번에는 HTML이 웹 페이지의 구조를 담당한다면, HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 맡고 있는 CSS를 알아보겠습니다.
이번에도 먼저 정의부터 알아봅시다.
CSS(Cascading Style Sheets,종속형 스타일 시트)
마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어
HTML만을 사용해서 웹페이지를 제작하다보면 뭔가 너무 허전하고 아쉬운 느낌이 들지 않나요?
예를 들어 우리가 물건을 고르고 구매할 때 기능이나 성능을 보기도 하지만 대부분의 경우에 모양과 색상, 크기 등등을 고려하듯이 웹페이지에서 또한 디자인적 요소도 굉장히 중요합니다.
위 두 사진은 네이버 모바일 사이트를 CSS를 제거해서 비교해봤는데요.
이렇게 단순하게 비교해 봐도 한눈에 두 웹 사이트 중 어떤 웹 사이트가 더 보기 좋은지 알 수 있습니다. 사용자 기준에서 CSS가 있는 위쪽이 조금 더 보기 좋고, 한눈에 들어옵니다.
또한 CSS는 심미적인 화려함 뿐 아니라, 더 나은 사용자 경험(UX, user experience)을 주기 위한 콘텐츠 배치와 타이포그래피 등을 적용합니다.
위 사진 처럼 같은 HTML파일을 쓰더라도 전달력의 차이가 생기듯 CSS는 문서의 작성된 콘텐츠를 이해할 수 있도록 돕는 역할을 합니다. 한마디로 사용자 경험을 제공하기 위한 도구라고 할 수 있죠.
사용자 인터페이스(UI: User Interface)
앞선 이유로 개발자는 CSS로 사용자 인터페이스를 만들게 됩니다. 여기서 인터페이스란 쉽게 설명하자면 컴퓨터와
사용자간에 정보를 쉽게 주고 받을 수 있도록 하는 수단입니다.
특히 직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양이라고 할 수 있는데 CSS를 이용하여 글자에 밑줄을 그어 하이퍼링크로 제작하는 것, 사각형 모양 도형 아래에 그림자 효과를 주어 버튼처럼 보이게 만드는 것, 콘텐츠가 더욱 잘 보이게 레이아웃을 적절히 디자인하는 것 모두 이에 속합니다.
아무리 훌륭한 내부 기능을 갖고 있더라도, 만약 UI가 없으면 소용이 있을까요?
사용자가 그러한 기능을 쉽고 직관적으로 이용할 수 있어야 의미가 있지 않을까요?
그렇기 때문에 UI가 꼭 필요합니다
여기서 한가지 의문이 들지 않나요?
'UX를 고려하여 디자인하려면, 디자인을 배워야 하는 것 아닌가?'
라고 말이죠
물론 디자이너가 웹페이지의 기능을 위해서 고심하고 엄청난 연구 끝에 디자인하는 경우도 있겠지만
그것이 꼭 전문 디자이너만 할 수 있는 것은 아니며 코드로 작성하는 것은 UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험이 있다면 충분히 구현할 수 있습니다.
CSS의 구조
css는 선택자와 선언(속성 : 값)으로 이루어져 있습니다.
선택자(selector)
자주 쓰이는 선택자(셀렉터)를 소개해 보겠습니다
-
전체 셀렉터
전체 셀렉터는 문서의 모든 요소를 선택합니다.- { }
-
태그 셀렉터
태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다.h1 { }
div { }
section, h1 { } -
ID 셀렉터
ID 셀렉터는 #id로 입력하여 선택합니다.#only { }
-
class 셀렉터
class 셀렉터는 .class로 입력하여 선택합니다. 같은 class를 가진 모든 요소를 선택합니다..widget { }
.center { } -
attribute 셀렉터
attribute 셀렉터는 같은 속성을 가진 요소를 선택합니다.a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }
- 자식 후손 형제 셀렉터
많기에 간단히 요약하자면
A B : A 밑에 B 전부
A>B : A 바로 밑에 B만
A, B : A와 B
A.B : A중에 B class만 (id도 #으로 마찬가지)
A~B : 부모 요소를 공유하면서, A 뒤에 오는 B 모두
A+B : 부모 요소를 공유하면서, A 바로 뒤에 오는 B만ul li {}
ul > li {}
ul , li {}
ul.li {}
ul ~ li {}
ul + li {}
- 가상 클래스 셀렉터
가상 클래스는 요소의 상태 정보에 기반해 요소를 선택합니다.a:link { } 사용자가 방문하지 않은 요소를 선택합니다.
a:visited { } 사용자가 방문한 요소를 선택합니다.
a:hover { } 마우스를 요소 위에 올렸을 때 선택합니다.
a:active { } 활성화 된(클릭된) 상태일 때 선택합니다.
a:focus { } 포커스가 들어와 있을 때 선택합니다.
자주 쓰이는 속성들
하나의 웹 페이지 내에 있는 모든 콘텐츠는 고유의 영역을 가지고 있습니다. 그 영역은 항상 직사각형으로 이루어져 있기 때문에, 박스(box)모델이라고 부르는데요
CSS박스 모델은 이 이미지를 기억하면 됩니다.
그래서 이러한 박스모델을 속성을 통해서 조절, 수정하여 콘텐츠를 꾸미기도 합니다.
박스를 구성하는 요소는 Content, Padding, Border, Margin이 있고 모두 속성으로 조절이 가능합니다.
- border
border는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용합니다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듭니다. 다음의 코드를 통해 테두리를 실선으로 확인할 수 있습니다.p {
border: 1px solid red;
}
- width , height
width(가로길이), height(세로길이)를 의미하고
inline 요소에서는 적용되지 않습니다.{
width: 100px;
height: 100px;
}
✽값의 단위✽
auto -> 기본값, 브라우저가 계산한 너비
px -> 픽셀
% -> 부모 요소에 상대적인 너비
initial -> 기본값으로 초기화
inherit -> 부모 요소로부터 상속 받은 값
❗️처음 레이아웃 디자인을 할 때 가장 많이 하는 실수가 있습니다.
바로 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우입니다.
이때는 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산하기 때문에 레이아웃 디자인을 조금 더 쉽게 할 수 있습니다.❗️
- margin, padding
margin은 바깥쪽 여백, padding은 안쪽 여백을 의미합니다.
두 속성 모두 방향을 지정할 수 있고 값의 순서에 따른 방향은 값을 두 개만 넣으면 (top과 bottom), (left 및 right)순이며 네 개를 넣으면 시계방향으로 top, right, bottom, left순으로 동일합니다.
width,height 속성과 마찬가지로 px, auto 등 값을 사용할 수 있습니다.{
margin:10px -> 상하좌우 모두 10px 여백
margin:20px 10px -> 상하 20px , 좌우 10px 여백
margin:40px 30px 20px 10px -> 위 40px, 오른쪽 20px, 아래 20px, 왼쪽10px 여백
margin:40px 30px 10px -> 위 40px, 좌우 30px, 아래 10px 여백
}
-
color
글자의 색상을 변경합니다.{
color: #155724; / 글자 색상 /
background-color: #d4edda; / 배경 색상 /
border-color: #c3e6cb; / 테두리 색상 /
} -
font
글자의 폰트를 설정합니다.{
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
✽이외의 글자의 모양을 변형 시키는 속성✽
font-style -> 기울기 등의 스타일 지정
font-weight -> 글자 두께
font-variant -> 글꼴 변형 (소문자를 대문자로 바꾸는 등)
font-size -> 글자 크기
line-height -> 줄 간격
이 밖에 정말 많은 속성들이 존재하고 자주 쓰이지만 지금까지 학습한 CSS를 조금만 응용해도 멋진 웹페이지를 제작할 수 있습니다.
