워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

오늘 방문자님이 이곳(http://martian36.tistory.com/789)의 글을 보고 연습하시면서 다른 속성을 적용했는데 안되는 것을 보고 질문을 주셔서 답변해드립니다. 


Project_(4).zip



현재 문제가 되고 있는 부분이 메뉴바의 ul 태그 부분인데요. padding:10px 0;으로 되어있어서 상하 패딩만 적용했습니다. 방문자님의 경우 패딩을 적용하지 않고 마진을 적용하면 같은 결과가 나오지 않을까해서 마진을 입력해보았더니 적용이 안돼서 왜 그런 것인가 의문을 가진 것이었습니다.


웹표준에 의하면 CSS에서 상하 마진의 경우 함몰(Collapse)되는 경우가 있습니다. 위의 경우가 바로 여기의 예에 해당합니다. 



실제로 상하 마진을 적용하면 부모요소와의 관계에서는 함몰되지만 마진이 없어지는 것은 아니라서 하단 마진의 경우 부모요소를 벗어나서 적용되고 상단 마진은 그대로 나타나서 "메뉴바 만들기"라는 글자가 있는 요소와 마진이 존재합니다. 마진의 함몰은 좌우로 배치돼있는 content1과 content2의 경우는 발생하지 않습니다. 이 둘의 박스가 상하로 있는 경우는 아래와 같이 어느 한쪽의 마진만 적용되므로 다른 한쪽은 함몰된 것입니다.



그런데 위처럼 두개의 요소가 상하로 있는 경우는 어느 한쪽의 요소의 마진이 함몰되지만 아래처럼 좌우로 반복하다가 아래로 내려가는 경우는 다릅니다. 



각각의 요소의 마진이 적용돼서 나타납니다.


이러한 의도되지 않은 마진의 함몰을 방지하려면 여러가지 방법이 있습니다.



상황에 따라서 부모 요소에 overflow:auto;를 적용하거나, 보더나 패딩을 위와 같이 적용하면 됩니다. 하지만 가장 간단한 방법이 메뉴바인 ul에 대해서 패딩을 적용하면 편하겠죠. 


이처럼 CSS는 여러가지 상황에 따라서 다르게 나타나는 의도되지 않은 결과에 따라서 유효적절하게 대처하는 많은 경험이 필요합니다. 자주 해보면 되는 것입니다. 어느 것을 적용해도 웹표준입니다. 



loyalty , , ,

댓글 (6)

댓글 목록

천추 access_time

ㅋㅋ 잘봤습니다. 코딩 하던 때가 엇그제 같은데.. div, layer, margin, padding 이 4가지 개념만 이해코딩의 70%는 완성인데요..

베누시안 access_time

네 div 태그에 마진과 패딩만 잘 알아도 레이아웃이 되는게 CSS죠.

윈컴이 access_time

좋은 정보 감사합니다~ ^^

베누시안 access_time

댓글 감사합니다.

stormrage access_time

ㄷㄷ 이렇게 상세하게 알려주셔서 감사합니다.
말씀하신대로 의도하지 않은 결과를 예측하는 것은 자주 사용하는 방법밖에 없는것 같네요..ㅜㅜ

베누시안 access_time

네 많이 해보는 수밖에 없습니다.