목록PRACTICE/REVERSE-ENGINEERING (21)
whatisthis?
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..
https://mywebproject.tistory.com/79 HTML 훈련 - (1) Ad Banner 위와 같은 광고 배너를 만들어보자. 우선 예제 이미지를 보고 각 파트로 나눠보면 총 3개의 파트로 나눌 수 있다. - button을 누르면 URL로 이동하도록 하면 될 것 같다. __ 코드 작성 __ Unlimited download mywebproject.tistory.com 위 예제에서 사용한 style.css의 코드를 분석해보자. * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open ..
월 화 수 목 금 1교시 왕초보 HTML & CSS 모각코 왕초보 HTML & CSS 모각코 왕초보 HTML & CSS 2교시 JavaScript 스킬업 JavaScript 스킬업 3교시 JavaScript 시작반 JavaScript 시작반 JavaScript 시작반 점심시간 4교시 SASS 기초반 HTML & CSS 포트폴리오반 Open Seminar HTML & CSS 포트폴리오반 SASS 기초반 5교시 모각코 모각코 style.css Reference https://docs.google.com/spreadsheets/d/1ek_DsO7zDM9bW2K4ZlAUAkzIWTf0Y377y-8ZGCMyleE/edit#gid=0 https://github.com/rohjs/bugless-101/blob/mas..
https://mywebproject.tistory.com/68 HTML) HTML 기초 下-(1) (Table/ Media File / Etc) 17. Table 기본 구조 테이블 헤더 테이블 데이터 테이블 태그의 기본 구조는 table>tr>th+td 이다. 셀이 헤더에 관련된 것 = th 셀이 데이터에 관련된 것 = td table row = tr (row는 가로줄) 즉, tr 묶음당 가로.. mywebproject.tistory.com style.css Reference https://docs.google.com/spreadsheets/d/1ek_DsO7zDM9bW2K4ZlAUAkzIWTf0Y377y-8ZGCMyleE/edit#gid=0 https://github.com/rohjs/bugless-..