[TIL] CSS 기초 정리 📙

dosilv·2021년 3월 7일

🎲 목표: 1주차 과제(자기소개 페이지 호스팅)를 위해서! 그동안 소홀히 했던 CSS와 친해져 보자~~

▶ 목차

🔎 CSS 선언 방식
🔎 선택자(Selector)
🔎 text와 관련된 속성들
🔎 layout과 관련된 속성들

🔎 CSS 선언 방식

1. Inline 방식

html 시작태그 내에 style attribute를 추가하여 "property: value;" 형태로 선언하는 방식

따로 생성자가 필요없으며, 유지보수가 어려워 권장하지 않음
<p style="color: blue;">나는 파란 글씨!</p>

2. Embedded 방식

html <head> 부분에 작성하는 방식
<style>
  p {
    color: green;
  }
</style>

3. External 방식

<head> 부분에 <link>로 외부 CSS를 연결하여 사용하는 방식
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./main.css">
</head>

🔎 선택자(Selector)

선택자란? 스타일 적용 범위를 선택하는 도구!

📌 기본 선택자(Basic selectors)

* (Universal selector)
* { color: pruple; }
▶ 전체 요소에 적용

태그명 (Type selector)
h1 { text-align: center; }

.클래스명 (Class selector)
.container { font-weight: bold; }

#id명 (ID selector)
#fruits { color: red; }

[속성명] (Attribute selector)

[attr]: 해당 속성을 가진 모든 요소

[attr="value"]: 해당 속성, 값이 일치하는 요소

[attr^="value"]: 해당 속성의 값이 'value'로 시작하는 요소

[attr$="value"]: 해당 속성의 값이 'value'로 끝나는 요소

[attr*="value"]: 해당 속성의 값에 'value'가 포함된 요소
[href^="http"] { text-decoration: underline }
  ▶ href 속성의 값이 'http'로 시작하는 요소들에 적용
[class$="one"] { font-size: 16px }
  ▶ class 이름이 'one'으로 끝나는 요소들에 적용

📌 복합 선택자(Combinators)

A B (Descendant combinator)

A 요소 내에 위치한 모든 B 요소

A>B (Child combinator)

A 요소의 바로 아래 자식인 B 요소

A~B (General sibling combinator)

같은 부모를 가지면서 A를 뒤따르는 모든 B 요소

A+B (Adjacent sibling combinator)

같은 부모를 가지면서 A 바로 뒤에 위치하는 B요소

📌 가상클래스 선택자(Pseudo classes selectors)

:link 방문하지 않은 링크일 때
:visited 방문한 링크일 때
:hover 마우스가 올라와 있을 때
:active 클릭된 상태일 때
:focus 포커스가 들어와 있을 때

🔎 text와 관련된 속성들

color

keyword (색상명)

(+) 파스텔 컬러 💖

rgb 색상

#00000(black), #ffffff(white), #c0c0c0(silver) 등

font-size

pixel

브라우저의 크기에 상관없이 독립적이고 정확한 값

(특히 모바일과 데스크탑 간에) 호환성 문제가 발생할 수 있음😢

keyword

xx-small, x-small, small, medium, large, x-large, xx-large

사용자의 기본 폰트 크기에 따라 상대적으로 정해짐

em

상위요소의 폰트 크기에 따라 정해지는 동적인 값

상위요소의 폰트 크기=1em이 됨 (상속에 따라)

기본적으로 1em=16px

rem

최상위요소(html)의 폰트 크기를 기준으로 1rem

em의 상속 중첩 문제를 해결할 수 있음!😀

*padding 등에도 em, rem을 사용해서 유연한 페이지를 구현할 수 있다!

text-align

left / right / center / justify / inherit

vertical-align

인라인 요소나 테이블 셀 내에서의 수직정렬 설정 (블록레벨 요소에는 영향을 미치지 않음!)

baseline / sub / super / text-top / text-bottom / middle / top / bottom

