[클라우딩 어플리케이션 엔지니어링 TIL] 4일차

개발 공부/데브코스 TIL

[클라우딩 어플리케이션 엔지니어링 TIL] 4일차 - CSS

가욤이 2023. 12. 21. 20:41

Intro..

어제까지 HTML을 끝내고 오늘부터 CSS에 대한 강의를 들었다.

CSS 기본적인 문법부터 많이 쓰이는 속성들에 대해 학습했다.

오늘 학습한 내용

: CSS

CSS란, Cascading Style Sheets 약자이고 Cascading 뜻을 찾아보니 위에서 아래로 흐르는(상속하는)이라는 의미를 가지고 있었다.
우선 순위부터 적용되는 상속을 가진 스타일 시트라고 보면 될 것 같다.

기본 문법

선택자 { 속성1: 값1; 속성2: 값2 }

여러 속성을 지정할 수 있고 속성은 세미콜론(;)으로 구분한다.

div { font-size: 16px; letter-spacing: 5px; }

내부 CSS, 외부 CSS, inline CSS

내부 CSS
- <head> 태그 안에 <style> 태그를 사용해서 작성
외부 CSS
- 일반적으로 외부 CSS로 사용하며, 외부 스타일 파일을 불러온다.
- rel은 relation으로 관계를 뜻한다. 현 파일과 어떤 관계로 정의할 지 쓰면 된다. 스타일 시트이기 때문에 값으로 stylesheet를 씀

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

inline CSS
- 태그에 직접 스타일을 정의
- 유지보수가 어렵고 반응형 처리가 불가하기 때문에 사용을 지양한다.

<div style="font-size: 16px;">content</div>

CSS 주석 처리: /* */ (VSCode에서 cmd + / 단축키로 주석 처리할 수 있다.)

선택자

전체 선택자 (*)
- 모든 요소에 스타일을 적용할 수 있는 선택자
유형(태그) 선택자
- HTML 태그 이름
id, class 선택자
- id는 #으로 시작하고, class는 .으로 시작함
- 예시)

<div class="container" id="unique-container"></div>

.container {
  color: blue;
}

#unique-container {
  font-size: 20px;
}

속성 선택자
- 요소가 가진 속성을 선택자로 대괄호([ ])를 사용해서 선언할 수 있다.
- 속성과 값을 동시에 입력하면 값까지 같은 요소가 선택 됨
- 대괄호 앞에 태그명을 붙이면 좀 더 강력하게 선택자를 제한할 수 있다. ex) a[href] => a태그 중 href 속성을 가진 친구들만 선택
의사(가상) 클래스: 기존 "선택자"에 추가하는 특별한 상태를 선택하는 선택자
- :hover => 마우스 올렸을 때
- :focus => 키보드 탭 키로 이동 시 focus 되는
- :first=child => 리스트 첫 번째 요소만 선택
- :nth-child(n) => n번째 요소 선택
의사(가상) 요소: 기존 "선택자"에 추가하는 선택 요소 일부를 스타일링하는 선택자
- ::before => 요소 앞에 의사 요소 생성
- ::after => 요소 뒤에 의사 요소 생성
- <input>::placeholder => input태그의 'placeholder' 스타일링

상속

: 부모 요소의 스타일 값을 이어받아 자식 요소에 적용하는 것

div {
  color: red;
}

div h2 {
  color: inherit;  /* 부모 요소 스타일 값인 red를 가져온다 */
}

초기화

: 브라우저가 지정한 속성의 초기 값을 적용

em태그는 폰트가 이탈릭체인데 만약 font-style: initial로 지정할 경우 이탈릭체가 아닌 기본체로 변경되는 예상치 못한 값일 수도 있으니 초기화할 땐 주의하여야 한다.

div {
  color: red;
}

div h2 {
  color: initial; /* 초기값이 적용돼서 red가 아닌 브라우저 초기값이 지정 됨 */
}

결합자

자손 결합자
- 한 칸의 공백으로 자식 요소를 선택할 수 있다.

div span {
  color: red;
}

자식 결합자
- 앞 셀렉터의 직계 자식 요소 선택

div > span {
  color: red;
}

인접 형제 결합자
- 바로 옆에 위치한 형제 요소 하나만!

a + p {
  color: red;
}

일반 형제 결합자
- 모든 형제 요소 선택 (이전에 나온 형제는 영향 x)

a ~ p {
  color: red;
}

우선순위

: 작성 순서, 결합, 선택자에 따라 우선순위가 변경 됨.

<기본적인 우선 순위 (가장 낮은 것부터 높은 순)>

유형(태그) 선택자 및 의사(가상)요소
class 선택자, 속성 선택자, 의사(가상) 선택자
id 선택자
inline CSS

⚠️ !important

: important를 이기려면 더 많은 자손을 결합한 뒤 important를 선언해야 하는데 잘못될 경우 important 지옥에 빠질 수 있어서 지양하도록..!!

단위

고정 단위 (소수점 사용 X)

px
- 보통 웹 브라우저의 기본 폰트는 16px
pt (포인트)

상대 단위 (소수점 단위 사용 가능)

em
- 요소의 글꼴 크기에 상대적인 단위
- 합성 값
- line-height, letter-spacing 속성에 주로 쓰인다.

div { font-size: 16px; padding: 1em; } /* padding 16px */
div p { font-size: 2em; } /* font-size 32px */
div p span { font-size: 2em; } /* (16px*2em)*2em = 64px */

