프로그래밍 삽질 중

css 적용 전 css 적용 후 HTML SAMSUNG 제품 혜택 갤럭시 캠퍼스 스토어 큐커 식품관 #YouMake #스마트싱스 아웃렛 고객 서비스 스토리 멤버십 디지털 프라자 사회공헌 비즈니스 로그인 로그아웃 CSS p { font-family: 'Nanum Gothic', sans-serif; } :root { --white: #fff; --black: #000; } * { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; color: var(--black); } html { font-size: 10px; } header { background-color: var(--white); } .header-container..

* 출처 : https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io * 답안 참고 https://velog.io/@jaedie/CSS-Diner-%EC%99%84%EB%A3%8C%EB%8B%B5%EC%95%88%EC%9A%94%EC%A0%90%EC%A0%95%EB%A6%AC-13 CSS Diner 완료(답안/요점정리) (1/3) CSS selector 연습에 좋은 자료인 CSS Diner를 완료하고 요약 및 답안을 정리하려고 한다. CSS Diner는 코드로만 보면 이해가 쉽게 되지 않는 부분을 visual aid를 가미하여 좀 더 쉽고 재미있게 CSS se..

* 출처 : https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io * 답안 참고 https://velog.io/@jaedie/CSS-Diner-%EC%99%84%EB%A3%8C%EB%8B%B5%EC%95%88%EC%9A%94%EC%A0%90%EC%A0%95%EB%A6%AC-13 CSS Diner 완료(답안/요점정리) (1/3) CSS selector 연습에 좋은 자료인 CSS Diner를 완료하고 요약 및 답안을 정리하려고 한다. CSS Diner는 코드로만 보면 이해가 쉽게 되지 않는 부분을 visual aid를 가미하여 좀 더 쉽고 재미있게 CSS se..

* 출처 : https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io * 답안 참고 https://velog.io/@jaedie/CSS-Diner-%EC%99%84%EB%A3%8C%EB%8B%B5%EC%95%88%EC%9A%94%EC%A0%90%EC%A0%95%EB%A6%AC-13 CSS Diner 완료(답안/요점정리) (1/3) CSS selector 연습에 좋은 자료인 CSS Diner를 완료하고 요약 및 답안을 정리하려고 한다. CSS Diner는 코드로만 보면 이해가 쉽게 되지 않는 부분을 visual aid를 가미하여 좀 더 쉽고 재미있게 CSS se..

* 인프런 '파이널 코딩 테스트 : 프론트엔드' 공부 후 만들어 보는 자료 * 100% 똑같지 않음(저작권이 걸리기 때문) * 네이버 영화 화면(2022.06.05 기준) * 메인화면(검은색 바탕) + footer 화면(회색 바탕) 만들어 볼 것 * html,css가 주 목적 [index.html] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80..

* 인프런 '파이널 코딩 테스트 : 프론트엔드' 공부 후 만들어 보는 자료 * 100% 똑같지 않음(저작권이 걸리기 때문) * 네이버 영화 화면(2022.06.05 기준) * 메인화면(검은색 바탕) + footer 화면(회색 바탕) 만들어 볼 것 * html,css가 주 목적 [index.html] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80..

* React를 하다보니 html/css의 부족함을 알게되고... html/css -> js -> react로 다시 회귀 중 * 코딩애플 수업 후 복습하는 과정 [핵심 정리] Q1. 작성하기, 제목이 오른쪽으로 치우침 -> 왼쪽으로 정렬하고 싶다면? -> width: 100%; float: left; Q2. input 태그의 width 크기는 무엇을 기준? -> 그걸 감싸는 의 width 기준으로 함 [완성본] https://9lh66.csb.app/

* React를 하다보니 html/css의 부족함을 알게되고... html/css -> js -> react로 다시 회귀 중 * 코딩애플 수업 후 복습하는 과정 * 참고자료 [css] clear(none, both, left, right) 의 속성 (tistory.com) [핵심 정리] Q1. 글과 이미지를 동시에 배치하려면? [ 글 : 80% ] [ 이미지 : 20% ] -> 핵심은 각각 float: left; 사용할 것 Q2. 컨테이너에 왜 display: block; margin-left: auto; margin-right: auto; 넣는 이유는? -> container를 웹사이트 중앙에 배치하기 Q3. clear: both;는? -> 왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다 * flo..