개발 기록/HTML_CSS (4) 썸네일형 리스트형 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 속성을 직접 명시를 해.. div 태그의 특징 3가지 (HTML/CSS 내 레벨 확인) 안녕하세요. 이번 시간에는 div 태그의 특징 3가지를 알아보도록 하겠습니다. 오해도 생기고 헷갈리기 쉬운 내용들인데요. 문제도 풀어보시면서 내가 HTML/CSS를 어느 정도 알고 있는지도 확인해 보세요 :) 알고 있으신 내용이면 리마인드를 하실 수 있는 기회가 되고, 모르시는 내용이라면 꼭 숙지를 해주셨으면 좋겠습니다. 첫 번째, div 태그는 Inline level vs Block level 중 어떤 레벨의 태그에 속할까? Block level입니다😄 Inline level과 Block level의 큰 차이점을 보면 Inline은 하나의 라인에 쭉 생성이 돼요. 하지만 Block level은 블록이 만들어지는데요. 여러 개의 를 층층이 쌓게 되면, 블록들이 줄이 바뀌면서 층층이 쌓이게 되겠습니다. 다.. 도대체 HTML / CSS 어디까지 알아야 될까? (HTML, CSS 공부 범위) 웹 개발의 구성 요소 중 HTML과 CSS는 필수 요소입니다. 백엔드 개발을 하신다면 HTML / CSS는 다루시는 일이 많으시지 않으실 텐데요. 웹 서비스를 직접 만드신다면 HTML / CSS 개발은 피할 수 없습니다. 태그 하나하나만 보면 그렇게 어려워 보이지 않지만, 웹 서비스를 만들고자 한다면 프런트 개발을 진행 못하고 있는 모습이에요. 그럼 도대체 HTML과 CSS를 어느 범위까지 알아야 될지, 리스트 정리를 하도록 하겠습니다. 적어도 이 정도는 알아야 프런트 개발을 하실 수 있으실 테니까요. 아래 내용들을 알고 있으신지 한번 확인을 해보세요 😀 HTML의 태그 구분 설명 태그 비고 1 HTML 구조 html, head, body 2 head 내 태그에 사용할 수 있는 태그 meta, title.. 이전 1 다음