rem
- 합성을 회피하기 위해 만들어진 단위
- r(root) 기준 (=> html 태그)
- 레이아웃 작업 시 많이 쓰인다.

div { font-size: 16px; padding: 1rem; } /* padding 16px */
div p { font-size: 2rem; } /* font-size 32px */
div p span { font-size: 2rem; } /* font-size 32px */

%
- 부모의 크기에 따라 상대적으로 백분율

div { font-size: 32px; }
p { font-size: 50%; } /* font-size: 16px */

vw
- Viewport Width
- 화면의 너비에 따라 결정
- 1vw = 1%, 100vw = 100%
vh
- Viewport Height
- 화면의 높이에 따라 결정
vmin / vmax
- 화면에서 가장 작은/큰 크기 기준
- 웹 브라우저가 가로 1000px, 세로 100px인 경우 => 100vmin = 100px / 100vmax = 1000px

꾸미기

글꼴

font-size: 글자 크기 변경
font-family: 글씨체 변경
- 앞의 폰트가 지원하지 않는 문자가 나타나면 그 뒤 폰트 적용
- 마지막엔 'sans-serif'나 'serif'를 작성해서 모든 OS에 공통 사용되는 세리프체를 추가해 글꼴이 없는 경우를 대비해야 함

/* 주로 영어 글씨체가 앞에 오고 뒤에 한글 글씨체 */
div {
	font-family: 'Tahoma', '맑은 고딕', 'sans-serif';
}

font-weight: 글자 두께 변경
- 숫자는 100-900 (400 normal, 600 bold)
- 문자 표기는 normal, bold
- 부모 요소의 상대적 크기 (lighter, bolder)
color: 글자 색 변경
- 키워드 (red, blue...)
- RGB 함수형 (rgb(255, 255, 0))
- RGB 16진수(HEX 코드) (#ffffff)
text-align: 글자 가로 정렬 변경
line-height: 줄 간격 변경
letter-spacing: 자간 변경
- normal 기본
- 보통 em 단위 사용해서 부모 폰트 크기에 따라 같이 조절하게 됨

배경

background-color: 배경색
background-image: 배경 이미지
- url('이미지 경로')
background-repeat: 배경 이미지 반복
- repeat: 반복(기본값)
- repeat-x / repeat-y: x/y축 반복
- round: 반복되는 이미지가 잘리지 않게 늘려서/줄여서 반복
- space: 이미지가 잘리지 않게 고르게 분배
- no-repeat: 반복 X
background-size: 배경 이미지 크기 조정
- 너비 높이 (단일 값만 입력하면 너비 조절)
- contain: 이미지가 부모 크기에 맞게 비율에 맞춰 알아서 맞춰짐
- cover: 이미지의 제일 작은 크기가 부모의 크기의 비율에 맞춰지고 나머지 영역은 잘라낸다.
background-position: 배경 이미지 위치 제어
- 키워드 top, right, bottom, left, center
- CSS 단위 (10px 20px => x축 y축)
- 키워드 제어할 때 offset 지정 가능 right 10px center
background
- 위의 속성을 한번에 작성할 수 있는 단축 속성
- 작성 순서는 상관이 없으나, 위치/크기는 규칙에 맞게 함께 작성돼야 한다.

div {
	background: red url('이미지 경로') no-repeat right 15px center / contain;
}

마무리

CSS 강의도 듣고 라이브 특강도 들었다.

역시 라이브 특강이 집중이 더 잘된다. 유익한 내용도 많아서 좋았다.

점점 강의 내용이 많아져서 정리하는 데에 시간이 오래 걸리지만..ㅠ

나중에 기억 안날 때 찾아 보기도 편할 것 같고 미래를 위한 일이라고 생각하고 열심히 작성해야겠다.

내일 강의 끝나면 일주일 방학인데 알차게 보낼 수 있는 계획도 세워봐야겠다.

'개발 공부 > 데브코스 TIL' 카테고리의 다른 글

[클라우딩 어플리케이션 엔지니어링 TIL] 240102 - 반응형웹 (1)	2024.01.02
[클라우딩 어플리케이션 엔지니어링 TIL] 5일차 - CSS II (1)	2023.12.22
[클라우딩 어플리케이션 엔지니어링 TIL] 3일차 - HTML 콘텐츠 (0)	2023.12.20
[클라우딩 어플리케이션 엔지니어링 TIL] 2일차 - HTML 구조 (0)	2023.12.19
[클라우딩 어플리케이션 엔지니어링 TIL] 1일차 - OT 및 개발 환경 세팅 (0)	2023.12.18

현재글[클라우딩 어플리케이션 엔지니어링 TIL] 4일차 - CSS

웹/앱 개발, JavaScript 등등 개발 기록장

티스토리챌린지, supabase auth, supabase로그인, 프로그래머스 데브코스, 클라우딩 어플리케이션 엔지니어링, 자바스크립트개념, supabase인증기능, mapset, 오블완, 국비지원교육, 코딩부트캠프, react-native와 supabase, 리액트공통모달, 빅오표기법, 자바스크립트맵과셋, 리액트네이티브모달관리, 맵과셋차이, 모달컴포넌트구현, 자바스크립트알고리즘, 리액트모달관리,

Today :
Yesterday :

👩‍💻 가연의 개발자취 📚