지난 시간에는 웹 구조를 다루는 HTML에 대해 학습하였다.
오늘은 웹에서 디자인 요소를 담당하는 CSS에 대해 학습해 볼 것이다.
CSS와 프론트엔드 개발
CSS란?
웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.
HTML이 웹 페이지의 구조를 담당한다면 CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 한다.
CSS를 왜 사용해야 하는가 ?
더 나은 사용자 경험을 제공하기 위해 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스를 제작해야한다. 이것이 CSS를 사용해야 하는 이유이다. 여기서 사용자인터페이스란 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에 사용자가 붙어 만들어진 용어이다. 예를 들어보자 . 트위터로 메세지를 보내려면 메세지를 키보드 인터페이스로 입력하고 마우스 버튼 모양의 인터페이스를 누르면 된다. 만약 이러한 인터페이스가 없이 CLI로 메세지를 전송하라고 하면 어떨까? 모든 트위터 사용자가 떠나갈 것이다. 따라서 UI는 사용자가 애플리케이션을 사용하게 하는데 매우 중요한 역할을 하고 , UI가 없으면 애플리케이션과 소통이 불가능하다는 것을 알 수 있다.
직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양입니다.
웹 프론트엔드 개발자는 웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당한다. 따라서 UI 제작은 프론트엔드 개발자의 기본 소양이다. 같은 콘텐츠라도 더욱 더 잘 보이게 레이아웃을 적절히 디자인하는 것 모두 프론트엔드 개발자가 해야 할 일이다. 아무리 훌륭한 내부 기능을 갖고 있더라도 UI가 없으면 소용이 없다.
이런 점이 나에게 있어서 프론트엔드 개발자로 걸을 수 있게 해주었다 !! 내가 만든 UI로 사용자들이 편리함을 느끼고 자주 사용하게 된다면 이만한 뿌듯한 일이 없을 거 같다.
따라서 프론트엔드 개발자가 되려면 ...
컴포넌트 기능별로 묶어서 제작
화면의 구성이나 배치 (레이아웃 디자인)
굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
위의 역량이 필수적이다.
본격적으로 실습을 통해 CSS에 대해 알아보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav>
<h4>This is the navigation section.</h4>
<ul>
<li>Home</li>
<li>Mac</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</nav>
<main>
<h1>This is the main content.</h1>
<p>...</p>
</main>
<aside>
<h4>This is an aside section.</h4>
<p>...</p>
</aside>
</div>
<footer>
<ul>
<li>개인정보 처리방침</li>
<li>이용 약관</li>
<li>법적 고지</li>
</ul>
</footer>
</body>
</html>기초 구조가 되는 HTML 파일이다 위의 결과를 확인해보면
아주 심플한 모습을 확인 할 수 있다.
여기서 CSS파일을 추가해준다면 ... ?
body {
margin: 0;
padding: 0;
background: #fff;
color: #4a4a4a;
}
header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #4a4a4a;
color: #f9f9f9;
}
nav {
background: #eee;
}
main {
background: #f9f9f9;
}
aside {
background: #eee;
}
다채롭게 변한 것을 확인할 수 있다.
그럼 어떻게 이렇게 페이지가 변할 수 있는지 CSS문법 하나씩 따져볼 것이다.
셀렉터는 요소 이름이나 id , 클래스를 선택하는 것이다.
셀렉터로 특정 요소를 선택했다면 중괄호 {} 안에서 이 요소에 적용할 내용을 작성한다.
요소에 적용할 수 있는 내용을 속성이라고 하고 속성에는 색상 , 글자 크기 등 다양한 속성이 존재한다.
속성에 적용할 적절한 값을 입력하여 스타일을 표현한다. 만약 색깔을 바꾸고 싶다면 color : red ; 를 입력해준다.
이 뜻은 색상을 빨간색으로 바꿔준다는 의미이다. 속성과 속성값의 끝에는 세미콜론 ; 을 붙여 속성끼리 구분한다.
하나의 속성만 존재할 때는 생략해도 되지만 세미콜론은 필수적으로 적어두는 것이 좋다 !
HTML에 작성된 body 부분을 꾸미고 싶다 !! 그렇다면 CSS 파일에서는
셀렉터로 body를 중괄호 안에는 꾸미고 싶은 속성과 속성값을 입력해준다.
위의 그림에서는 body 부분의 적힌 글자 색깔을 빨간색으로 폰트 크기는 30px로 꾸며준것이다.
CSS 파일 작성이 모두 완료되었으면 HTML 파일에 적용해야한다. 즉 두 파일을 연결해야 한다.
<link rel="stylesheet" href="index.css" /><link> 요소 : HTML파일과 다른 파일을 연결하는 목적
rel : 연결하고자 하는 파일의 역할이나 특징 ( CSS는 stylesheet 이므로 rel 속성에 stylesheet 를 추가해야함)
href : 파일의 위치 추가
CSS 스타일을 적용할 수 있는 3가지 방법
1. 인라인 스타일 - 같은 줄에서 스타일 적용
2. 내부 스타일 시트 - CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style>요소 내에 작성
3. 외부 스타일 시트 - CSS 파일을 따로 생성하여 HTML파일에 연결
-> 대부분은 외부 스타일 시트 사용을 권장합니다!
셀렉터로 선택을 할 때 만약 HTML 파일내의 똑같은 <h1> 요소가 여러개 존재하는데 특정한 <h1>만 꾸며주고 싶을 땐 id나 class 를 사용해야 합니다.
id와 class의 차이점도 반드시 알아두어야 합니다 .!
| id | class |
| #으로 선택 | .으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는데 사용 | 스타일의 분류에 사용 |
CSS에서 사용되는 속성들
| 글자 색상 | color |
| 배경 색상 | backgroud-color |
| 테두리 색상 | border-color |
| 글꼴 | font-family |
| 크기 | font-size |
| 굵기 | font-weight |
| 밑줄, 가로줄 | text-decoration |
| 자간 | letter-spacing |
| 행간 | line-height |
| 가로 정렬 | text-align |
| 세로 정렬 | vertical-align |
알아야할 몇 가지 단위
글꼴 크기 , 화면 크기 등 크기를 다룰 때는 크기의 단위가 무엇보다 중요하다.
크기의 단위는 절대 단위와 상대 단위 두 가지로 구분할 수 있다.
| 절대 단위 | px, pt 등 |
| 상대 단위 | %, em, rem, ch, vw, vh 등 |
1. 글꼴 사이즈를 정할 때
- 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 px(픽셀)을 사용한다.
- 일반적인 경우 상대 단위인 rem 을 사용한다. root의 글자 크기 즉 브라우저의 기본 글자 크기가 1rem이며 , 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다. (em 은 부모 엘리먼트에 따라 상대적인 크기가 변경되므로 계산이 어렵다)
2. 화면 사이즈를 정할 때
- 반응형 웹에서 기준점을 만들 때
반응형 웹은 디바이스의 너비에 따라 유동적인 레이아웃이 적용되는 웹사이트이다. 예를 들어 데스크탑에서 볼때와 스마트폰에서 세로 모드로 볼때 가로모드로 볼때 각각 다른점이 반응형 웹으로 제작 되었기 때문이다.
따라서 디바이스 별로 CSS를 다르게 적용해야 한다. 보통 px로 정한다. 아이폰 12 프로 맥스의 너비는 414px인데 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각해도 좋다.
- 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
이때에는 vw, vh를 사용한다. 웹 사이트에서 보이는 영역을 Viewport라고 하는데 vw는 viewport width, vh는 viewport height 를 의미하고 1vw는 보이는 영역 너비의 1/100dmf 1vh는 보이는 영역 높이의 1/100을 뜻한다.
즉 화면이 꽉 차있고 딱 떨어지게 스크롤 되는 사이트는 100vw, 100vh를 적용한 사이트이다.
다음 포스트에서는 박스모델과 CSS Selector 그리고 자기소개페이지 꾸미기 실습에 대한 글을 작성할 것이다.
오늘하루도 열공!!
'코드스테이츠44기 프론트엔드' 카테고리의 다른 글
| [코드스테이츠 44기 프론트엔드 6일차 회고록] javascript 타입과 변수 (0) | 2023.02.20 |
|---|---|
| [코드스테이츠 44기 프론트엔드 5일차 회고록] 계산기 목업 만들기 (0) | 2023.02.17 |
| [코드 스테이츠 44기 프론트엔드 4일차 회고록] Flexbox로 레이아웃 잡기 (0) | 2023.02.16 |
| [코드스테이츠 44기 프론트엔드 2일차 회고록] HTML의 기초부터 심화까지 (0) | 2023.02.14 |
| [코트스테이츠 44기 프론트엔드] SEB_FE_44 합격 그리고 OT (0) | 2023.02.13 |
