healthy-5 님의 블로그

제15장. Flex 레이아웃

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

제14장. 박스 모델(Box Model) 이해하기

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

제13장. 글자와 색상 꾸미기

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를 사용해 다른 웹페이지나 현재 문서의 특정 위치로 연결할 수 있습니다.🎯 이 장에서 배우는 내용순서 없는 목록 순..

웹페이지에서 가장 많이 보게 되는 것은 무엇일까요?바로 제목과 문장입니다.뉴스 기사에는 큰 제목과 소제목이 있고, 블로그 글에는 본문 문단이 있습니다. 중요한 문장은 굵게 표시되거나 기울여 강조되기도 하고, 내용이 바뀌는 곳에는 구분선이 들어가기도 합니다.HTML에서는 이러한 글의 구조를 단순히 크게 보이게 만드는 것이 아니라, 각각의 역할에 맞는 태그를 사용해 의미를 표시합니다.이번 장에서는 제목을 만드는 부터 , 문단을 만드는 , 줄바꿈 , 강조를 위한 과 , 그리고 구분선 까지 살펴보겠습니다.🎯 한 줄 핵심 정리HTML에서는 제목, 문단, 강조, 줄바꿈을 각각 알맞은 태그로 구분해 작성함으로써 사람이 읽기 좋고 브라우저와 검색엔진도 이해하기 쉬운 문서 구조를 만들 수 있습니다.🎯 이 장에서 배우..

HTML 태그를 몇 개 알고 있다고 해서 바로 웹페이지를 제대로 만들 수 있는 것은 아닙니다.집을 지을 때 기둥과 벽돌을 어디에 놓아야 하는지 기본적인 설계가 필요하듯, HTML 문서에도 대부분의 웹페이지가 공통적으로 따르는 기본 골격이 있습니다.대표적인 것이 , , 안녕하세요. HTML을 공부하고 있습니다.처음에는 여러 태그가 한꺼번에 등장하기 때문에 복잡해 보입니다.하지만 큰 구조만 보면 간단합니다.↓↓ 나의 첫 웹페이지 HTML 공부를 시작했습니다.파일 이름을 예를 들어index.html로 저장한 다음 웹브라우저에서 열어 봅니다.화면에는 주로나의 첫 웹페이지HTML 공부를 시작했습니다.라는 내용이 나타납니다.반면 안의 내용은 본문 제목으로 나타나는 것이 아니라 브라우저 탭..