본문 바로가기

CSS16

[리액트] 리액트에서 스타일 적용하는 5가지 방법 (인라인 스타일, CSS, SCSS, CSS Module, Styled-Components) 1. 인라인 스타일 App.jsx function App() { return } export default App 2. CSS 컴포넌트를 스타일링하는 가장 기본적인 방식 CSS 클래스를 중복되지 않게 만들어야함 CSS 클래스가 중복되는 것을 방지하기 위해 1) 이름을 지을 때 특별한 규칙을 사용하거나 2) CSS selector를 활용한다 CSS 클래스 이름 짓는 2가지 방법 컴포넌트이름-클래스형태 i.e.) App-header BEM 네이밍: Block__Element-Modifier class="컴포넌트이름__역할—세부특징" i.e.) card__title-primary 컴포넌트 스타일로 css를 사용할시 단점 상위 컴포넌트에서 불러온 css 코드가 하위 컴포넌트에까지 영향을 미치기 때문에 컴포넌트마.. 2022. 8. 12.
[CSS] backdrop-filter 속성을 사용해서 특정 요소에 블러처리해주기 The brown fox jumps over the lazy dog. div { background-color: orange; font-size: 30px; padding: 20px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; } div::after { border: 3px solid tomato; box-sizing: border-box; content: ""; width: 50%; height: 100%; position: absolute; top: 0; right: 0; backdrop-filter: blur(10px); } 2022. 8. 8.
[CSS] 텍스트가 넘칠경우 생략해서 ... 보여주는 방법 The brown fox jumps over the lazy dog. div { background-color: orange; font-size: 30px; padding: 20px; } 텍스트의 길이가 해당 요소보다 긴 경우에는 자동으로 줄바꿈이 일어난다 div { background-color: orange; font-size: 30px; padding: 20px; width: 200px; } white-space: nowrap 속성을 추가하면 자동으로 일어났던 줄바꿈이 일어나지 않고 텍스트가 요소 길이를 넘어선채 출력된다 div { background-color: orange; font-size: 30px; padding: 20px; width: 200px; white-space: nowrap; }.. 2022. 8. 8.
[CSS/문제해결] input 태그에 focus했을때 border 색깔 변경하는 방법 ❓ 문제내용 input 태그에 focus했을때 CSS로 border 속성을 줬는데 적용이 안된다 input:focus { border: 1px solid orange; } ❗️ 해결방법 브라우저에 기본값으로 설정되어 있는 outline 속성값을 none으로 지정해주어야 border 색깔을 변경할 수 있다 input:focus { outline: none; border: 1px solid orange; } 2022. 5. 13.
[CSS] transition 속성으로 애니메이션 효과 주기 transition 요소의 전환(시작과 끝) 효과를 지정하는 단축속성 div { transition: 속성명, 지속시간(필수), 타이밍함수, 대기시간; } div { transition: transition-property, transition-duration(필수), transition-timing-function, transition-delay; } transition의 속성값 1. transition-property 전환 효과를 사용할 속성 이름을 설정 all: 모든 CSS 속성에 적용 (default) 속성이름: 전환 효과를 사용할 속성 이름 명시 div 요소에 있는 어떤 속성에 변화가 생길때 transition 효과를 1초동안 적용한다 div { transition: all 1s; } div 요.. 2022. 5. 11.
[CSS] transform, keyframes로 애니메이션 효과 주기 transform vs keyframes transform: 상태가 한번 바뀔때 사용 (a → b) keyframes: 상태가 여러번 바뀔때 사용 (a → b → a, a → b → c) transform 속성 1. rotate() 플러스는 오른쪽으로 마이너스는 왼쪽으로 회전 div { transform: rotate(90deg); } 2. translate() translateX는 X축 좌표로 translateY는 Y축 좌표로 이동한다 X, Y가 없는 translate()은 X, Y값을 모두 움직일 수 있다 엘리먼트를 움직이는 에니메이션을 줄 경우에는 padding, margin으로 이동하는 것보다 translate()이 더 빨리 움직인다 div { transform: translate(100px, 1.. 2022. 5. 10.
[CSS] flex 속성 정리 display 요소가 화면에 출력되는 특성을 정의해주는 속성이다. display에서 자주 사용하는 속성값 6가지 inline: 글자를 만들기 위한 요소에 부여하는 속성값으로 요소의 크기만큼 차지하며 수평으로 쌓인다 block: 레이아웃을 만들기 위한 요소에 부여하는 속성값으로 한행을 전부 차지하며 수직으로 쌓인다 inline-block: 베이스는 inline 요소지만 block 요소의 몇가지 특징을 가지고 있는 요소 grid: 그리드는 수평선과 수직선으로 이루어진 집합체로 웹페이지를 위한 이차원 레이아웃 모델 table: 행과 열로 이루어진 표를 생성하는 레이아웃 모델 flex: flex 속성을 가진 부모 요소 안에 있는 자식 요소를 자유롭게 제어할수 있도록 도와주는 레이아웃 모델 flex 기본 부모 요.. 2022. 5. 4.
[CSS] position 속성 static, relative, absolute, fixed 정리 position position 속성은 요소의 위치 지정 기준을 설정한다. position에는 5가지 값(static, relative, fixed, absolute, sticky)이 있는데 static은 default 값으로 요소의 위치 지정 기준이 없어 위치 설정을 할 수가 없다. position 값이 설정되면 top, bottom, left, right의 속성으로 요소의 위치를 이동시킬 수 있다. position의 속성 static: 요소의 위치 지정 기준이 없다 (default) relative: 자신을 기준으로 요소의 위치를 설정한다 absolute: 위치상 부모 요소를 기준으로 요소의 위치를 설정한다 fixed: 브라우저의 뷰포트를 기준으로 요소의 위치를 설정한다 position 사용시 주의점.. 2022. 4. 25.
[CSS] inline-block의 문제점과 해결방법 (태그사이의 공백과 baseline) inline-block의 특징 베이스는 inline 요소지만 block 요소의 몇가지 특징을 가지고 있는 요소 요소가 수평으로 쌓인다 (inline의 특성) 태그 사이에 공백이 있으면 (요소 사이에 스페이스, 요소 사이에 한줄 띄우기) 화면에 공백이 나타난다 (inline의 특성) width와 height를 가질수 있다 (block의 특성) margin, padding으로 사방에 공백을 만들 수 있다 (block의 특성) inline-block으로 레이아웃을 만들때 문제점 2가지 1. 태그 사이에 공백이 있으면 요소에 공백이 나타난다 1) 태그 사이에 공백이 없을때 요소 사이에 공백이 나타나지 않는다 LeftRight div { width: 100px; height: 300px; color: white;.. 2022. 4. 24.
[CSS/한줄정리] tabindex 속성으로 focus가 될 수 있는 요소 만들기 tabindex: -1 속성을 부여하면 해당 요소에 focus가 가능해진다. div { tabindex: -1; } 2022. 4. 24.
[CSS] overflow 속성 정리 overflow 요소의 크기 이상으로 내용이 넘쳤을때 보여짐을 제어하는 단축 속성 overflow-x를 사용하면 x축(가로)만 개별적으로 제어할 수 있다 overflow-y를 사용하면 y축(세로)만 개별적으로 제어할 수 있다 overflow의 속성 1. visible (기본값) 넘친 내용을 그대로 보여줌 .parent { width: 200px; height: 150px; background-color: royalblue; margin: 20px; padding: 20px; overflow: visible; } .child { width: 300px; height: 100px; background-color: orange; } 2. hidden 넘친 내용을 잘라냄 .parent { width: 200px.. 2022. 4. 24.
[CSS] content box와 border box의 차이 box-sizing box-sizing 속성은 요소의 크기 계산 기준을 지정한다. 1. content-box 요소의 내용(content) + padding + border로 크기 계산 padding, border의 너비와 높이를 요소의 사이즈에 포함시키는 방법 예제 box 클래스를 가진 요소는 width가 100px (width) + 10px (padding-left) + 10px (padding-right) + 5px (border-left) + 5px (border-right)인 130px이 된다. .box { box-sizing: content-box; width: 100px; height: 100px; /* 아래의 속성이 최종 사이즈에 포함된다 */ padding: 10px; border: 5px.. 2022. 4. 24.
[CSS] CSS에서 사용하는 유닛 정리 (px, em, rem, vw, vh, %) ⚠️ 이 포스팅은 드림코딩의 프론트엔드 필수 반응형 CSS 단위 em 과 rem과 프론트엔드 필수 반응형 CSS 단위 총정리 (EM과 REM)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 1. 절대적인 유닛 (Absolute length units) 절대적인 유닛은 크기가 항상 일정하다. 절대적인 유닛의 종류로는 cm, mm, in, px 등이 있지만 컴퓨터 화면에서는 px만 유일하게 사용할 수 있다. 1.1 px (pixel) 픽셀은 화면의 점을 세는 단위로 모니터 위에서 나타낼수 있는 가장 작은 단위 값이다. 픽셀의 문제점은 값이 고정이 되어 있다는 것이다. 예를 들어 픽셀을 사용해 폰트사이즈를 지정하면 사용자가 브라우저에서 폰트 사이즈를 커스터마이즈해도 폰트사이즈가 변하지 않는다. 2. 상대적인 유.. 2022. 4. 24.
[CSS] CSS 선택자 우선순위 (CSS Specificity) 우선순위란 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 1. 점수가 높은 선언이 우선함 2. 점수가 같으면 가장 마지막에 해석된 선언이 우선함 우선순위 순서대로 1. !important 2. inline style 선언 3. id 선택자 4. class, 가상 클래스, 속성 선택자 5. tag 선택자, 가상 요소 6. 전체 선택자 2022. 4. 23.
[CSS] CSS 선택자 종류 5가지 정리 1. 기본 1.1 전체 선택자 (Universal Selector) 모든 요소를 선택 (*) * { color: royalblue; } 1.2 태그 선택자 (Type Selector) 태그 이름으로 선택 (태그이름) li { color: royalblue; } 1.3 클래스 선택자 (Class Selector) 클래스 속성 값으로 선택 (.클래스이름) .box { color: royalblue; } 1.4 아이디 선택자 (ID Selector) 아이디 속성 값으로 선택 (#아이디이름) #profile { color: royalblue; } 2. 복합 (Combinator) 2.1 일치 선택자 (Basic Combinator) 선택자 두개 이상을 동시에 만족하는 요소 선택 (선택자선택자) maple spa.. 2022. 4. 23.
[CSS] div 태그와 span 태그 비교 span 대표적인 인라인 요소 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도 요소가 수평으로 쌓임 width, height로 가로, 세로 너비를 지정할 수 없다 margin, padding으로 왼쪽, 오른쪽 공백을 만들 수 있지만 위, 아래 공백을 만들 수 없다 인라인 요소이므로 안에 블록 요소를 자식 태그로 가질 수 없다 (인라인 요소는 인라인 요소만 자식 태그로 가질 수 있다) span 태그를 작성할때 한줄을 띄우면 공백이 나타난다 span 태그 사이에 공백이 나타나지 않음 AppleBanana span 태그 사이에 공백이 나타남 Apple Banana div 대표적인 블록 요소로 division의 약어 특별한 의미가 없는 구분을 위한 요소 (레이아웃의 영역을 잡을 때 사용) 요소가 .. 2022. 4. 22.

티스토리툴바