목록PRACTICE (67)
whatisthis?
https://mywebproject.tistory.com/116 @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,600&display=swap"); * { margin: 0; box-sizing: border-box; } html { font-family: "Nunito Sans", sans-serif; font-size: 16px; line-height: 1.5; color: #1f2d3d; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; margin: 0 a..
https://mywebproject.tistory.com/107 HTML 훈련 - (9)GitHub Dropdown Menu GitHub Dropdown Menu REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/09-github-dropdown-menu 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에!.. mywebproject.tistory.com var dropdownMenu = document.querySelector(".dropdown-menu") var dropdownButton = document.querySelector(".dropdown-butt..
https://mywebproject.tistory.com/107 HTML 훈련 - (9)GitHub Dropdown Menu GitHub Dropdown Menu REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/09-github-dropdown-menu 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에!.. mywebproject.tistory.com * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxy..
https://mywebproject.tistory.com/104 HTML 훈련 - (8) Receipt REFERENCE (style.css) https://github.com/rohjs/bugless-101/blob/master/html-practice/07-instagram-user-profile/styles.css https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%.. mywebproject.tistory.com @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap"); * { margin: 0; box-si..
https://mywebproject.tistory.com/102 HTML 훈련 - (7) Instagram User profile Instagram User profile 마크업을 위해서 img 태그 / 내용 부분을 나눠서 어떤 태그로 나타낼지 구상해보자. 태그에 대한 내용을 다시한번 복습해보려면? 정의 리스트 Description List (dl) 은 중요하지 않 mywebproject.tistory.com * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica..
https://mywebproject.tistory.com/93 HTML 훈련 - (6) Product Card Product card REFERENCE (style.css) https://github.com/rohjs/bugless-101/blob/master/html-practice/06-product-card/styles.css https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%.. mywebproject.tistory.com @import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); * { margin: 0; box-sizing: border..
https://mywebproject.tistory.com/91 HTML 훈련 - (5) BreadCrumb & Pagination BreadCrumb & Pagination REFERENCE (style.css) https://github.com/rohjs/bugless-101/blob/master/html-practice/05-breadcrumb-and-pagination/styles.css https://edu.goorm.io/learn/lecture/20583/%EA%B.. mywebproject.tistory.com Analysis * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFo..
https://mywebproject.tistory.com/82 @import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap"); * { margin: 0; box-sizing: border-box; } html { font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 1.5; color: #1f2d3d; } ..
https://mywebproject.tistory.com/81 HTML 훈련 - (3) Feature Box 태그를 잘 사용하는 법. Feature Box 란 무엇인지? -제품의 특징 등을 이미지로 나타낸 것. step1. 크게 블록단위로 나눠서 마크업 과 부분, 그리고 상단에 부분으로 나뉜다. Free unlimited private repositorie. mywebproject.tistory.com * { margin: 0; box-sizing: border-box; } 선택자 * 는 html 문서 내 모든 요소를 나타내는 CSS level 1의 선택자이다. >> 선택자에 대한 내용은 추후 포스팅에서 다루도록 하겠다. (REF: https://www.nextree.co.kr/p8468/) ___ b..
* { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; color: #1f2d3d; letter-spacing: -0.03em; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; margin: 0 auto..