본문 바로가기

CSS17

[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] transform에서 자주 사용하는 함수 정리, perspective 함수와 속성, backface-visibility 속성 transform 변환함수를 속성값으로 사용해 요소를 변환시키는 속성 원근거리를 나타내는 함수 perspective()를 transform의 value로 제일 앞에 사용해야한다 원근거리함수를 속성값으로 주고 싶지 않다면 변환함수만 속성값으로 넣을 수 있다 div { transform: perspective(), 변환함수1 변환함수2 변환함수3…; } transform의 속성값 종류 (변환함수 종류) 1. translate(x, y) 요소를 화면에서 X축으로 x만큼, Y축으로 y만큼 이동 단위: px 개별함수로도 사용 가능 translateX(x): 요소를 화면에서 X축으로 x만큼 이동 translateY(y): 요소를 화면에서 Y축으로 y만큼 이동 2. scale(x, y) 요소의 크기를 X축으로 x배,.. 2022. 5. 23.
[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] display 속성 inline, block, inline-block 정리 display 요소가 화면에 출력되는 특성 각 요소에 이미 지정되어 있는 display의 속성 2가지 1. inline 글자를 만들기 위한 요소 요소의 크기만큼 차지한다 요소가 수평으로 쌓인다 width와 height를 가질 수 없다 margin, padding으로 왼쪽, 오른쪽 공백을 만들 수 있지만 위, 아래 공백을 만들 수 없다 인라인 요소 안에 블록 요소를 자식 태그로 가질 수 없다 (인라인 요소는 인라인 요소만 자식 태그로 가질 수 있다) , , , , , , , inline 요소 사용시 주의점 inline 속성을 가진 태그 사이에 공백이 있으면 (요소 사이에 스페이스, 요소 사이에 한줄 띄우기) 화면에 공백이 나타난다 inline 속성을 가진 span 태그를 붙여 사용할 경우 화면에 AB로 출.. 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.

티스토리툴바