프레임워크/CSS66 [CSS] :hover 시 이미지 변경 1. 이미지를 삽입할 img 태그 두 개를 넣고 div로 감싼다. (div > img1, img2) Hover Effect 2. position 속성으로 두 개의 이미지를 겹친다. .jb-a { width: 400px; margin: 0px auto; position: relative } .jb-c { position: absolute; top: 0px; left: 0px; } 3. 두 번째 이미지를 display: none을 사용하여 보이지 않게 한 후, :hover 시 display: block 속성을 사용하여 보이게 한다. .jb-c { position: absolute; top: 0px; left: 0px; display: none; } .jb-a:hover .jb-c { display: bloc.. 2022. 2. 24. [CSS] :hover 시 transition 적용하기 전에는 div 여러 개 만들어서 카테고리를 구현 했었는 데 새로운 방식으로 구현 해보고 싶어서 ul, li 태그를 사용하였다. 아래와 같이 ul, li 태그로 카테고리에 들어갈 메뉴들을 적어주고 CSS 속성만 지정하면 간단하게 구현 할 수 있었다. 거기에 사용자가 li에 마우스를 올렸을 경우(:hover) 다른 색상을 보여주도록 UI를 수정하였고 더불어 transition을 사용하여서 스무스 하게 변할 수 있도록 했다! transition 적용하는 방법은 아래 포스팅을 참고해도 좋고, 아래 코드를 참고해도 좋을 것 같다. [생활코딩] transition transition은 "전환"이라는 뜻을 가지고 있고, CSS의 여러가지 효과(속성)들에 값이 변경 되었을 때 그 전환을 부드럽게 하는 기능을 말합니다... 2022. 2. 23. [CSS] relative와 absolute의 관계성, 차이점 프로젝트 진행하면서 계속 쓰다 보니 display: relative와 display: absolute를 언제 사용하는지 감이 잡히는 것 같다. top, right, bottom, left와 같은 속성들을 사용 할 때는 display: static(기본값)을 사용할 수 없는 데 display: relative 속성을 부여 시 해당 태그의 바로 위에 있는 부모 태그를 기준으로 이동한다. (상대적) display: absolute 속성을 부여 시 body 태그(브라우저)를 기준으로 이동한다. (절대적) display: relative와 absolute를 함께 사용 시에는 relative 속성을 가지고 있는 태그가 부모가 되고absolute 속성을 가지고 있는 태그가 자식 태그가 되어 상대적으로 이동한다. (상.. 2022. 2. 23. [CSS] CheckBox에 font-aswesome 사용해서 체크 표시 추가하기 어제 구현했던 checkBox에 체크 표시를 넣고 싶어서 찾아보니 아래와 같이 font aswesome을 사용하면 간단하다고 하여 정리해보았다. Next.js에서 구현할 때를 예로 들고 있다. 1) _app.js에 Head 태그를 만들고, 아래 link와 script르 삽입한다. => _app.js -> Head 안에 삽입 2) input 태그 type 중 checkbox와 label을 사용하여 checkBox를 커스텀한다. => JoinComponent, LoginComponent의 checkbox에서 사용 (변형 시킴) 3) 참고한 블로그에서는 :checked일 때만 사용하셨는 데 나는 둘 다 적용했다. /*input 은 숨겨주기*/ input#chk_top{ display:none; } /*inpu.. 2022. 2. 23. [CSS] z-index 팝업창 퍼블리싱을 진행하던 중 배경 div와 팝업창 modal의 순서가 바뀐 걸 발견했다. 이를 해결하기 위해 z-index를 사용하였는 데 적용이 안 되는 것 같아서 아래 블로그들을 참고하여 해결했다. HTML DIV tag: 영역 겹치기와 보이기 순서 지정하는 방법 - Position, z-index HTML DIV 영역 2개 이상을 서로 겹치는 방법과 겹침 순서를 설정하는 방법을 설명합니다 ojji.wayful.com CSS / z-index / 요소의 수직 위치 정하는 속성 z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 www.co.. 2022. 2. 22. [CSS] 체크박스 꾸미기 체크박스 꾸미는 방법 체크박스는 체크박스와 연결된 label을 만들고, 라베을 꾸미며 됩니다. 그렇게 할 경우 라벨을 클릭하면 체크박스가 클릭되고, 다시 클릭하면 체크가 해제되는 성질을 가지게 됩니다. 체크박스 꾸미기 빈 라벨을 가진 체크박스를 생성합니다. 이때 for 속성을 이용하여 체크박스와 라벨을 연결 해야 합니다. (이때 Next.js를 사용하는 경우 for이 아니라 htmlFor을 사용해야 합니다.) 자동 로그인 라벨 꾸미기 1. 라벨을 원하는 모양으로 꾸밉니다. (여기서 "input"은 #rememberUserInfo이고, "+ label"을 사용해서 input에 연결된 label을 선택 합니다.) & #rememberUserInfo + label { width: 20px; height: 20.. 2022. 2. 21. [생활코딩] Fontello 웹사이트나 애플리케이션에 어떤 아이콘을 삽입 할 때 이미지를 사용 할 수도 있지만 특정한 문자가 특정한 이미지로 표현되게 하는 방식이 있습니다. 그런 방식을 사용하면 이미지를 삽입하지 않아도 문자를 삽입 하면 그 문자에 해당하는 폰트가 자동으로 웹페이지에 추가되어 화면이 확대 되어도 이미지가 깨지지 않는 소위 백터 방식의 이미지를 우리의 웹사이트에 쉽고 안전하게 추가 할 수 있는 방법을 제공하는 사이트가 fontello.com 입니다. Fontello - icon fonts generator This site will not work if cookies are completely disabled. {"assets_hash":"b66fa17cf9bf4d8ea9b04e61c0c13eb9","page_data.. 2022. 2. 7. [생활코딩] 코드 경량화(minify) CSS는 네트워크를 통해서 전송됩니다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해입니다. 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화 해주는 도구가 minify 도구입니다. mini는 "작게", fy는 "그렇게 만들다" 즉, css 코드를 작게 만들어서(압축해서) 서버와 클라이언트 사이에 주고 받는 데이터의 크기를 줄이는 것이 minify의 목적입니다. 첫번째 방법 clean-css online adamburgess.github.io 두번째 방법 page 2 성공적으로 minify 된다. 한 줄이 길게 표시 되는 문제가 생길 경우 아래 사이트를 참고하여 해결하면 된다. 비주얼 스튜디오 코드 VSC, 코드 경량화 minify 이 포스팅은 PC로 작성되었습니다. 모바일로.. 2022. 2. 7. [생활코딩] link & import 똑같은 CSS를 적용해야 하는 웹페이지가 1000개가 있을 때 CSS의 내용이 바뀌었다면 어떻게 해야할까요? 아마 천개의 웹페이지를 모두 수정해야 할 것입니다. 이것은 CSS의 수정을 소극적으로 만들고 그것은 곧 아름다움을 억압하는 암담한 장애물이 될 것입니다. 여기서는 이런 문제를 근본적으로 해결할 수 있는 방법인 link 태그와 @import에 대해서 알아 보겠습니다. 프로그램으로 코드를 만들 때 좋은 코드를 만들 수 있는 실천적이고, 어렵지 않은, 하지만 강력한 효과가 있는 방법은 바로 중복을 제거하는 것입니다. 개발자 도구 → 검사 → Network에 들어가 보면 현재 이 웹페이지를 화면에 표현하기 위해서 웹 서버로부터 다운로드 받은 파일들을 전부 다 보여주는 기능이 있습니다. reload 해보면.. 2022. 2. 6. 이전 1 2 3 4 5 ··· 8 다음 728x90
