PC 브라우저로 테스트 할 때는 몰랐는데스마트폰을 이용해 모바일 테스트를 해보니까 :hover에 background를 넣어놨는데 이 hover의 background 색상이 지속되는 현상이 있었다.  이미지 처럼 같은 위치에 있을 때각 페이지로 화면 전환이 이뤄지면 처음에는 기본 색상이였는데두번째 화면 부터는 hover 색상으로 적용되어 유지되었다. 왜그럴까?모바일 기기는 마우스 대신 터치로 작용을 하는데 그래서 hover 기능이 크게 의미가 없다.hover 기능이 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택되어 효과를 주는건데, 모바일에서는 손가락이 요소 위에 올라가 있는게 아니기 때문이다.그래서 모바일 환경에서는 엘리먼트를 터치하게 되면 브라우저는 포인터가 계속 해당 엘리먼트에 위에 ..

vscode에서 prettier 사용할 때, 저장할 때마다 자동으로 줄바꿈 되는 것 방지하는 방법 Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io 주석으로 줄바꿈 하고 싶지 않은 부분 바로 위에 아래 코드 넣기 주석 형식은 각 확장자에 맞게 고쳐야함 아래는 css일 때, /* prettier-ignore */

내가 헷갈려하는 flex에 대한 부분을 정리해봤다. inline-flex CSS display: flex 그리고 inline-flex 인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정 rgy0409.tistory.com flex-flow .item { display: flex; /* flex-direction flex-wrap */ flex-flow: flex-col wrap; } align-self 교차축 방향으로 박스를 개별적 배치할 수 있게 해주는 속성 속성명 속성값 적용요소 align-self auto stretch flex-start..

에디터에서 가져온 글을 태그 안에서 보여주는데 띄어쓰기 없는 영어 같은 경우 줄바꿈이 되지않고 넘쳐버리게 되었다. 왜그런지 찾아보니 pre태그는 글을 그대로 보여주는 특징이 있어 width가 넘어가도 줄바꿈이 되지 않는다고 한다. white-space: pre-wrap; word-break: break-all; pre 태그에 위에 css를 적용해주면 해결이된다. 📌 참고 pre 태그는 마크업의 공백을 그대로 보여줍니다. Reference/HTML 태그는 마크업의 공백을 그대로 보여줍니다. by @webs 2022. 11. 15. 태그는 마크업의 공백을 그대로 보여줍니다. 코드를 보여줄 때 공백과 줄바꿈을 그대로 보여주기 때문에 태그와 같이 webstoryboy.co.kr [HTML] 태그- 텍스트를 그대..

SCSS Architecture (7-1 패턴) 📁 scss/ | |– 📁 abstracts/ | |– 📄 _var.scss # 각종 변수 | |– 📄 _mixins.scss # Mixin ||– 📄 _function.scss # 함수 | |– 📁 vendors/ | |– 📄 _swiper.scss # 외부 라이브러리 | |– 📄 _datepicker.scss # 외부 라이브러리 | |– 📁 base/ | |– 📄 _reset.scss # Reset/normalize | |– 📄 _typography.scss # Typography rules | |– 📄 _print.scss # print rules | |– 📁 layout/ | |– 📄 _gnb.scss # Global Navigation | |– 📄..

CSS filter를 이용해 사진에 다양한 이미지 변화효과를 부여할 수 있다. 필터는 주로 이미지, 배경, 테두리 렌더링 조정할 때 쓰인다. SVG 필터도 적용할 수 있다고 한다. /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); f..

순서에 따른 가상 클래스에 대해서 공부해보자. 순서관련 가상 클래스에는 1. first-child 2. first-of-type 3. last-child 4. last-of-type 5. nth-child() 6. nth-of-type() 이렇게 6가지가 있다. 클래스 이름이 매우 비슷해서 용도의 헷갈림이 많다. 📌 child vs of-type ✅ child : 형제 요소 중 형제 요소들 중에서만 형제 요소가 아니면 해당되지 않는다. ✅ of-type : 해당 요소(클래스) 중 자신의 유형과 일치하는 (형제요소 고려해야함) p의 first-of-type이면 p태그 중 자신이 무조건 첫번째라면 다 해당된다. 📌 참고 - 시니어 개발자도 모르길래 만든 영상 - 수코딩

선택자 패턴에서의 우선순위 적용 규칙 !important 인라인 스타일 요소 style="color:red" #id .class 속성기반 가상 Tag * CSS 명시도 계산법 1. inline 스타일 : 1000점 2. Id 선택자 개수(#) : 100점 3. Class 선택자 개수 (.) : 10점 4. Tag, Element 선택자 개수 : 1점 5. !important : 그냥 강제로 무조건 적용 (99999999...점) 6. 전체 선택자 (*) : 0점 7. 가상 엘리먼트는 무시 * 전역선택자(*), 조합자(+, >, ~, "", ||)과 부정 의사 클래스는 명시도 영향 없음 * 부정의사 클래스 내부에 선언한 선택자는 영향을 끼침 * 점수가 같다면 가장 마지막에 (가장 하단에) 작성된 선언이 적..

reset css 사이트 CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */..