CSS 기초 문법, 컬러, Google font family.
Cascading Style Sheet의 줄인말인 CSS는 문서가 어떻게 보여져야 할지를 결정하는 언어입니다. element들이 어떻게 렌더링 되어야 할지를 지정해주는 거죠. 쉽게 생각하면 '이녀석의 너비는 ... 높이는.. 컬러는...' 이런식으로 지정해주는 언어입니다. 디자인 언어라고 생각해도 될 것 같습니다. 요즘 CSS는 매우 많이 발전해서 Javascript가 없어도 반응형 웹을 만들 수도 있을 정도입니다. 또한 CSS는 정말 많은 속성들이 존재하는데, '설마 이것도 있을까?' 하는 생각이 들어서 찾아보면 거의 대부분 을 수 있습니다.
CSS에 관한 내용은 어디서 찾아보면 좋을까?
역시 공식 문서를 보면서 공부하는게 최고입니다. html과 동일하게 MDN에서 정보를 찾으시면 됩니다. 정말 다른 곳 필요 없습니다.
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
style 적용하기
CSS 코드는 어디에 작성해야 할까요? 3가지 방법이 있습니다.
1. inline으로 작성하기.
html 문서에서 style="CSS 코드" attribute를 이용하는 방법입니다. 빠르게 스타일 적용이 가능한 장점이 있습니다. 그러나 모든 style을 inline으로 작성했다가는 수정하기 정말 어려워지는 큰 단점이 있죠.
2. <style> 태그에 작성하기.
<head></head>안에 <style></style> 태그를 작성합니다. <style></style>안에서 바로 CSS코드를 작성하는 방법입니다.
3. .css 파일을 만들고 링크 걸기.
가장 좋은 방법입니다. 프로젝트가 점점 커지게 되면 수정하고 유지보수하기가 편한게 정말 중요하게 다가옵니다. CSS 코드를 마치 함수처럼 작성하고 필요한 것을 가져다가 쓰고, .css파일 조금만 수정해서 디자인 변경이 가능합니다. inline으로 CSS를 작성했다면 눈앞이 깜깜해졌겠죠? 링크를 거는 방법은 <head>안에 <link rel="stylesheet" href=".css파일의 주소">을 추가해주면 됩니다.
아래에 3가지 방법으로 스타일을 적용해 봤습니다.
See the Pen css style 3 way by KimJerry (@kimjerry) on CodePen.
컬러를 변경할 수 있는 속성들
1. color: black;
텍스트의 컬러를 변경할 수 있는 속성입니다.
2. background-color: black;
배경의 컬러를 변경할 수 있는 속성입니다. width, height가 존재하지 않는 inline요소들은 정확히 텍스트의 배경 부분만 컬러가 적용됩니다.
3. border-color: black;
border는 element의 테두리라고 생각하시면 되는데, 그 테두리의 색을 변경할 수 있는 속성입니다.
아래 <div>에 저 3가지를 모두 적용해 보았습니다.
See the Pen Untitled by KimJerry (@kimjerry) on CodePen.
Color System
CSS에서 주로 사용하는 color system으로는 hex코드와 rgb(255, 0, 255) 이 두 방식을 주로 사용합니다. 구글에 컬러 코드라고 대충 검색하면 #FF12A1 이런식으로 # 뒤에 저런 것이 있으면 hex코드입니다. 16진수 코드죠.
또 따른 방법은 rgb(0, 0, 0) 를 사용하는 방법인데, 괄호안에 있는 숫자는 순서대로 RED, BLUE, GREEN 을 의미합니다. 제일 친숙한 컬러 시스템이지 않을까 합니다. 다른 컬러 시스템도 있지만 언급하지 않겠습니다. 자기가 편한 컬러 시스템을 사용하면 됩니다.
아래 사이트는 색조합이 고민될 때 유용한 사이트입니다. 디자이너 또는 유저들이 색조합을 업로드 해놓은 사이트들인데 컬러를 고를 때 항상 이 사이트 먼저 들어가 보곤 합니다.
The Most Popular Color Palettes of 2022 - Color Hunt
Find the perfect trendy color palettes and get color inspiration for your next design or art project.
colorhunt.co
Text properties.
1. text-align: center;
텍스트를 정렬할 수 있는 속성입니다. 여러 속성이 있지만 주로 쓰는 것은 start, end, center, justify 정도 있습니다.
2. font-weight: 400;
글꼴의 두께를 조절할 수 있습니다. default 값이 400입니다. 100 ~ 800? 까지 범위의 값을 쓸 수 있습니다.
3. text-decoration: underline;
underline, overline, none 등 여러 속성이 있고 윗줄 긋기, 밑줄 긋기 아니면 아얘 스타일을 없앨 수 있습니다.
4. line-height: 1.5em;
텍스트의 위 아래 간격을 조절할 수 있습니다. px, rem, em 과 같은 단위를 사용하면 됩니다.
5. letter-spacing: 5px;
문자 사이의 간격을 조절할 수 있습니다.
6. font-size
텍스트의 크기를 변경할 수 있습니다.
아래에서 위의 6가지를 모두 적용해 보았습니다.
See the Pen Untitled by KimJerry (@kimjerry) on CodePen.
Absolute unit, Relative unit
연습할 때는 px을 주로 사용하게 될겁니다. px은 절대 단위라고 하는데, 기기에 상관없이 항상 같은 크기를 가집니다. px로만 단위를 사용했다면 모니터가 바뀌는 순간 레이아웃이 엉망진창이 될 확률이 매우 높습니다. 그래서 비율을 단위로 가지는 상대 단위들이 몇몇 존재하는데, %, vh, vw, rem, em 같은 단위들이 있습니다. 혹시라도 웹사이트를 디자인할 때에는 최대한 이런 relative unit들을 사용해야 모니터가 바뀌어도 내가 원하는 레이아웃 그대로 나올 확률이 높습니다.
글꼴 변경하기
1. font-family: san-serif, serif, monospace;
글꼴을 변경할 수 있는 속성입니다. 위처럼 콤마를 이용해서 여러개를 쓰게되면 앞에 있는 san-serif가 우선 순위를 가지는 글꼴이 됩니다. 만약 오류가 생겨서 san-serif 글꼴을 적용할 수 없다면 바로 다음에 있는 serif 글꼴이 적용되게 됩니다.
사용할 수 있는 폰트는 미리 운영체제에 설치되어 있는 폰트들이 사용 가능합니다. 그러나 이렇게 되면 OS가 달라지면 쓸 수 없는 폰트가 생길 수도 있습니다. 실제로 애플 디바이스에만 존재하는 글꼴이 있죠. 그러면 어떻게 해야 할까요? 바로 Google font family를 사용하면 됩니다.
2. google font family
google font family는 문서에 embedded 로 글꼴을 설치하는 거라고 생각하면 됩니다. 실제로 설치하지는 않고 <link> 태그를 이용하여 링크 합니다. 설치를 하지 않고 브라우저에서 font를 바로 띄워주는 것이기 때문에 OS가 달라져도 내가 원하는 폰트를 그대로 보여줄 수 있습니다. OS에 상관없이 모두 설치되어 있는 글꼴을 쓰거나, google font family를 사용하는 것을 강력 추천합니다. 이런 안전한 폰트를 Web safe font 라고 합니다.
아래에 OS 별로 글꼴의 점유율을 볼 수 있는 사이트와 google font 사이트를 링크를 남겨드리겠습니다.
점유율을 확인할 수 있는 사이트.
CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.
Join to access discussion forums and premium features of the site.
www.cssfontstack.com
Google font.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글 폰트를 적용하기 위해 원하는 폰트를 먼저 선택합니다. 그리고 아래 사진처럼 화면 오른쪽 아래에 저런 창이 있는데 설명이 잘 나와 있네요. 그냥 복사해서 <head>안에 붙여 넣으면 됩니다. @import는 css파일에 추가하는 방법입니다. 저렇게 링크를 걸어주면 이제부터 선택한 글꼴을 해당 html 파일에서 자유롭게 사용할 수 있습니다.
