Psychogrammer

🌕 Front/✨ CSS 검색 결과

해당 글 4건

[CSS] 마진 상쇄 (Margin collapsing) 현상 이해하기

1. 마진 상쇄란? Block 요소들의 상하 마진이 겹칠 때, 한 쪽의 마진 값만 적용하는 렌더링 규칙 2. 마진 상쇄가 일어나는 3가지 상황 1) 인접 형제간 겹침 마진이 더 큰 값 (≥) 으로 랜더링이 일어난다. 2) 빈 요소의 상하 마진간 겸침 빈 요소란? block 요소의 height이 0인 경우를 말함 height, padding, border 상하로 늘어나는 프로퍼티 값이 없는 경우 내부에 inline 컨텐츠가 없는 경우 빈 요소 + 인접 박스들 간에 마진 겹침이 연쇄적으로 일어나는 경우, 상쇄가 여러번 일어난다. 마크업을 진행할 때, 빈 요소를 만들어놓는 상황이 있으니 꼭 인지해두자. 빠른 레이아웃 구성을 위해, div로 영역을 구분할 경우 나중에 append 하기 위해 빈 컨테이너를 만들어..

🌕 Front/✨ CSS 2022. 4. 19. 09:58

[CSS: flex box] flex item의 정렬과 간격 / justify-content /align-items/ align-content

사용예시 .container { display: flex; justify-content: center; align-items: flex-start; align-contents: center; } 1. justify-content : 메인 축 정렬과 아이템 사이의 간격을 제어한다. justify-content: 1) flex-start [default] 2) flex-end 3) center 4) space-between 5) space-around 6) space-evenly flex-direction(메인축 설정): row | row-reverse | column | column-reverse 2. align-items : flex item의 ‘교차 축’ 정렬을 제어한다. align-items: 1) ..

🌕 Front/✨ CSS 2021. 8. 10. 19:18

모바일에서 CSS hover 적용할 때 효과가 지속되는 문제 해결!

모바일 터치 후 호버 효과가 사라지지 않을 때 프론트엔드 개발하다 보면 한 번쯤은 겪는 문제다. 데스크톱에서는 멀쩡하게 작동하던 버튼이 모바일에서는 터치 후에도 호버 상태가 계속 유지되는 현상 말이다.처음에는 "뭐지? 왜 버튼을 눌러도 색깔이 안 돌아와?" 하면서 당황했는데, 알고 보니 모바일과 데스크톱의 상호작용 방식이 근본적으로 다르기 때문이었다. 문제의 핵심모바일에서는 "마우스를 올린다"는 개념 자체가 없다. 터치스크린에서는 터치하는 순간 hover 상태가 활성화되고, 다른 곳을 터치하기 전까지 그 상태가 유지된다. 그래서 버튼을 터치한 후 다른 영역을 터치하지 않으면 호버 효과가 계속 남아있게 된다. 최신 CSS 미디어 쿼리로 해결하기예전에는 @media (max-width: 768px) 같은..

🌕 Front/✨ CSS 2021. 5. 10. 22:55

BEM은 CSS표기법

BEM이란(Block Elements Modifier) BEM은 CSS 개발 방법론, 네이밍 컨벤션이다. html 요소들을 각각 Block, Element, Modifier 세 가지로 분류해 작명한다. Block 다음에 Element(내부요소) 혹은 Modifier(상태)순으로 네이밍 한다.각각의 BEM은 각자의 역할이 따로 있으므로 역할에 알맞은 클래스를 붙여야 한다. .block {} // 더 높은 단계의 추상(abstraction) 혹은 구성요소(component)를 나타낸다. .block__element {} // block의 자식 | 구성요소 .block--modifier {} // block의 다른 상태 | 버전 | 종류를 나타낸다. 사용 예시 .person {} .person__hand {}..

🌕 Front/✨ CSS 2021. 5. 3. 13:50