HTML (6) 썸네일형 리스트형 CSS Grid 사용법 정리 (grid column, row에 이름 명시) 안녕하세요. 저번 시간에는 grid를 활용하여 표를 만들어 보았습니다. 또한 grid-column, grid-row 속성을 활용하여 원하는 셀들을 합치는 과정도 학습을 하였는데요. (이전 학습 URL: https://mjlabs.tistory.com/48) 이번 시간에는 셀들을 합치는 과정에서 조금 더 쉽게 합칠 수 있도록, column과 row에 이름을 부여해 보도록 하겠습니다 :) 1 2 3 4 5 6 7 8 html 코드를 위와 같이 작성을 하였습니다. grid 속성을 부여하기 위해서 container div를 만들고, 자식 태그로 box div를 8개 만들었습니다. 다음으로 css 코드를 작성하겠습니다. .container { display: grid; grid-template-columns: [.. CSS Grid 사용법 정리 (grid-template-columns, grid-template-rows) Grid는 행과 열을 나누어 UI를 만들기 위해서 사용이 됩니다. HTML의 블록 태그를 사용하면 태그들이 층층이 쌓이게 되고, 인라인 태그를 사용하게 되면 한 줄로 태그들이 쌓이게 되는데요. Grid 없이 UI를 만들고 화면을 분리를 하게 되면 정말 쉽지 않다는 것을 느낄 수 있습니다. Grid의 사용법과 많이 쓰는 속성들에 대해서 정리를 하도록 하겠습니다 :) 1. 기본 Grid 만들기(grid-template-columns, grid-template-rows) 부모 태그인 container div를 하나 생성하고, 자식 태그인 box div를 4개 생성하였습니다. 1 2 3 4 Grid를 만들 때는 자식 태그가 아닌, 부모 태그(예제에서는 container div)에 Grid 속성을 직접 명시를 해.. Ep 3. HTML / CSS 입문 30일 챌린지(마무리) - 독학 개발 공부 유튜브 영상: 링크 HTML / CSS 입문을 위한 30일 챌린지를 진행하였고, 진행하면서 배웠던 점과 내용들을 공유를 해볼게요 :) HTML / CSS 30일 챌린지를 통해서 배운 점 HTML / CSS를 활용하여 웹 페이지를 만들 수 있다. 정말 어설프게 알고 있던 HTML/CSS 지식을 학습할 수 있었다. (e.x, block 태그, inline 태그의 특징 / 이미지는 지정하지 않을 시 원본 크기 / width와 height 기준 등등) 기준이 생겼기에 모르는 내용은 찾아서 학습을 할 수 있다. 자연스럽게 생긴 HTML / CSS의 자신감 연습 페이지 (결과물) 2주 차에서 만든 링크트리 보다 난이도를 올렸습니다. MDN을 통해서 개념정리를 하고 3개의 웹 페이지를 더 만들면서 연습을 해봤는데요... Ep 2. HTML / CSS 입문 30일 챌린지 - 링크트리 만들기 (2주차) 유튜브 리뷰 링크: https://youtu.be/sS2b8EZqYa8 2주차 목표: html/css 연습을 위한 미니 프로젝트 1개 완성 mdn 매일매일 복습하기 (급해하지 않고 직접 눈으로 보면서 자세히 익히기) 2022-11-07 월요일 (8일차) 어떤 프로젝트를 만들어 볼 것인가? -> 내가 지금 사용해보고 있는 웹 페이지는? 링크트리 실습으로도 괜찮겠다. 첫 부분부터 복습, 앞에는 확실히 수월합니다. inline level 태그 - https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements block level 태그 - https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elem.. Ep 1. HTML / CSS 입문 30일 챌린지 (1주차) 유튜브 vlog: https://youtu.be/FTxB6ZEzs6k 챌린지 설명 및 마음가짐: 30일 동안 매일매일 html과 css을 학습하고 실력 향상을 목표!! 초심자로서 그리고 비 전공자의 마음으로 챌린지를 진행합니다. (실제로 html, css 초심자입니다 ㅠ.ㅠ) 목표: HTML/CSS를 사용하여 웹사이트를 만들 때 자신감이 있다. (2개 프로젝트 정도 진행) 반응형까지 학습하여 웹이나 스마트폰에서도 화면이 제대로 보일 수 있도록 한다. 2022-10-31 월요일 (1일차) 어떤 방법으로 학습할지 서치 ref: https://developer.mozilla.org/en-US/docs/Learn/HTML ref: https://developer.mozilla.org/en-US/docs/Lear.. 도대체 HTML / CSS 어디까지 알아야 될까? (HTML, CSS 공부 범위) 웹 개발의 구성 요소 중 HTML과 CSS는 필수 요소입니다. 백엔드 개발을 하신다면 HTML / CSS는 다루시는 일이 많으시지 않으실 텐데요. 웹 서비스를 직접 만드신다면 HTML / CSS 개발은 피할 수 없습니다. 태그 하나하나만 보면 그렇게 어려워 보이지 않지만, 웹 서비스를 만들고자 한다면 프런트 개발을 진행 못하고 있는 모습이에요. 그럼 도대체 HTML과 CSS를 어느 범위까지 알아야 될지, 리스트 정리를 하도록 하겠습니다. 적어도 이 정도는 알아야 프런트 개발을 하실 수 있으실 테니까요. 아래 내용들을 알고 있으신지 한번 확인을 해보세요 😀 HTML의 태그 구분 설명 태그 비고 1 HTML 구조 html, head, body 2 head 내 태그에 사용할 수 있는 태그 meta, title.. 이전 1 다음
