CSS에 대해 알아보자

728x90

CSS란?

Cascading Style Sheetd 의 약자로, HTML 문서에 디자인을 입혀줍니다.

⭐️ cascading이란

스타일 우선순위, 스타일 상속이라는 두가지의 원칙을 통해 어떤 요소에 스타일을 적용할지 결정하는 것
CSS는 중복 선언을 허용하며 중복되는 경우 아래와 같은 우선순위로 처리

속성값 뒤에 !important를 붙인 속성
HTML에서 style를 지정한 속성
#아이디로 지정한 속성
.클래스, :추상클래스로 지정한 속성
요소 이름으로 지정한 속성
상속된 속성

class와 id의 차이점

문서내에서 유일
단, 여러 번 선언해도 오류가 나거나 렌더링되지 않거나 하지 않는다.

class

문서내에서 중복 사용 가능
CSS 프레임워크 및 라이브러리들도 대부분 클래스를 기반으로 작동

⭐️ css, sass, styled-component 차이점

전통적인 CSS가 아닌 다른 방법을 써야하는 이유

리액트에서는 컴포넌트 아키텍쳐를 이용하기 때문에 컴포넌트 간의 의존성을 최소화, 내부 응집도 최대화하는게 좋음

파일들이 빌드되면서 css파일들이 각각 갖고있던 클래스들 덮어 씌워지고 클래스명이 충돌되며 덮어씌워지는 단점이 있음

=>css-module과 css-in-js 사용

css-module

클래스 이름에 hash값이 붙어 고유한 값으로 인식해 클래스명이 충돌하는 단점을 극복

간결한 클래스명을 이용해서 컴포넌트 단위로 스타일을 적용할 때 좋음

사용법 : 일반 Style.css 파일을 Style.module.css 파일로 변경

Sass

문법이 불편해서 막상 적용하기 힘든 부분들을 개선하고자 SASS/SCSS 등장

특징 : 변수의 사용, 조건문과 반복문, Import, Nesting, Mixin, Extend/Inheritance

SCSS

css 전처리기의 한 종류

특징 : 중첩(nesting), 변수 선언, 연산자

CSS-IN-JS (Styled-components)

CSS코드를 자바스크립트 내에서 관리하기 때문에 내부응집도 상승, 동적으로 CSS를 변경 용이

Styled Components 장점

CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성
CSS-in-JS는 JavaScript 환경을 최대한 활용
자바스크립트와 CSS 사이의 상수와 함수를 공유
현재 사용 중인 스타일만 DOM에 포함

Styled Components 단점

러닝 커브(Learning Curve)
새로운 의존성 발생
별도의 라이브러리 설치에 따른 번들 크기 증대
CSS에 비해 느린 속도

CSS를 어떻게 HTML에 적용할까?

inline style
head 태그 안에 style 태그 안에 작성
별도의 css 파일을 만들고 head 태그에 import

⭐️⭐️⭐️CSS의 BOX Model

Box Model 이란?

브라우저에 배치하기 위한 규칙으로 모든 HTML 요소는 박스(box) 모양으로 구성

HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분

content : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.
border : 태그의 테두리 영역
margin : 태그의 테두리 밖 영역, 음수값, auto 사용 가능
padding : 태그의 테두리 안, 내용의 밖 영역

종류

W3C 모델 : content 영역이 width에 해당
IE 모델 : content + padding + border

box-sizing: border-box;

box-sizing : 요소가 width를 계산 할 때 어디까지 포함할지 설정하는 속성
기본값은 content-box이며 컨텐츠 크기만 고려
box-sizing: border-box로 설정시 width 값에 border와 padding 값도 포함 ->디자이너와 소통 용이

px, em, rem, vh, vw 단위

가장 기본적으로 사용되는 단위 -> 다른 단위들의 기준

이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값

부모 요소를 기준으로 자식 요소의 크기를 정하는 것

ex) 부모가 10px 일때 자식이 1em이면 10px

rem :

root em의 약자로 가장 최상단(root)이 기준

최상위 태그 html에 정의된 사이즈를 기준으로 배수하겠다는 것

모바일 환경에서 접근성을 위해 글자 크기를 키우거나 그리드 시스템에 사용

vh(verticah height),vw(vertical width)

vieport (화면의 크기)의 높이와 너비에 비례

반응형 페이지를 만들 때 아주아주 유용

1vh는 실제 높이값의 1/100 => 즉 눈에 보이는 화면 높이가 1000px일 때 1vh는 10px

reset.css, nomalize.css

reset.css

