그리드 레이아웃2

• 반응형 웹사이트 - 블록은 Flex로 레이아웃은 Grid 로 모바일 퍼스트로 만든 퍼블리시를 grid layout으로 감싸서 피씨와 태블릿에 대한 반응형을 완성하고 싶어 ChatGPT의 말:모바일 퍼스트로 제작된 퍼블리시를 CSS Grid Layout으로 감싸서 PC 및 태블릿에서 반응형을 완성하려면 다음과 같은 접근 방식이 좋다.1. HTML 구조 검토모바일 기준으로 이미 퍼블리싱되어 있다면, 기존 div 또는 section 태그를 감싸는 grid-container를 추가하고, 여기에 display: grid;를 적용하면 된다.예제:html  헤더 메인 콘텐츠 사이드바 푸터2. 기본 스타일 (모바일 퍼스트)모바일에서는 기본적으로 flex 또는 block 형태로 쌓여 있을 가능성이 크므로, grid를 기본적으로 1.. 코딩ㆍ개발 정보/HTML 연습 2025. 3. 4.

• [CSS Grid] 레이아웃에 어울리는 태그 세트 CSS Grid 레이아웃 자체는 어떤 HTML 태그와도 잘 작동하지만, 의미론적 HTML을 유지하는 것이 웹 접근성과 유지보수성에 도움이 될 수 있는 태그 세트는 어떤 것이 있어? CSS Grid 레이아웃을 사용할 때, 의미론적 HTML을 유지하면서 웹 접근성과 유지보수성을 높일 수 있는 다양한 HTML 태그 세트가 있습니다. 각 태그는 특정 의미와 용도를 가지고 있어, 콘텐츠의 구조와 의미를 명확하게 전달할 수 있습니다. 다음은 이러한 태그 세트의 예시입니다.1. 네비게이션 바 Home Services Contact  nav: 네비게이션 링크 그룹을 정의ul/li: 목록 항목을 구조화a: 링크 요소  2. 아티클 및 섹션 Article Title Section.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 26.