4/13 [CSS] 기초

kyo young, SEO·2023년 4월 16일

CSS 블로깅 프론트엔드

SEB_FE_45_서교영

목록 보기

3/3

Chapter 1 : CSS 기초

CSS (Cascading Style Sheets)

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어입니다.

CSS는 좋은 사용자 경험을 제공하기 위한 도구입니다.
사용자 인터페이스(UI; user interface) : 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스 앞에 “사용자"를 붙여 사용자 인터페이스, UI라고 부릅니다.
직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양입니다.
- 좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나옵니다.

CSS 내용 분해하기

CSS 파일 추가

< link> 요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용합니다.
< link> 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징을 나타냅니다.
href 속성에는 파일의 위치를 추가해야 합니다.

기본적인 셀렉터 (selector)

id로 이름 붙여서 스타일링 적용하기
class로 스타일을 분류하여 적용하기
여러 개의 class를 하나의 엘리먼트에 적용하기

📌 id와 class 의 차이점

CSS 개념

색상 : color
ex) background-color : 배경색상, border-color : 테두리색상

글꼴 : font-family

크기 : font-size

굵기: font-weight

밑줄, 가로줄: text-decoration

자간: letter-spacing

행간: line-height

정렬

가로로 정렬 : text-align
유효한 값 : left, right, center, justify (양쪽 정렬)

세로로 정렬 : 복잡

알아야 할 단위

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

-글꼴 사이즈를 정할 때
1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우: px(픽셀)
2. 일반적인 경우: rem

-화면 사이즈를 정할 때
1. 반응형 웹(responsive web)에서 기준점을 만들 때 : px
2. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 : vw(viewport width) , vh(viewport height)

Chapter 2 : 박스모델

박스모델 기초

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

줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부릅니다. 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있습니다.

block 요소의 대표적인 예는 < div>, < p> 입니다.
inline 요소의 대표적인 예는 < span>입니다.

박스를 구성하는 요소

border (테두리)
border 속성에 적용된 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)입니다. 괄호 안에 적힌 것들이 바로 border 속성에 추가할 수 있는 세부 속성입니다. 이외에도 border-style mdn과 같은 키워드를 구글에 검색하면, 테두리 스타일에 대한 다양한 세부 속성을 찾아볼 수 있습니다.
margin (바깥 여백)

각각의 값은 top, right, bottom, left로 시계방향입니다.
값을 두 개만 넣으면 top과 bottom이 10px, left 및 right가 20px 입니다.
값을 하나만 넣으면 모든 방향의 바깥 여백에 적용됩니다.

위와 같은 규칙은 padding에도 동일하게 적용됨.

바깥 여백에 음수 값을 지정할 수 있습니다. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어듭니다. 극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있습니다.

padding (안쪽 여백)
padding은 border를 기준으로 박스 내부의 여백을 지정합니다. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left입니다.

배경색이나 border를 적용하면, 안쪽 여백을 더욱 선명하게 확인할 수 있습니다.

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

박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나옵니다. 그러나 이런 상황을 원하는 사람은 거의 없을 겁니다. 이렇게 콘텐츠가 박스를 뚫고 나가는 경우에는 박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만듭니다.

overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성하도록 합니다. 다른 경우에는 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 수 있습니다. 이때에는 overflow 속성에 hidden 값을 사용합니다. overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤 하거나 세로 방향으로 스크롤 할 수 있게끔 지정할 수 있습니다. overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수 있습니다.

박스 크기 측정 기준

처음 레이아웃 디자인을 할 때 가장 많이 하는 실수가 있습니다. 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우입니다. 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있습니다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듭니다.

이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다.