브라우저마다 다르게 설정된 요소의 기본 스타일링을 모두 초기화하는 방식
크로스 브라우징을 위해 필요한 속성을 임의로 지정하여 파일로 통합

nomalize.css

사용하기 좋은 기본 값들은 초기화하지 않고 유지
=> reset CSS보다 성능 면에서 유리

float

요소를 떠다니도록(흐르도록?) 만들어주는 속성
이미지와 텍스트가 나란히 있는 상태에서 이미지에 float 속성을 주면 텍스트가 이미지를 감싸는 형태
최신 레이아웃 기술(Flexbox, grid)이 나오기 전에는 주로 레이아웃 배치를 위하여 사용
단, 최신 레이아웃 기술의 크로스브라우징 이슈로 인해 여전히 float로 레이아웃 사용 중

클리어링(Clearing) 기법

클리어링 기법이란?

자식에 float 속성을 주는 경우 자식이 부모 요소의 높이를 인지하지 못하는 문제가 있어서 이를 해결하고자 클리어링 기법을 이용

부모 > 자식 관계에서 자식에 float가 추가되어있다면 부모에 아래 방법으로 문제를 해결 가능

1. overflow:hidden 설정

2. height 값 설정

3. 요소 아래 clear: both 속성 추가

4. 가상 요소(::after, ::before)를 이용하여 clear: both 속성 추가

.parent { overflow: hidden; }
.parent::after { content:""; display:block; clear:both; }
.clear { clear:both; }

display 속성

요소를 어떻게 보여줄지 레이아웃을 결정하는 속성

none

요소를 렌더링하지 않도록 설정
visibility 속성을 hidden으로 설정한 것과 달리 영역도 없음

block

해당하는 영역의 줄을 전부 차지하는 element 속성
가로 영역을 모두 차지하며 항상 줄 바꿈이 되어 새로운 라인에서 시작
width와 height 속성 지정 가능
예시 : <header>, <footer>, <p>, <li>, <table>, <div>, <h1>

inline

해당하는 영역을 차지하고 줄바꿈 없이 연속되어 배치
width와 height, 여백을 지정할 수 없으며 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위
예시 : <span>, <a>, <img>, <input>,<label>

inline-block

요소 자체는 inline 요소처럼 동작하지만 줄바꿈이 되지 않고 해당 요소 내부에서는 블록 요소처럼 동작
inline element에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능

flex

아이템들을 가로 방향으로 배치할 수 있는 방식
요소의 크기가 불문명하거나 동적인 경우에도 각 요소를 정렬할 수 있는 효율적인 방법을 제공
Flex의 속성은 컨테이너에 적용되는 속성, 아이템에 적용되는 속성으로 나뉘어짐
inline을 썼을 때와 비슷한 결과, 배경은 block을 썼을 때처럼 꽉 찬 형태

grid

Flex와는 다르게 2차원으로 배치하는 방식
column과 row의 비율이나 크기를 지정
예시 : grid-template-rows(가로에 배치할 셀들의 비율/크기) , grid-template-columns(세로로 배치할 셀들의 비율/크기)
단위 중 fr은 fraction의 약자로 숫자 비율대로 트랙의 크기를 나누는 것

Flex와 Grid의 차이점

1. Flex

주로 단일 축 방향의 레이아웃을 구성하는 데 사용
주로 수평 방향으로 레이아웃을 정렬
아이템들의 크기가 자유로워 유동적으로 변할 수 있습니다.
유동적인 레이아웃 변화를 구성에 적합

2. Grid

2차원 그리드 시스템을 구성하는 데 사용
수평과 수직 방향으로 모두 레이아웃을 정렬
아이템들의 크기를 미리 정의하여 각 셀의 크기를 일정하게 유지
미리 정의된 2차원 그리드 구조를 유지하기 때문에 레이아웃 변화가 적은 경우에 적합

table

요소를 table의 성질을 갖게함

display : table-row // tr 요소처럼 표현하기
display : table-column // col 요소처럼 표현하기
display : table-cell // td 요소처럼 표현하기
display : table-caption // caption요소처럼 표현하기

목록과 관련된 태그

ul : 순서가 없는 목록 태그.
ol : 순서가 있는 목록 태그. 앞에 숫자가 표시됩니다.
li : ul 또는 ol 태그 안에 들어가는 태그입니다.

테이블과 관련된 태그

th : table head 의 약자로, 표의 제목을 쓰는 역할. 굵은 글씨체에 중앙정렬.
tr : table row 의 약자로, 가로줄을 만드는 역할.
td : table data 의 약자로, 셀을 만드는 역할.

