티스토리

이민재의 개발일지

검색하기

블로그 홈

이민재의 개발일지

ipjaworld.tistory.com/m

이민재 님의 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

[CSS] 텍스트 블러 효과 구현하기 - text-shadow, filter:blur 알아보기 들어가며최근 프로젝트에서 특정 텍스트를 블러 처리해야 하는 요구사항이 있었습니다. 처음에는 단순히 모자이크 효과만 생각했는데, CSS만으로도 여러 가지 흥미로운 방법이 있다는 걸 알게 되었습니다. 이전에는 텍스트를 감싸는 div를 relative로 만들고 그 안에 absolute, z-index 등을 조정한 반투명한 레이어를 올리는 식으로 구현했었는데 다른 방법이 없나 찾아보다가 공부하게 되었습니다. text-shadow로 블러 효과 구현하기가장 먼저 시도해본 방법은 text-shadow와 color: transparent를 조합하는 것이었습니다: CSS 블러 효과 데모 text-shadow 블러 안녕하세요 네온 효과 네온사인 .. 공감수 1 댓글수 1 2024. 10. 24.
[CSS] aspect-ratio로 반응형 캐러셀 최적화하기 - DOM 중첩 없이 비율 유지하는 방법 ※ 본 포스팅은 개인 기록용으로 반응형 웹에서 이미지나 요소의 비율을 유지하는 방법에 대해 고민하다가 알게된 내용을 정리한 것입니다. 혹시나 저와 비슷한 고민을 하시는 분이 계실까봐 기록으로 남깁니다. aspect-ratio로 반응형 웹에서 요소의 비율 유지하기 들어가며 최근 캐러셀(슬라이더) 컴포넌트를 만들면서 이미지의 비율을 어떻게 유지할지 고민이 많았습니다. 처음에는 단순히 width와 height를 픽셀로 고정하거나 퍼센트(%)로 지정했는데, 이게 생각보다 쉽지 않더라구요. 고정 픽셀을 사용하면 모바일에서 깨지고, 퍼센트만 사용하면 부모 요소의 크기에 따라 이미지가 찌그러지는 문제가 있었습니다. div를 여러 개 중첩해서 해결할 수도 있겠지만, 성능 이슈가 걱정되었죠. 그러다 발견한 게 바로 `.. 공감수 2 댓글수 2 2024. 10. 24.
[HTML/CSS] hover 이벤트시 다른 클래스, id 에도 효과를 주는 법 이런 식으로 가장 바깥의 div에는 item-area를 그 속에는 class="card"가 반복되는 구조를 하고 있는 코드가 있습니다. 여기에서 class="card"에 hover 이벤트로 color=#666 을 줘도 반영되지 않습니다. 이는 지금 프로젝트에서 기본 값으로 a 태그 자체에 text-decoration: none; color: black; 을 주었기 때문인데요 이런 경우에는 .item-area .card:hover + .item-area a{ color: #666; } 이런 식으로 + 선택자로 같이 지정을 해주면 자연스럽게 원하던 hover 효과를 구현할 수 있었습니다. 공감수 0 댓글수 0 2023. 2. 7.
[HTML & CSS] Hover의 이벤트들 cursor의 속성들. Hover란? css에서는 스킨처럼 외형을 디자인하는 기능 뿐만 아니라 마우스의 클릭, 요소 위로 올라가는 등의 액션이 있을 때 이벤트를 추가할 수 있습니다. 여기서 말하는 Hover는 마우스를 요소에 이동시켰을 때 어떤 이벤트를 발생시킬지 지정할 수 있게 해주는 역할을 수행합니다. .news-title{ color: #000; border-bottom: none; } .news-title:hover{ color: blue; border-bottom: 1px solid #000; cursor: pointer; font-weight: 600; } 위의 css를 적용한 스타일은 기본 스타일에서는 color: #000; border-bottom: none; 을 적용해서 글자가 검은색에 밑줄 없음이었는데 마우스.. 공감수 1 댓글수 0 2022. 10. 23.
[HTML5 & CSS] 속성 선택자 1. [속성] 해당 속성이 있는 요소 [required] 2. [속성 = 값] 지정한 속성값이 있는 요소 [target = _blank] 3. [속성 ~= 값] 지정한 속성값이 포함된 요소(단어별) [class ~= button] 4. [속성 |= 값] 지정한 속성값이 포함된 요소 (하이픈 포함, 단어별) [title |= us) 5. [속성 ^= 값] 지정한 속성값으로 시작하는 요소 [title ^= eng] 6. [속성 $= 값] 지정한 속성값으로 끝나는 요소 [href $= xls] 7. [속성 *= 값] 지정한 속성값의 일부가 일치하는 요소 [href *= w3] 공감수 0 댓글수 0 2022. 8. 9.
입력에 필요한 태그와 속성 (HTML & CSS) 01 다음 내용은 이지스 퍼블리싱의 고경희 님이 집필하신 HTML과 CSS 자바스크립트 웹 표준의 정석에서 발췌하였다. 폼에서 사용할 수 있는 태그는 다음과 같다 폼의 시작과 끝을 알려준다. 폼 요소를 그룹으로 묶는다. 필드셋에 제목을 붙인다. 사용자가 내용을 입력할 필드를 삽입한다. (input 태그는 하위 속성을 많이 가지고 있다.) , 드롭다운 목록을 삽입한다. 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다. 데이터 목록을 삽입한다. 등이 있다. input 태그는 여러 유형과 속성이 있는데 유형을 먼저 보자면 text 한 줄 짜리 텍스트 상자를 생성 password 비밀번호를 입력할 수 있는 필드 생성(비밀번호는 ****와 같이 표시) search 검색이 가능한 입력 필드를 생성 url URL.. 공감수 0 댓글수 0 2022. 7. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.