프론트엔드/HTML_CSS (5) 썸네일형 리스트형 [CSS] SASS, SCSS 시작하기 굉장히 좋은 포스트 발견! https://nykim.work/97 [아무튼 Sass] 1. 시작하기 - Sass 개념, 컴파일러 설치 프롤로그 "CSS 인생은 전처리기를 도입하기 전과 후로 나뉜다" ......이런 말은 없지만, Sass를 배우면 CSS 작성이 짱짱 편해집니다. 신입 퍼블리셔부터 스타일시트 관리를 하는 개발자까지, Sass에 대 nykim.work [CSS] 세모 말풍선 만들기 테스트 1.이곳은 도움말 영역입니다. 테스트 2.이곳은 도움말 영역입니다. .drop-bubble { z-index:100; position: absolute; margin-top: 5px; background-color: #fff; border: 1px solid #dbdbdb; border-radius: 10px; font-size: 16px; text-align: left; right: 620px; } .drop-bubble :after { content: ''; position: absolute; border-style: solid; border-width: 0 16px 20px 17.5px; border-color: #FFFFFF transparent; display: block; width: .. [CSS] selectBox 화살표 바꾸기 selectBox 화살표 디자인을 없앤 후, 내가 원하는 svg 이미지를 배경으로 설정하는 방식으로 변경할 수 있다. 1. selectBox 화살표 없애기 selectbox style에 해당값을 부여하여 디자인 속성을 없앤다. appearance:none; 2. 화살표 svg 이미지 삽입하기 background 속성으로 화살표 이미지를 추가한다. 이미지는 url로 삽입하며 상대경로를 활용하여 이미지 경로를 추가한다. 아이콘 반복형식으로 배경이 지정되지 않도록 no-repeat 속성을 함께 부여한다. 또한 아이콘 위치 및 크기를 함께 정의하면 끝! background:url('../icon/my-arr.svg') no-repeat 97% 50%/20px; [CSS] shadow가 안보일때 요소 앞으로 꺼내기 button태그에 box-shadow 속성이 하위 HTML 요소에 가려지는 현상 개선하기 1. 문제현상 상위 버튼이 하위 요소에 의해 shadow가 가려진다. 2. 트러블슈팅 두가지 속성을 shadow 속성이 부여된 요소에 추가한다. position: relative; z-index: 1; div 태그 선택효과 주기 (focus, blur) div 영역을 클릭했을때 선택된듯한 시각적 효과를 주려고한다. 따라서 focus와 blur를 사용하고자 한다. * focus 이벤트는 요소가 포커스를 받을 때, blur 이벤트는 포커스를 잃을 때 발생한다. * 트러블 div 객체를 가져온 후 .focus() 메소드를 수행시켰으나 전혀 먹지 않았다. 그 이유는 다음과 같다. ** 대다수의 요소는 기본적으로 포커싱을 지원하지 않기 때문이다. 포커싱을 지원하지 않는 요소 목록은 브라우저마다 다르긴 하지만 한 가지 확실한 것은 , , , 와 같이 사용자가 웹 페이지와 상호작용 할 수 있게 도와주는 요소는 focus, blur를 지원한다는 사실이다. 반면 , , 같이 무언가를 표시하는 용도로 사용하는 요소들은 포커싱을 지원하지 않는다. 따라서 이런 요소엔 ele.. 이전 1 다음
