healthy-5 님의 블로그

제17장. 반응형 웹 만들기

우리가 웹사이트를 보는 화면의 크기는 모두 같지 않습니다.데스크톱 모니터에서는 화면이 넓지만 노트북은 조금 작고, 태블릿과 스마트폰에서는 화면의 폭이 훨씬 좁아집니다.만약 웹페이지를 데스크톱 화면에만 맞추어 만든다면 스마트폰에서는 글자가 너무 작게 보이거나, 이미지가 화면 밖으로 벗어나거나, 여러 개의 메뉴가 한 줄에 들어가지 않는 문제가 발생할 수 있습니다.이러한 문제를 해결하기 위해 사용하는 중요한 웹디자인 방식이 반응형 웹(Responsive Web Design)입니다.반응형 웹은 별도의 PC용·모바일용 페이지를 각각 만드는 개념이라기보다, 하나의 웹페이지가 사용자의 화면이나 사용 환경에 맞추어 레이아웃과 콘텐츠 표현을 유연하게 조절하도록 설계하는 방법입니다.🎯 한 줄 핵심 정리반응형 웹은 vie..

제16장. Grid 레이아웃

웹페이지를 만들다 보면 요소를 단순히 가로나 세로 한 방향으로 배치하는 것만으로는 부족한 경우가 있습니다.예를 들어 쇼핑몰의 상품 목록처럼 여러 개의 카드를 가로와 세로로 일정하게 배치하거나, 웹페이지 전체를 상단·메뉴·본문·사이드바·하단 영역으로 나누어 구성해야 할 수 있습니다.이처럼 행(Row)과 열(Column)을 함께 사용하여 화면을 체계적으로 구성할 때 유용한 CSS 기능이 Grid 레이아웃입니다.앞 장에서 배운 Flex가 주로 하나의 축을 중심으로 요소를 배치하는 데 강하다면, Grid는 행과 열이라는 두 방향을 함께 사용하여 2차원적인 레이아웃을 만드는 데 강한 방식입니다.🎯 한 줄 핵심 정리CSS Grid는 부모 요소에 display: grid를 지정하고 행(Row)과 열(Column)을..

제15장. Flex 레이아웃

웹페이지에서는 여러 요소를 가로로 나란히 배치하거나, 일정한 간격으로 정렬하거나, 화면 크기에 따라 다음 줄로 자연스럽게 내려가도록 만들어야 하는 경우가 많습니다.예를 들어 상단 메뉴, 상품 카드, 버튼 그룹, 사진 목록처럼 여러 요소를 일정한 방향과 간격으로 배치하는 작업이 필요합니다.CSS에서는 이런 작업을 편리하게 처리하기 위해 Flexbox, 흔히 Flex 레이아웃이라고 부르는 기능을 제공합니다.Flex의 핵심은 각각의 요소 위치를 하나씩 계산하는 것이 아니라, 부모 요소에 배치 규칙을 지정하여 그 안의 자식 요소들을 유연하게 정렬하는 것입니다.🎯 한 줄 핵심 정리Flex 레이아웃은 부모 요소에 display: flex를 지정한 뒤, 주축과 교차축을 기준으로 자식 요소의 방향·정렬·간격·줄바꿈을..

웹페이지를 만들 때 HTML 요소는 화면에 글자나 이미지로만 존재하는 것이 아닙니다.제목, 문단, 이미지, 버튼, 메뉴 같은 각각의 요소는 브라우저 화면에서 일정한 공간을 차지하는 하나의 사각형 상자(Box)처럼 처리됩니다.이 상자가 어떤 구조로 이루어져 있는지를 설명하는 것이 CSS 박스 모델(Box Model)입니다.박스 모델은 크게 content, padding, border, margin의 네 영역으로 구성됩니다.CSS로 웹페이지의 크기와 간격을 정확하게 조절하려면 이 네 영역의 차이를 이해하는 것이 매우 중요합니다.🎯 한 줄 핵심 정리CSS 박스 모델은 HTML 요소를 content → padding → border → margin의 여러 겹으로 이루어진 상자로 이해하는 개념이며, 웹페이지의 ..

HTML로 웹페이지의 구조를 만들었다면 CSS를 이용해 글자의 모양과 색상, 배경 등을 보기 좋게 꾸밀 수 있습니다.웹페이지에서 글자는 단순히 내용을 전달하는 수단만은 아닙니다. 제목과 본문을 구별하고, 중요한 내용을 강조하며, 사용자가 글을 편안하게 읽도록 만드는 중요한 디자인 요소입니다.CSS에서는 color, font-size, font-family, font-weight, line-height 등의 속성을 이용하여 글자의 모습을 조절할 수 있습니다.또한 background-color로 배경색을 지정하고 text-align, text-decoration 등을 이용하여 글자의 정렬과 표현 방법도 변경할 수 있습니다.이번 장에서는 복잡한 디자인보다 읽기 좋은 웹문서를 만드는 데 꼭 필요한 글자와 색상 ..