⭐️ ⭐️ ⭐️ position

HTML에서 element를 배치하는 방법을 지정하는 속성

static(기본 값)

element에 position을 지정하지 않았을 때 기본으로 적용되는 값
static일 경우 top, right, bottom, left, z-index 속성들을 써도 변화 ✕

relative

원래 위치 기준으로 얼마나 떨어져 있는 위치에 배치할 지 결정
static과 마찬가지로 element가 문서의 일반적인 흐름에 따라 배치
relative가 적용된 요소의 배치만 변경되고 다른 부분의 배치에는 영향을 주지 않음
relative를 사용시 글자가 겹쳐질 수 있음
static과 다른점 : element가 자신의 static 위치에서 top, right, bottom, left와 같은 속성에 의한 상대적인(relative) 위치에 배치

absolute

element가 문서의 일반적인 흐름을 따르지 않으며 가장 가까운 위치에 있는 조상 element (static 이 아닌)에 상대적 위치로 배치
조상 element 없으면 body기준으로 됩니다.

sticky

스크롤을 내려도 고정된 위치에 있도록 배치
element가 문서의 일반적인 흐름에 따라 배치되며 top, right, bottom, left 속성들의 값을 기준으로 flow root 및 해당 element를 포함하는 containing block에 대한 상대적(relative) 위치에 배치
relative와 마찬가지로 다른 요소들에 영향을 주지 않음

fixed [고정]

absolute와 마찬가지로 element가 문서의 일반적인 흐름을 따르지 않음
스크린의 뷰포트(웹페이지가 사용자에게 보여지는 영역)를 기준으로 한 위치에 배치
스크롤되어도 움직이지 않는 고정된 자리

fixed와 sticky의 차이점
1. fixed

문서의 흐름 을 따르지 않고 뷰포트를 기준으로 배치가 되는 반면
요소들이 겹쳐보일 수 있는 상황이 있음

2. sticky

문서의 흐름을 따르면서 containing box를 기준으로 상대적인 위치에 배치
sticky를 쓰면 요소들이 겹쳐보이지 않음

z-index

어느 객체가 앞으로 나오고 뒤에 나올지 배치 순서를 결정
값이 클 수록 상단에, 값이 작을 수록 하단에 위치
position 속성이 적용된 요소에서만 작동

CSS 스프라이트(CSS Sprites)

CSS Sprite 기법은 여러 개의 이미지를 하나로 모아 이미지 파일의 요청 횟수를 줄이는 방법

=> 3개의 이미지를 하나로 압축해 용량을 줄이는 효과

대체 이미지(Image Replacement)

대체 이미지를 사용하는 이유

이미지 로드가 느릴 때
이미지 로드 실패했을 때
CSS가 정상 적용되지 않았을 때
시각장애인들이 스크린 리더를 통해 이미지에 대한 설명을 들을 때

대체 이미지 사용 방법

<img> 태그 : alt 속성 이용
background-image : 배경 이미지에 대한 내용을 html 태그로 표현 후 숨겨준다.

컨텐츠를 안보이게 하는 기술

display: none; 영역 자체가 없어지면서 화면에 보이지 않음
visibility: hidden; 영역 자체가 있지만 화면에 보이지 않음.
z-indent, position 등에 음수값 설정 영역 자체가 있지만 화면에 보이지 않음.
opcity :0; 영역 자체가 있지만 화면에 보이지 않음.

컨텐츠 정중앙 배치 방법

display: flex;
justify-content: center align-items: center;
height: 100vh;

display: grid;
place-items: center;
height: 100vh;

position: relative;
height: 100vh;

margin: 0 auto;

반응형과 적응형 웹

반응형 디자인

유연성 원칙에 따라 작동 -> 어떤 장치에서나 보기 좋은 단일 변하기 쉬운 웹 사이트
미디어 쿼리, 유연한 그리드 및 반응 형 이미지를 사용하여 다양한 요인에 따라 유연하고 변화하는 사용자 경험을 제공
마치 하나의 공이 여러개의 서로 다른 링을 통과하기 위해 커지거나 줄어드는 것과 유사

적응형 디자인

장치 및 기타 기능을 감지 한 다음 사전 정의 된 뷰포트 크기 및 기타 특성 세트를 기반으로 적절한 기능 및 레이아웃 제공
링의 크기에 따라 여러개의 공을 사용하는 것과 유사

⭐️css 애니메이션과 js 애니메이션의 차이

