Web Programming (18) 썸네일형 리스트형 #. POSITION 속성(1) 목차 1. POSITION 속성 2. Top, LEFT, RIGHT, BOTTOM과 RELATIVE 3. 회색 사이트, 메뉴바 구현, 드롭다운 1. POSITION 속성 Position absolute section > div { width:50%; height:25%; background-color:blue; position:absolute; } section > div:nth-child(1) { top:0; left:0; } section > div:nth-child(2) { background-color:gold; top:10%; left:10%; } position을 설정하면 부모 element에 관계 없이 해당 영역을 벗어난 위치 지정이 가능하다. z-index section > div:nth-.. 실습. 2차, 3차 드롭 다운 메뉴 만들기 목차 2차 드롭 다운 메뉴 만들기 3차 드롭 다운 메뉴 만들기 2차 드롭 다운 메뉴 만들기 기본 레이아웃 HTML Home Articles Notice Free Development Member Join Sign In Find Account Faq CSS /* 폰트 시작 */ @font-face { font-family: 'LotteMartDream'; font-style: normal; font-weight: 400; src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfon.. #. 메뉴와 레이아웃(2) 목차 6. inline-grid 7. text-shadow, box-shadow, 시맨틱 태그 8. 상단바 구현 9. display로 레이아웃 만들기 6. inline-grid inline-grid HTML * 10 * 3 * 4 CSS .inline-grid { font-size:0; } .inline-grid > * { font-size:1rem; display:inline-block; vertical-align:top; } .width-10p { width:10%; } .box-1 { border:20px solid black; } .box-1 > div { height:100px; background-color:red; } .box-1 > div:nth-child(2n) { background-c.. 실습. Image Grid, 상단바 구현하기 목차 Material Image Grid 구현하기 상단바 구현하기 Material Image Grid 구현하기 step 1. 기초 마크업, 기초 CSS HTML section.section-1.con-min-width>.con>.img-list-box + tab CSS /* 노말라이즈 시작 */ body, ul, li { margin:0; padding:0; list-style:none; } a { color:inherit; text-decoration:none; } /* 노말라이즈 끝 */ /* 라이브러리 시작 */ .con { margin-left:auto; margin-right:auto; } /* 라이브러리 끝 */ /* 커스텀 시작 */ :root { --site-width:700px; } .c.. #. 메뉴와 레이아웃(1) 목차 1. border-radius와 inherit 그리고 a의 노말라이즈 2. 회색 사이트, 메뉴바 구현 - 1차 메뉴 3. body의 노말라이즈와 클래스 선택자 그리고 BEM 4. 클래스 5. ul, li, h1 1. border-radius와 inherit 그리고 a의 노말라이즈 border-radius : 모서리 둥글게 처리하기 CSS div { width:15%; /* 부모 엘리먼트 너비 기준 */ height:100px; background-color:red; display:inline-block; /* 모서리 50px를 둥글게 처리 */ border-radius:50px; /* border-radius:50%; */ } 실습 HTML : section > div*5 + tab CSS body.. 실습. 선택자(class 포함)/상단바 만들기 목차 1. 선택자(+class) 이해하기 실습 2. bem을 이용해서 상단바 만들기 실습 1. 선택자(+class) 이해하기 실습 실습1. element 통일하기 기존 VER HTML 메뉴 아이템 1 메뉴 아이템 2 메뉴 아이템 3 메뉴 아이템 4 CSS /* 노말라이즈 */ a { color:inherit; text-decoration:none; } /* 커스텀 */ /* 메뉴박스 */ nav { text-align:center; } /* 메뉴 */ nav > section { /* 메뉴에는 배경색이 있다. */ background-color:#dfdfdf; /* 메뉴는 너비가 최대한 줄어든다. */ display:inline-block; border-radius:5px; padding:0 10px; .. #.HTML, CSS 기초와 DISPLAY 속성(2) 목차 6. BMX 사이트의 상단바 따라만들기 7. 이미지 8. margin, padding과 inline vs inline-block 9. nth-child 10. block 요소 정렬 6. BMX 사이트의 상단바 따라만들기 만드는 모든 과정 정리본 https://sihyun1118.tistory.com/98 BMX 사이트의 상단바 따라만들기 사이트 제목 BMX a{ display: block; text-align:center; font-size: 3rem; text-decoration: None; color: black; font-weight:bold; letter-spacing: -.2rem; } 메뉴바 만들기(1) - 무식한 방법,, | BRAND | VISUAL | STYLE | MEDIA sih.. 실습. 이미지 정렬하기&margin, padding 적용하기 목차 1. 이미지 정렬하기 2. margin, padding 적용하기 3. 블록 요소 정렬하기 1. 이미지 정렬하기 방법 1. nbsp와 br 사용하기 HTML CSS img { width:300px; } 방법2. nbsp와 br 사용, div 하나에 이미지를 3개씩 감싸기 HTML CSS img { width:300px; } 방법3. nbsp와 br 사용, div 하나에 이미지를 3개씩 감싸기 HTML CSS img { width:300px; } section { height:50px; } 방법4. nbsp 사용, div 하나에 이미지를 3개씩 감싸기, div 사이에 nav 넣고 인라인 CSS로 높이 지정 HTML CSS img { width:300px; } section { height:50px; }.. 이전 1 2 3 다음