# opacity

19개의 포스트
post-thumbnail

이미지 조작하기

\-blur(px) : 흐림효과 10px만 둬도 엄청 흐려진다.\-brightness(%): 밝기 조정 100이 기본값이라고 생각하면 된다. 0은 완전 어두워진다.\-contrast(%):고대비:\-drop-shadow(가로그림자px 세로그림자px 흐림px 색깔):그림

2022년 5월 30일
·
0개의 댓글
post-thumbnail

2022 05 03 CSS

line-height 속성은 line-box 의 높이를 지정한다.주로 텍스트간의 줄 간격을 조절할 때 사용한다.아이콘, 이미지, 글 등을 일정한 크기의 안에 넣을 때 가운데 정렬을 할 때도 사용이 가능하다.물론 가운데 정렬이 의미가 되는 건 아니지만 line-heigh

2022년 5월 2일
·
0개의 댓글
post-thumbnail

Display & Opacity

요소를 어떻게 보여줄지 결정하는 요소들

2022년 4월 19일
·
0개의 댓글

TIL - declarations

📌 단위 (units) 절대 길이 단위 : cm, mm, px등 상대 길이 단위 : em, rem, vw, vh 등 백분률 : % 1. 절대 길이 단위 px 디바이스 화면에서 이미지를 표현하는 가장 작은 단위 요소의 넓이, 높이, 패딩, 마진, 보더 값, 폰트 사이즈

2022년 4월 7일
·
0개의 댓글
post-thumbnail

⭐️ Flex & Opacity

Project를 하다가 자세히 알아보고 싶은 속성이 생겨 기록해두려 한다.flex와 opactity이라는 프로퍼티를 알아보도록 하자.The flex CSS shorthand property sets how a flex item will grow or shrink to

2022년 3월 23일
·
0개의 댓글
post-thumbnail

[CSS][Layout][Hidden Content]

grid, flex, block, inline 외에 해당 속성은 화면에서 보이는 것을 숨길 수도 있다.해당 요소는 공간을 차지하지 않는다.주로 미디어쿼리에서, 디바이스마다 보이는 것을 바꾸고 싶을 때 사용한다.미디어 쿼리나 display:block없이 리액트에서 제어할

2022년 1월 18일
·
0개의 댓글
post-thumbnail

display

display display 속성은 레이아웃에서 자주 쓰이고 중요한 속성 중 하나입니다 display가 가지는 속성값은 다음과 같습니다 요소가 어떻게 배치될 지 설정하는 속성으로 값에 따라 요소의 배치가 달라집니다 display는 요소가 기본적으로 가지는 값과

2022년 1월 17일
·
0개의 댓글

[CSS] 태그를 숨기거나 보이게 하는 3가지 방법

태그가 나타나고 감춰짐에 따라 transition을 적용하고 싶다면 이 속성을 추천태그가 숨겨지면 클릭 이벤트도 적용되지 않는다.태그의 투명도를 조절하는 방법태그가 눈에 보이지 않을 뿐 클릭 이벤트는 적용 됨.. 태그를 화면에서 완전히 감추거나 나타나게 한다.trans

2021년 11월 23일
·
0개의 댓글

[TIL] 2021/11/12

용도: modal에서 부모의 backdrop주의: 부모에서 적용하려는 opacity가 배경인 경우만 가능사용법 in CSSopacity: Xrgba: 0부모에서 css 예시용도: modal에서 부모의 backdrop을 클릭했을 때만 이벤트 발생하도록(onClick)사용

2021년 11월 12일
·
0개의 댓글
post-thumbnail

display, visibility, opacity 프로퍼티

1. display display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. 1.1 block 항상 새로운 라인에서 시작한다. 화면 크기 전체의 가로폭을 차지한다. (width: 100%) width, height, margin, padding

2021년 10월 20일
·
0개의 댓글
post-thumbnail

RGB Opacity

RGB를 이용해서 색을 지정할 때 opacity 값을 주고 싶을 때가 있다.예를 들면, \`물론 16진수를 계산해서 넣으면 된다!이번 포스트에서는 주로 사용하게 되는 opacity 값을 미리 써놓으려고 한다.이상 끝!

2021년 9월 9일
·
0개의 댓글

앞 뒤에 가상 요소

가상 요소(Pseudo-Element)란?– 가상클래스(Pseudo-Class)는,별도의 class를 지정하지 않아도 지정한 것 처럼요소를 선택할 수 있습니다.– 가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며,존재하지 않는

2021년 8월 16일
·
0개의 댓글
post-thumbnail

Display, Visibility, Opacity 프로퍼티

: layout 정의에 자주 사용되는 프로퍼티block: block 특성을 가지는 요소(block 레벨 요소)로 지정inline: inline 특성을 가지는 요소(inline 레벨 요소)로 지정inline block: inline-block 특성을 가지는 요소(inln

2021년 6월 19일
·
0개의 댓글
post-thumbnail

TIL hover effect

hove와 opacity

2021년 4월 13일
·
0개의 댓글
post-thumbnail

scroll 값으로 opacity 값 비율구하기

대표적으로 애플사이트에서 scroll값을 이용해 다양한 효과를 연출하는 것을 볼 수 있다. ( 멋지다, 이쁘다..) scroll값으로 opacity 값 비율 0~1 까지의 범위를 구하는 법을 알아보도록 하겠습니다.만약 위와 같이 4개의 섹션이 존재하고, section

2021년 2월 22일
·
1개의 댓글
post-thumbnail

CSS 2.박스 모델

박스의 크기 박스 너비 = 내용물(content)너비+왼쪽 패딩+오른쪽 패딩+왼쪽 CSS테두리 테두리 스타일(모양), 색상,두께,둥근 테두리 지정 가능 => 모서리별 다른 스타일,두께 가능 border스타일 지정해야 다른 속성 사용 가능 각 변 별로

2020년 9월 17일
·
0개의 댓글
post-thumbnail

CSS 기초 - 3 (position, opacity, z-index, overflow...)

요소의 투명도를 조절하는 스타일 속성이며, 0.0부터 1.0 사이의 값으로 설정할 수 있다.요소의 위치를 설정할 수 있다.static : 기본 값이며, 마크업 순서대로 배치된다. top, left, right, bottom, z-index 값에 반응하지 않는다. rel

2020년 5월 25일
·
0개의 댓글
post-thumbnail

element 숨기는 5가지 방법

Opacity이 속성은 요소의 투명성을 설정하기 위한 것이다. 불투명도를 0으로 설정하면 요소가 시각적으로 숨겨진다. 요소는 여전히 해당 위치를 차지하며 웹 페이지의 레이아웃에 영향을 준다. 사용자 상호 작용에도 응답한다.불투명 할 때와 투명할 때 똑같이 동작한다.이

2020년 2월 25일
·
0개의 댓글