12/22 정리 CSS

Cascading Style Sheet

CSS는 웹페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. 더 나은 사용자 경험을 제공하기 위해

HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 한다.

UI(user interface) / UX(user experience) - 개발자는 사용자가 웹페이지를 사용하기 쉽고 접근성이 좋게 만들어야한다.

 

CSS 기본 문법

출처 : MDN

selector로 선택자를 지정하고 코드 블록 내부에서 style을 정한다.

 

CSS를 적용하는 방식에는 세가지가 있다.

⓵ HTML 파일에 외부 CSS 파일 연결

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

⓶ 같은 줄에서 적용하는 인라인 방식

<nav style="background: #eee; color: blue">...</nav>

⓷ 별도의 파일을 연결하지 않고 <style>요소 내부에 작성

<style>
    p {
      color: red;
    }
  </style>

텍스트 꾸미기

- color, background, font-family, font-size, line-height, text-align, ... 

- 필요할 때 찾아보기

 

절대단위 상대단위

절대단위는 고정된 크기를 말하고, 상대단위는 기준 대비 크기를 말한다.

글꼴 - 절대단위를 쓸때는 px을 주로 쓰고, 상대단위를 쓸 때는 rem을 주로 쓴다.

화면 - 반응형 웹에서는 디바이스 크기별로 다르게 css 적용한다.

           화면너비나 높이의 상대적 크기가 중요하면 vw, vh를 사용한다.

 

block, inline, inline-block 요소

박스의 구성요소

* margin을 음수로 주면 다른 element와 간격이 줄어든다.

* contents가 박스 크기를 벗어나면 overflow속성을 이용한다.

* 박스 크기 조정할 때 box-sizing: border-box 이용하는것을 권장한다.

 

 CSS Selector

* {}			 전체 선택자 선택
h1 {}			 태그(tag) 선택
#only{}			 Id 선택
.center{}		 Class 선택
a[href]{}		 같은 속성(attribute)을 가진 요소 선택
header > p{}		 자식 선택
header  p{}	 	 후손 선택
header ~ p{}		 형제 선택

a:hover{}		 	마우스를 위에 올렸을 때 선택
input:checked + span {} 	체크 상태일 때 선택
p:first-child {}		첫번째 자식요소 선택
input:not([type="password"]) {}	부정 선택자

* 다 외울 필요는 없고 필요할 때 마다 찾아서 쓰기