healthy-5 님의 블로그

제12장. CSS란 무엇인가?

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

제11장. HTML 레이아웃 구성하기

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

제10장. 폼(Form) 만들기

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

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

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

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

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

우리가 인터넷에서 보는 뉴스 기사, 블로그, 쇼핑몰, 회사 홈페이지에는 제목과 문장, 사진, 메뉴, 버튼, 링크 등이 일정한 구조로 배치되어 있습니다.브라우저는 이러한 내용을 제멋대로 판단해서 화면에 보여주는 것이 아닙니다. 웹페이지를 만든 사람이 “이 문장은 제목이다”, “이것은 이미지다”, “이 글자는 다른 페이지로 연결되는 링크다”라는 의미를 표시해 주어야 합니다.그 역할을 하는 것이 바로 HTML입니다.HTML은 웹 개발을 시작할 때 가장 먼저 배우는 기술이며, 이후 CSS와 JavaScript를 이해하기 위한 기본 토대가 됩니다.🎯 한 줄 핵심 정리HTML은 웹페이지의 제목, 문장, 이미지, 링크 같은 콘텐츠에 의미와 구조를 부여하여 브라우저가 웹페이지를 올바르게 해석하도록 만드는 마크업 언어..

📘 제4장. 웹 개발자는 어떤 일을 할까?웹사이트 하나를 만드는 데는 생각보다 많은 사람이 참여합니다. 화면을 만드는 개발자, 서버와 데이터를 관리하는 개발자, 사용하기 편한 화면을 설계하는 디자이너가 서로 협력합니다.처음 웹 개발을 공부하면 프론트엔드, 백엔드, 풀스택, UI, UX 같은 용어부터 낯설게 느껴집니다. 하지만 웹사이트가 만들어지는 과정을 기준으로 생각하면 어렵지 않습니다.이번 장에서는 웹 개발 분야의 대표적인 직무와 각 역할이 어떻게 연결되는지 알아보겠습니다.🎯 한 줄 핵심 정리웹 개발은 사용자가 보는 화면을 만드는 프론트엔드와 서버·데이터를 처리하는 백엔드가 중심이 되고, 디자인·UI·UX 등 여러 역할이 협력하여 하나의 웹서비스를 완성하는 과정입니다. 웹 개발자의 역할을 프론트엔드..

우리가 매일 접속하는 뉴스 사이트, 쇼핑몰, 블로그, 기업 홈페이지는 어떤 과정을 거쳐 만들어질까요? 많은 사람들은 HTML 파일만 작성하면 웹사이트가 완성된다고 생각하지만, 실제로는 기획부터 디자인, 개발, 서버 구축, 공개, 유지관리까지 여러 단계를 거쳐야 합니다. 이번 장에서는 웹사이트가 만들어지는 전체 과정을 이해하기 쉽게 살펴보겠습니다. 🎯 한 줄 핵심 정리 (Fish Sentence)웹사이트는 기획, 디자인, 개발, 호스팅, 공개, 유지관리의 과정을 거쳐 완성되며, 모든 단계가 서로 연결되어 안정적인 서비스를 제공합니다.🎯 이 장에서 배우는 내용웹사이트의 목적과 기획화면 구조와 디자인 설계HTML, CSS, JavaScript 작성도메인과 호스팅웹서버에 파일 올리기웹사이트 수정과 관리🌐 ..