개요 공통 코드를 사용하면서 팝업 생성시 팝업을 감싸는 class에 height : auto 옵션을 부여하는데 이로 인해 팝업 크기가 증가하지 않아 문제가 되고 해결했던 방식 정리 및 개념 학습 해결 height : auto 가 걸려있다면 height-min 을 지정하면 해당 높이 이하로 떨어지지 않기 때문에 auto 적용을 무시할 수 있다. :auto 속성 개념 auto 속성은 Inline-block 에서의 기능과 block 에서의 기능이 다릅니다. Inline-Block 요소에서 auto 는 내용물의 크기에 맞춰 자동 크기조절의 의미를 가집니다. block 요소에서의 auto 는 height 의 경우 Inline-block 요소와 마찬가지로 자식의 크기에 맞춰서 조절됩니다. width 의 경우 100..

목표] header 부분] 좌측 : 아이콘 중앙 : 이름 우측 : auth 기능 body 부분] 좌측 : global nav menu bar 우측 상단 : tab 메뉴 우측 하단 : content 사용한 html] 이름 menu1 menu2 menu3 사용한 css] .header_text { float: left; margin-left: 60px; margin-top: 60px; } .header { background-color: #EEEFF1; position: relative; box-sizing: border-box; padding: 0 30px 0 26px; height: 150px; overflow: hidden; } .imgcontainer { float: left; width: 180px..

css CSS 란? : HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어. 과거에는 HTML에 디자인적 요소도 같이 넣어서 작업했다면 HTML의 본연의 목적인 구조화된 문서를 작성하고 디자인은 css파일로 입히는 형태로 프로젝트를 진행해야한다. 효과] 구조화된 HTML은 알아보기 쉬우며 문서의 해독 속도가 빨라진다 웹 디자이너와 웹 프로그래머 간의 협업이 용이하고 유지보수와 일관성 유지에 획기적이다. 트래픽도 줄여 모바일 환경에서의 요금관련도 줄이고 로딩도 빨라지는 효과가 있다. 연습하고 있는 페이지에 css 적용을 좀더 현업에서 사용되는 식으로 적용해 보았다. 우선 header, 네비게이션 바, 내용물(추후 SPA 로 구현) 만 해놓은 상태이다. common.c..