본문 바로가기

Web Programming/Step3. HTML&CSS&JS 심화

 (16)
#. 메뉴와 레이아웃(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; }..
실습. BMX 사이트의 상단바 따라만들기 사이트 제목 BMX a{ display: block; text-align:center; font-size: 3rem; text-decoration: None; color: black; font-weight:bold; letter-spacing: -.2rem; } 메뉴바 만들기(1) - 무식한 방법,, |&nbsp&nbspBRAND&nbsp&nbsp|&nbsp&nbspVISUAL&nbsp&nbsp|&nbsp&nbspSTYLE&nbsp&nbsp| &nbsp&nbspMEDIA&nbsp&nbsp|&nbsp&nbspNEWS&nbsp&nbsp|&nbsp&nbspSTORE&nbsp&nbsp |&nbsp&nbspCUSTOMER&nbsp&nbsp| div{ font-weight:bold; text-align:center..
#. HTML, CSS 기초와 DISPLAY 속성(1) 목차 1. 엘리먼트의 부모/자식/형제 관계 2. DISPLAY 속성 3. a,br 태그 4. 젠코딩과 자식/후손 선택자 그리고 text-align 5. hover, transition, text-decoration, nbsp div{ font-size:50px; font-weight:bold; color:rgba(255,100,0,.5) } section{ font-size:15rem; letter-spacing: -100px; color:#FF00AA; } font-weight / 글자 두께 font-size:15rem / 글자 크기 기본값의 15배 letter-spacing / 자간(음수도 가능) color:#FF00AA / 0~F까지 설정 가능 color:rgba(255,100,0,.5) / 투명도..

티스토리툴바