[리뷰] CSS 기초

CSS (Cascading Style Sheets)

HTML로 웹 페이지의 구조를 잘 세우고 나서, 더 나은 User Experience 를 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하며 웹 페이지를 완성해야 좋은 웹 개발자가 될 수 있다.

 

사용자 인터페이스(UI; user interface)

사용자 인터페이스 또는 유저 인터페이스(영어: user interface, UI)는 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. 사용자 인터페이스는 사람들이 컴퓨터와 상호 작용하는 시스템이다. 사용자 인터페이스는 물리적인 하드웨어와 논리적인 소프트웨어 요소를 포함한다. 사용자 인터페이스는 크게 다음과 같은 수단을 사용한다.

• 입력: 사용자가 시스템을 조작할 수 있게 한다.
• 출력: 시스템이 사용자가 이용한 것에 대한 결과를 표시한다.
• 삭제: 시스템이 사용자가 잘못한것을 삭제한다.

사용자 인터페이스를 판단하는 기준으로 사용성이 있다. 좋은 사용자 인터페이스는 심리학과 생리학에 기반하여, 사용자가 필요한 요소를 쉽게 찾고 사용하며 그 요소로부터 명확하게 의도한 결과를 쉽게 얻어 낼 수 있어야 한다.

 

출처: 위키백과 https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9A%A9%EC%9E%90_%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4

사용자 인터페이스 - 위키백과, 우리 모두의 백과사전

사용자가 애플리케이션을 사용하게 하려면 UI가 꼭 필요하다. 그 중요한 UI를 만드는 역할이 프론트엔드 개발자이다.

 

프론트엔드 개발자가 되기 위해 웹 페이지를 제작하기 위해서는 다음과 같은 역량이 필요하다.

• 컴포넌트 기능별로 묶어서 제작
• 화면의 구성이내 배치(레이아웃 디자인)
• 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
• + 웹 디자인에 필요한 역량도 갖추면 좋다.

정리하면 직관적이고 쉬운 UI를 제작해서 사용자와 소통할 수 있는 웹 페이지를 제작하는 것이 프론트엔드 개발자가 필수로 가져야 할 역량이다. 

 

CSS 내용 분해

css 내용 분해

셀렉터는 태그 이름이나 id, class 를 선택한다. 셀렉터로 특정 요소를 선택했다면 중괄호 안에 이 요소를 적용할 내용을 작성한다.  이를 속성이라고 한다. 속성에는 색상, 글자 크기 등이 있다. 속성에 적용할 적절한 값을 입력하여 스타일을 표현하고, 세미콜론을 붙여 속성끼리 구분한다. 

 

CSS 파일 추가

HTML과 CSS 파일을 만들었으면 그 두개를 합치는 과정이 필요하다. HTML파일에 CSS파일을 적용하는 방법은 다음과 같다.

<link rel="stylesheet" href="index.css" />

여러개의 css파일을 한 html파일에 적용할 수도 있다.

 

색상 

• color: red;

글꼴

• font-family: "SF Pro KR", "MalgunGothic", "Verdana";

google fonts를 사용해서 

크기

• font-size: 24px;

기타 스타일링

• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

정렬

• text-align: (left,right,center,justify) 

절대단위, 상대단위

절대 단위: px, pt 등

상대 단위: %, em, rem, ch, vw, vh 등

 

상대 단위인 rem, em

root의 글자 크기, 브라우저의 기본 글자 크기가 1rem이며, 두배로 하고 싶으면 2rem, 작게 하려면 0.8rem 등으로 한다. em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다. rem은 root의 글자 크기에 따라서만 상대적으로 변한다.

 

vw, vh : viewport width, height

1vw는 보이는 영역 너비의 1/100을, 1vh는 보이는 영역 높이의 1/100을 뜻한다. 

---

 

박스모델

줄 바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline,inline-block)

 inline박스는 width, height 속성이 적용되지 않아 inline-block을 사용한다.

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능

border(테두리)

• border : 1px solid red;

margin(바깥 여백), padding(안쪽 여백)

• margin : 10px 20px 30px 40px;(상 우 하 좌 시계방향대로)
• margin: 10px 20px; (상하, 좌우 각각)
• margin: 10px; (전체)
• 음수로 적용해서 겹치게 하는 것도 가능하다

content-box는 박스의 크기를 측정하는 기본값이다. 하지만 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장한다.

CSS 셀렉터

연습만이 살길이다.

https://flukeout.github.io/

CSS Diner