정확한 차이는 여기 참고!

text-decoration

overline: 윗줄

line-through: 취소선

underline: 밑줄

underline overline: 위아래로 줄

font-variant

normal: 기본값

small-caps: 소문자를 일반 대문자보다 작은 대문자로 만듦!

text-shadow

값: offset-x(px) | offset-y(px) | blur-radius(px) | color (혹은 color가 맨 앞에 위치해도 됨!)

그 외! (필요할 때마다 구글링~~)
font-family
font-style
font-weight
text-indent
text-shadow
text-transform
letter-spacing

🔎 layout과 관련된 속성들

display

block / inline / none / flex

⭐ {display: flex} 파헤치기

flexbox는 반응형 웹 디자인 시 매우 중요한 개념!

일반적으로 하나의 container와 다수의 item으로 구성
[html]
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
container에 설정할 속성

display

flex (필수)

flex-direction

row (defalut): 좌에서 우(가로)로 배치
▶ 이 경우 main-axis=가로, cross-axis=세로

column: 위에서 아래(세로)로 배치

justify-content : 가로 배치방식 (main-axis가 가로일 경우)

flex-start (default): 좌측 배치

flex-end: 우측 배치

center: 가운데 배치

space-between: 사이사이 공백

space-evenly: 사이사이+양끝 공백

align-items : 세로 배치방식 (cross-axis가 세로일 경우)

stretch (default): container height만큼 차지 (container height 설정 필요)

flex-start: 위에 배치

flex-end: 아래에 배치

center: 가운데 배치

item에 설정할 속성

flex : main-axix 상에 공백이 있을 때 각 item이 공백을 얼마나 점유할지 지정

예를 들어 flex item 중 하나에 {felx: 1;}을 지정하면 해당 item이 모든 공백을 점유하며, 각 item에 1을 지정하면 같은 비율로 공백을 점유함

visibility

visible / hidden

※ {display: none} 과 {visibility: hidden}의 차이점: hidden은 컨텐츠만큼 빈공간으로 표시됨!

position

static
일반적인 문서 흐름에 따라 배치
top, right, bottom, left 속성이 아무런 효력을 갖지 않음

relative
자신의 static 위치를 기준으로 top, right, bottom, left에 의한 상대적 위치에 배치

absolute
일반적 문서 흐름과 관계없이, 가장 가까운 조상 엘리먼트를 기준으로 상대적 위치에 배치 (계산이 까다로우므로 사용시 주의 필요!)

fixd
스크린의 뷰포트(viewport: 사용자에게 보여지는 영역)를 기준으로 고정된 위치에 배치 (스크롤해도 움직이지 않음!)

sticky
static처럼 문서의 일반적 흐름에 따라 배치되나 스크롤이 임계점에 다다르면 fixed와 같이 화면에 고정됨
★top 속성 설정 필요!★

float

이미지나 width가 정해진 박스 등을 다른 컨텐츠와 어떻게 배치할지 설정

left / right / none(default: block으로 처리되는 듯로 처리되는 듯)

overflow

visible(default): 그냥 튀어나감

hidden: 넘치면 안 보임

scroll: 스크롤 바 생성 (항상)

auto: 넘치면 스크롤 바 생성
*overflow가 작동하기 위해서는 블록레벨 컨테이너의 높이(height or max-height)를 설정하거나 white-space를 nowrap으로 설정해야 함!

🙇‍♀️참고한 자료
CSS selectors - CSS: Cascading Style Sheets | MDN
CSS3 Selector | PoiemaWeb
CSS 플렉스박스(Flexbox) 이해하기 | Engineering Blog by Dale Seo

dosilv

DevelOpErUN 성장일기🌈

이전 포스트

[TIL] Python 정규표현식(Regular Expression) 정리 📘

다음 포스트

[WEEK1] 자기소개 페이지 호스팅

2개의 댓글

GGEON YANG

2021년 3월 9일

멋지십니다!

1개의 답글