section1 - unit4_CSS

전형호·2022년 12월 22일

CSS 기초

•CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
•CSS는 좋은 사용자 경험을 제공하기 위한 도구
•사용자 인터페이스(UI; user interface)
     •인터페이스(interface): 컴퓨터와 교류하기 위한 연결고리
     •컴퓨터에 일반 사용자가 쉽게 사용할 수 있는 인터페이스 앞에 "사용자"를 붙여 사용자        인터페이스(UI)라고 부름
     •중요한 Ui를 만드는 것이 프론트엔드 개발자의 역할
•좋은 사용자 경혐(UX; user experience)은 직관적이고 쉬운 UI에서 나옵니다.

•프론트엔드 개발자가 되려면 필요한 역량

•c컴포넌트 기능별로 묶어서 제작
•화면의 구성이나 배치(레이아웃 디자인)
•굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

실습: CSS로 기본적인 스타일링 하기

•index.html

•index.css

•layout.css

•결과

•CSS스타일을 적용할 수 있는 방법 3가지

•같은 줄에서 스타일을 적용하는 인라인스타일

•<style>요소 내에 작성하는 내부 스타일 시트(권장하지는 않음)
•외부 스타일 시트

기본적인 셀렉터(selector)

•id로 이름 붙여서 스타일링 적용하기 : id가 있는 요소를 선택할 때는 #를 사용
•class로 스타일을 분류하여 적용하기 : class는 #이 아닌 .을 사용

여러 개의 class를 하나의 엘리먼트에 적용하기

•여러 class를 하나의 요소에 적용하기 위해서는, 띄어쓰기로 적용하려는 class들의 이름을 구분합니다.
•요소를 만들거나, 요소에 스타일링을 적용할 때는 항상 이름과 목적이 일치하는지 잘 살펴보세요.

id와 class의 차이점

CSS 텍스트 꾸미기

색상

•글자의 색상을 변경하는 속성은 color
•속성에 삽입할 수 있는 값은,HEX 또는 주요 색상의 이름을 사용할 수 있음.

글꼴

•글꼴의 속성은 font-family
•글꼴의 이름은 따옴표를 붙여서 적용할 수 있습니다.
•fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책

크기

•글자의 크기를 변경하기 위한 속성은 font-size

기타 스타일링

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

정렬

•가로로 정렬할 경우의 속성은 text-align, 유효한 값으로는left,right,center,justify
•세로로 정렬할 경우의 속성은 vertical-align, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 함.

CSS 알아야 할 몇 가지 단위

•절대 단위:px, pt 등
•상대 단위:%,em,rem,ch,vw,vh 등

글꼴 사이즈를 정할 때

•기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는경우: px을 사용함
•일반적인 경우: 상대 단위인 rem을 추천함

화면 사이즈를 정할 때

•반응형 웹에서 기준점을 만들 때: 디바이스 크기를 나누는 기준을 보통px를 사용
•화면 너비나 높이에 따른 상대적인 크기가 중요한 경우:vw,vh를 사용

CSS 박스모델

•줄 바꿈이 되는 박스: block 박스
•줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스:inline 박스
•줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 박스: inline- block 박스
•block요소의 대표적인 예: <div> , <p>
•inline요소의 대표적인 예: <span>

세 가지 박스의 특징

CSS 박스를 구성하는 요소

border(테두리)

•각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듦
•테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color): border 속성에 추가할 수 있는 세부속성

margin(바깥 여백)

•각각의 값은 top,right,bottom,left로 시계방향이다.
•값을 하나만 넣으면 모든방향의 바깥 여백에 적용

padding(안쪽 여백)

•padding은 border를 기준으로 박스 내부의 여백을 지정함. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left
•콘텐츠와 테두리 사이의 간격은 padding

박스를 벗어나는 콘텐츠 처리

•박스의 height 속성에 콘텐츠가 차지하는 공간보다 작은 값을 지정하세요.
•overflow: hidden;를 사용하면 박스의 크기를 벗어나는 콘텐츠를 보이지 않게 할 수 있음

CSS Selector

기본 셀렉터

•전체 셀렉터는 문서의 모든 요소를 선택

•태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택, 복수로도 선택 가능

•ID 셀렉터는 #id로 입력하여 선택 가능

•class 셀렉터는 .class로 입력하여 선택, 같은 class를 가진 모든 요소 선택

•attribute 셀렉터는 같은 속성을 가진 요소를 선택

자식/후손/형제 셀렉터

•자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택(후손 셀렉터와의 차이를 반드시 알고 있어야 함)

•후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택(자식 셀렉터와의 차이를 반드시 알고 있어야 함)

•형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택

•인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택