CSS 약간의 html을 곁들인

Yein Moon·2021년 6월 21일

개발일지

목록 보기

7/21

`<!DOCTYPE html>` 이란..

angle bracket으로 둘러져있지만 tag가 아니라 statement이다.
HTML5의 문서 타입 선언에 해당한다. 이전 버전들에 비해 가장 심플하다.
HTML 버전이 계속 바뀜에 따라 tag가 생기고, 사라지고, 의미가 바뀌는 경우도 있다. 따라서 브라우저에 이 html 파일이 어떤 표준에 따라 작성된 것인지 알려주기 위해 Doctype을 선언해준다. *지금은 단일화되었다!

❗️ c.f. 익숙해지고싶은 VScode 단축키

1. HTML에 CSS파일 추가하기

CSS는 Cascading Style Sheets라는 뜻이다.
여러개의 각기다른 style sheet이 폭포 떨어지듯 하나의 document에 동시에 적용되므로!

selector{
	property: value; // declaration
	property: value;
        }

인라인 스타일
내부 스타일 시트
✔️ 외부 스타일 시트 : <link rel="stylesheet" href="index.css" />

c.f. 관심사 분리(SoC, Seperation of Concerns)
CSS을 외부 스타일 시트로 관리하면 관심사 분리를 통해 코드를 단순화 시키고 독립적인 개발과 유지보수에 높은 수준의 자유를 부여한다. (캡슐화, 관심있는 하나의 관심사의 코드 부분을 개선하거나 수정할 수 있다!)

c.f. 궁금했던 점
다중 class를 포함하는 element는 html 상 작성된 순서가 아닌, CSS를 확인해야한다!

<div class="hello world">hello world</div> // 뒤에 있는 .hello를 받아 color: blue의 색상을 가진다.

.world{color: yellow;}
.hello{color: blue;}

2. 텍스트

fallback
디바이스, 브라우저에 따라 특정 설정을 지원하지 않는 경우 최소한 이거라도..의 의미로 지정해두는 대비책
단위

절대 단위: px, pt 등
- 사용자 접근성이 불리하다.
- 특히, 모바일처럼 작으면서 고해상도인 디스플레이에 부적합하다. (같은 1px이더라도 모니터보다 upscale 되어 흐리게 보일 수 있음)
- 인쇄와 같이 사이즈가 고정된 경우 유리하다.
상대 단위: %, em, rem, ch, vw, vh 등
- 일반적인 경우 rem을 사용하자.
- root(브라우저 기본 크기)를 기준으로 한다.

3. 박스

*{box-sizing: border-box;}
box의 너비를 지정할 때 최종 너비가 width+padding+margin+border가 되는 일이 없도록, width를 너비로 만들어준다!
overflow
컨텐츠가 box를 벗어날 때, auto/hidden 등으로 스크롤 화면으로 보여줄지 잘라버릴지 조정할 수 있다.