앞 장까지는 HTML을 이용해 제목, 문단, 이미지, 표, 폼, 레이아웃 등 웹페이지의 구조를 만드는 방법을 배웠습니다.그런데 HTML만으로 만든 웹페이지는 내용과 구조는 갖추고 있어도 디자인은 단순합니다.제목의 색을 바꾸고 싶다면 어떻게 해야 할까요? 글자의 크기를 키우거나, 배경색을 넣거나, 버튼을 보기 좋게 만들거나, 콘텐츠 사이의 간격을 조절하려면 어떻게 해야 할까요?이때 사용하는 것이 CSS(Cascading Style Sheets)입니다.HTML이 웹페이지의 구조와 의미를 담당한다면 CSS는 그 구조가 화면에서 어떻게 보일 것인지를 담당합니다.이번 장에서는 CSS의 기본 원리인 선택자, 속성, 속성값을 이해하고 CSS를 HTML에 적용하는 세 가지 방법과 여러 스타일이 충돌할 때 어떤 규칙이 ..

📘 제11장. HTML 레이아웃 구성하기웹페이지를 열어 보면 모든 내용이 한곳에 뒤섞여 있지 않습니다.보통 맨 위에는 로고와 사이트 이름이 있고, 그 아래에는 메뉴가 있습니다. 중앙에는 핵심 콘텐츠가 배치되고 옆에는 관련 정보가 있으며, 가장 아래에는 저작권이나 연락처 같은 정보가 들어갑니다.이처럼 웹페이지를 목적에 따라 여러 영역으로 나누어 구성하는 것을 레이아웃(Layout)이라고 합니다.HTML에서는 처럼 특별한 의미 없이 영역을 묶는 요소도 있지만, HTML 공부방 웹 개발을 기초부터 공부합니다. 홈 HTML CSS HTML 강좌 ..

웹사이트는 정보를 보여 주기만 하는 공간이 아닙니다.우리는 검색창에 검색어를 입력하고, 로그인 화면에서 아이디와 비밀번호를 입력합니다. 쇼핑몰에서는 배송지를 선택하고, 설문조사에서는 여러 항목 중 하나를 선택합니다. 문의 게시판에서는 긴 문장을 작성한 뒤 전송 버튼을 누릅니다.이처럼 사용자가 정보를 입력하고 선택하여 서버 등에 전달하기 위한 화면을 만드는 HTML 기능이 폼(Form)입니다.HTML에서는 을 중심으로 , , , , 등의 요소를 조합하여 다양한 입력 화면을 만들 수 있습니다.이번 장에서는 실제 로그인이나 회원가입 화면을 만들기 전에 HTML 폼이 어떤 구조로 작동하는지 기본 원리를 알아보겠습니다.🎯 한 줄 핵심 정리HTML 폼은 안에 , , , , 등을 배치하여 사용자가 정보를 입력..

웹페이지가 글자로만 구성되어 있다면 정보를 전달하는 데 한계가 있습니다.여행 블로그에는 여행지 사진이 필요하고, 쇼핑몰에는 상품 이미지가 필요합니다. 통계나 가격, 제품 사양처럼 여러 값을 비교해야 할 때는 표가 훨씬 효율적입니다.HTML에서는 이미지를 넣을 때 요소를 사용하고, 표를 만들 때는 , , , 등의 요소를 사용합니다.하지만 이미지를 화면에 보이게 하고 표에 선을 그리는 것만으로 끝나는 것은 아닙니다.이미지에는 적절한 대체 설명(alt)을 작성해야 하고, 표는 행과 열의 관계가 명확하도록 구조를 만들어야 합니다. 이러한 작성 방식은 사용자뿐 아니라 화면 읽기 프로그램 같은 보조기술과 검색엔진이 콘텐츠를 이해하는 데도 도움이 됩니다.이번 장에서는 이미지와 표를 올바르게 사용하는 기본 원리를 ..

웹페이지에는 수많은 정보가 들어갑니다.상품의 특징, 여행 준비물, 강의 목차, 메뉴, 검색 결과처럼 여러 항목을 한꺼번에 보여 주어야 할 때가 많습니다. 이런 내용을 문장으로 길게 나열하면 읽기가 어렵지만 목록(List)으로 정리하면 훨씬 빠르게 내용을 파악할 수 있습니다.웹의 또 다른 중요한 특징은 링크(Link)입니다.사용자가 글자를 클릭하면 다른 웹페이지로 이동하고, 같은 문서의 특정 위치로 바로 이동할 수도 있습니다.이번 장에서는 목록을 만드는 , , 와 링크를 만드는 태그를 살펴보겠습니다.🎯 한 줄 핵심 정리HTML에서는 , , 로 정보를 체계적인 목록으로 만들고, 와 href를 사용해 다른 웹페이지나 현재 문서의 특정 위치로 연결할 수 있습니다.🎯 이 장에서 배우는 내용순서 없는 목록 순..