z-index가 없는 경우의 쌓임을 이해하고, 실제 문제에 적용하여 해결하기
·
Frontend/HTML, CSS
문제 상황카카오톡 선물하기 클론코딩을 하던 중, 상품 아이템에 마우스를 호버했을 때 커서가 pointer로 바뀌지 않는 문제를 발견했다. 정확히 말하자면 상품 아이템의 썸네일에 마우스를 올릴 때만 pointer가 되었고, 다른 공간에서는 일반 커서였다.원래는 상품 아이템을 클릭하면 상품 상세 페이지로 넘어가야 하는데, 지금 상태는 썸네일을 눌렀을 때만 페이지 이동이 이루어졌다. 다른 영역은 누르나 마나 아무런 동작도 없다는 거다.또 선물, 하트 아이콘에 마우스를 호버해도 마우스 커서가 pointer로 바뀌지 않았다. 얘네도 마찬가지로 클릭이 먹지 않았다.분명 컴포넌트 만들 때는 pointer가 잘 적용 되었는데, 왜 이러지? 싶었다. 상품 아이템 컴포넌트가 문젠가?우선은 상품 아이템 컴포넌트의 스타일이 ..
CSS input text type 클릭 시 테두리 제거 & 깜빡임 색상 변경
·
Frontend/HTML, CSS
input text type 클릭 시 나오는 테두리 제거하기 input:focus { outline: none; } input text type 클릭 시 깜빡이는 커서 색상 변경하기 input { caret-color: white; /*커서 말고 글자 색까지 변경하고 싶으면, 'color' 속성 사용*/ }
CSS basic flex
·
Frontend/HTML, CSS
보호되어 있는 글입니다.
CSS basic position (static, relative, absolute, fixed, sticky)
·
Frontend/HTML, CSS
1. 요소의 위치 정하기 position 문서 상에 요소를 배치하는 방법을 정의 top 요소를 위에서부터 얼마만큼 떨어뜨리겠다 right 요소를 오른쪽에서부터 얼마만큼 떨어뜨리겠다 bottom 요소를 아래에서부터 얼마만큼 떨어뜨리겠다 left 요소를 왼쪽에서부터 얼마만큼 떨어뜨리겠다 2. position 속성의 속성값 (1) static -요소를 일반적인 문서 흐름에 따라 배치 (default) (2) relative -일반적인 문서 흐름에 따라 배치 -원래 자리에 오프셋을 적용 안녕하세요 position입니다 (3) absolute -일반적인 문서 흐름에서 제거 -상위 요소 중 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용 안녕하세요 position입니다 cyan 박스에 pos..
CSS basic 박스 모델
·
Frontend/HTML, CSS
보호되어 있는 글입니다.