김방울

See the Pen JjGoemv by KIMBANGUL (@KIMBANGUL) on CodePen. A:only-child : A 엘리먼트는 그 부모의 유일한 자식 A:not(B) : B가 아닌(B속성을 가지지 않은) A만을 선택. nav.menubar > ul > li > a:not(:only-child)::after{ content:" [+]"; font-size: 1.5rem; } nav.menubar > ul > li:hover > a:not(:only-child)::after{ content:" [-]"; } nav.menubar ul.submenu > li > a:not(:only-child)::after{ content:" [+]"; font-size: 1rem; } nav.menubar..

ej 프레임워크 사용법 살펴보기 - ej-spacing-xs-30: xs 이상에서 칼럼의 여백을 30px로 둔다. - ej-md-1-4: md 이상에서 100% 기준으로 1/4 사용하겠다. - ej-hidden-below-500: 500 미만의 세계에서 숨긴다. - ej-hidden-below-xs: xs 이하의 세계에서 숨긴다. - ej-clear-both-below-md: md 이하의 세계에서 clear both를 건다. - ej-ratio-100-50: 너비 100% 높이 50% 비율을 가진다. - ej-ratio-lg-100-100: lg 이상에서 너비 100% 높이 100% 비율을 가진다. - ej-ratio-400-100-100: 화면크기 400 이상에서 너비 100% 높이 100% 비율을 가..

See the Pen practice11-grid by KIMBANGUL (@KIMBANGUL) on CodePen. HTML 12칼럼 반응형 그리드 프레임워크 만들기 CSS div.container{ margin: 0 auto; max-width: 980px; } div.row{ margin: 0 -15px; } .row::after{ content:""; display: block; clear: both; } .row > .col{ float: left; box-sizing: border-box; width: 100%; padding: 15px; } /* 모바일 */ .row > .col.col-xs-1{ width: 8.3333%; } .row > .col.col-xs-2{ width: 16.666..

flex 기초 1 1 2 3 4 5 div.contents{ background-color: coral; display: flex; flex-direction: row; height: 500px; .item{ background-color: red; flex-basis: 50px; } } display: flex 자식 요소를 flex하게 다루겠다. flex-grow: 1; 화면의 나머지 공간을 특정비율로 가져가겠다. flex-shrink: 1; 부모가 줄어드는 상황에서도 너비를 얼마나 유지하는가 높을수록 빨리 줄어들음 flex-direction: row, column 가로배열, 세로배열 flex-basis: 높이 혹은 너비 flex 기초 2 1 2 3 4 5 body{ display: flex; just..

See the Pen practice05 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML 회사소개 비전 개요 연혁 특허권 오시는길 직무윤리강령 제품소개 Photonic Solutions Fiber Sensing System OMAS IMU 뉴스&이벤트 뉴스 이벤트 채용공고 채용공고 고객지원 본사/지사/법인 위치안내 대리점 관련 문의하기 회사소개 비전 개요 연혁 특허권 오시는길 직무윤리강령 제품소개 Photonic Solutions Fiber Sensing System OMAS IMU 뉴스&이벤트 뉴스 이벤트 채용공고 채용공고 고객지원 본사/지사/법인 위치안내 대리점 관련 문의하기 SCSS // 폰트 불러오기 @import url(https://fonts.googleapis.c..

See the Pen practice04 by KIMBANGUL (@KIMBANGUL) on CodePen. float를 이용한 풀다운 메뉴 야옹이1 방울이 1 방울이 1 방울이 2 방울이 3 방울이 2 방울이 3 방울이 4 야옹이2 방울이 방울이 방울이 방울이 야옹이3 야옹이4 -------------------보이지 않는 벽---------------- 하하하하 /* 노말라이즈 */ul, li { margin:0; padding:0; list-style:none;} a { color:inherit; text-decoration:none;}/* 노말라이즈 */ /* 메뉴박스 */nav.top-menu { text-align:center;} /* 메뉴아이템 */nav.top-menu li { backgr..

float과 부작용 해결 1 float의 기본값은 nonefloat -> 최대한 너비 다이어트를 해서 위로 올라갈 수 있으면 올라간다.(display: inline-block 과 비슷)display: inline-block은 display:block 을 포기하는 것display:block은 레고 블럭처럼 엘리먼트 사이의 공백 또는 엔터(뉴라인)이 무시됩니다.가끔 우리는 뭔가를 한줄에 표시할 때 그것들 사이의 여백이 없기를 바랄 때가 있습니다. display:inline-block; 을 써도 되나 공백이 없어야 할 때 1234 section{ background-color: pink; float: right;} 오른쪽에 4-3-2-1 순으로 붙음. float과 부작용 해결 2 div의 기본적인 width,..

반응형 웹 최근 다양한 모바일기기(=디바이스)의 보급으로 하나의 웹사이트로 데스크탑, 태블릿PC, 모바일 등 다양한디바이스 해상에 따라 사이트의 레이아웃이 변환되는 것 가변그리드 레이아웃 1. 그리드 시스템: 디자인의 일괄성을 유지하기 위해 화면을 칼럼으로 나누어 요소들을 배치하는 것 2. 가변성: 넓이 값이 정해져 있지 아니해서 사이즈에 따라 변환되는 것 3. 가변 그리드: 화면의 폭을 고정해 놓지 않고 창의 폭에 따라 콘텐츠 너비가 달라지게 하는 것 clear: both; /* 나열의 속성이 올라오는 것을 막아줌 */ 가변그리드 만들어보기 aside section footer (기준이 되는 요소의 넓이 / 전체를 감싸는 요소의 넓이) * 100 = %값 부모요소 100%, 자식요소 1400px일 때 ..