CSS
- UI 요소에 대해 더 작은 자체 포함 상태가 있는 경우 사용하는 것이 좋다.
- 낮은 버전의 브라우저에서 지원을 안 하는 경우가 있다.
JS
- 애니메이션을 세밀하게 제어해야 하는 경우 JS를 사용한다.
- 크로스 브라우징 측면에서 JS 애니메이션을 사용하는 것이 유리하다.
- velocity.js와 같은 라이브러리를 사용하면 CSS보다 성능이 좋다.

BFC(Block Formatting Context)와 작동 방식

BFC는 블록 박스가 배치된 웹 페이지의 시각적 CSS 렌더링의 일부
float, absolute로 배치된 요소, inline-blocks, table-cells, table-caption 그리고 visible이 아닌 overflow가 있는 요소들이 BFC를 만듦
BFC는 다음 조건 중 하나 이상을 충족시키는 HTML 박스
1. float 값이 none이 아님.
2. position의 값이 static도 아니고 relative도 아님.
3. display의 값이 table-cell, table-caption, inline-block, flex, inline-flex임.
4. overflow의 값이 visible이 아님.
BFC에서 각 박스의 왼쪽 바깥 모서리는 포함하는 블록의 왼쪽 모서리에 닿음
BFC collapse 시, 인접한 블록 레벨 박스 사이의 수직 마진이 발생

SVG 스타일링

기본적인 채색은 노드에 fill과 stroke 두 속성으로 조절
fill은 객체 안쪽 색, stroke는 선의 색을 설정

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8"
/>

스켈레톤 UI

데이터가 불러와지는 동안 유저에게 보여줄 로딩 화면

참고자료

HTML, CSS

https://prmblogs.tistory.com/13

CSS

https://devowen.com/272

CSS 질문

https://www.daleseo.com/css-svg/

Sass(SCSS) 완전 정복!

더 나은 UX를 위한 React에서 스켈레톤 컴포넌트 만들기

728x90

'🍀오늘도 삽질 중🍀 > HTML | CSS' 카테고리의 다른 글

HTML에 대해서 알아보자 (0)	2023.10.12
CSS로 요소 정중앙에 배치하는 4가지 방법 (0)	2023.06.22
CSS 파일 import 순서 알아보기 (0)	2023.06.22
CSS를 SASS의 한 종류인 Sass로 바꿔보기 (0)	2023.06.15
@midea를 이용해 반응형 웹 구현하기 (0)	2023.06.13

매진이의 삽질 블로그

CSS에 대해 알아보자

CSS란?

⭐️ cascading이란

class와 id의 차이점

⭐️ css, sass, styled-component 차이점

CSS를 어떻게 HTML에 적용할까?

⭐️⭐️⭐️CSS의 BOX Model

Box Model 이란?

box-sizing: border-box;

px, em, rem, vh, vw 단위

reset.css, nomalize.css

float

클리어링(Clearing) 기법

display 속성

목록과 관련된 태그

테이블과 관련된 태그

⭐️ ⭐️ ⭐️ position

CSS 스프라이트(CSS Sprites)

대체 이미지(Image Replacement)

컨텐츠를 안보이게 하는 기술

컨텐츠 정중앙 배치 방법

반응형과 적응형 웹

⭐️css 애니메이션과 js 애니메이션의 차이

BFC(Block Formatting Context)와 작동 방식

SVG 스타일링

스켈레톤 UI

'🍀오늘도 삽질 중🍀 > HTML | CSS' 카테고리의 다른 글

티스토리툴바

CSS에 대해 알아보자

CSS란?

⭐️ cascading이란

class와 id의 차이점

⭐️ css, sass, styled-component 차이점

CSS를 어떻게 HTML에 적용할까?

⭐️⭐️⭐️CSS의 BOX Model

Box Model 이란?

box-sizing: border-box;

px, em, rem, vh, vw 단위

reset.css, nomalize.css

float

클리어링(Clearing) 기법

display 속성

목록과 관련된 태그

테이블과 관련된 태그

⭐️ ⭐️ ⭐️ position

CSS 스프라이트(CSS Sprites)

대체 이미지(Image Replacement)

컨텐츠를 안보이게 하는 기술

컨텐츠 정중앙 배치 방법

반응형과 적응형 웹

⭐️css 애니메이션과 js 애니메이션의 차이

BFC(Block Formatting Context)와 작동 방식

SVG 스타일링

스켈레톤 UI

'🍀오늘도 삽질 중🍀 > HTML | CSS' 카테고리의 다른 글

관련글

티스토리툴바