jonbeo 님의 블로그

지금까지 Flexbox로 멋진 정렬과 반응형 레이아웃을 만들었다면,이제는 2차원(행 + 열) 레이아웃을 더 강력하게 다룰 수 있는CSS Grid의 차례입니다. Flex가 “흐름 기반”이라면,Grid는 “정해진 틀 기반”입니다.그만큼 레이아웃 설계가 더 직관적이고 강력해져요! ✅ display: grid란?.container { display: grid;} 이 한 줄로 Grid 컨테이너가 만들어집니다.그리고 이 안에 있는 자식 요소들은 **행(row)과 열(column)**을 기준으로 정렬됩니다. 🧩 기본 속성 정리속성설명grid-template-columns열(column) 개수 및 너비 설정grid-template-rows행(row) 개수 및 높이 설정gap셀 사이 간격 (row + column 동..

웹페이지를 만드는 기초 언어인 HTML과 CSS를 아주 쉽게 하나씩 설명 해보는 포스팅을 할까 합니다 😊첫 번째 포스팅은 HTML이란 무엇인지, 누가, 어떤 상황에서 사용하는지를 천천히 알아보도록 할게요!✅ HTML이란?HTML은 HyperText Markup Language의 줄임말이에요. 말 그대로, 하이퍼텍스트를 작성하기 위한 마크업 언어랍니다! 📌 여기서 잠깐!하이퍼텍스트란?👉 다른 페이지나 정보로 연결되는 문서예요. 우리가 인터넷에서 링크를 클릭해서 다른 페이지로 이동하잖아요? 그게 하이퍼텍스트예요!✅ HTML은 왜 필요할까?우리가 보는 모든 웹사이트는 결국 HTML로 구성되어 있어요.예를 들어, 네이버, 유튜브, 구글, 인스타그램 같은 사이트도 처음에는 HTML로 기본 뼈대를 만들어요.H..