HTML 개념노트 20편HTML 전체 복습 + 미니 프로젝트 만들기지금까지 HTML의 기본 구조, 텍스트, 링크, 이미지, 목록, 표, 폼, 시맨틱 태그, 접근성까지 정리했습니다. 마지막 편에서는 전체 내용을 복습하고, 배운 태그를 활용해서 간단한 개인 소개 페이지를 만들어 보겠습니다.1. HTML 시리즈에서 배운 내용HTML은 웹페이지의 구조를 만드는 언어입니다. 처음에는 태그가 많아 보여서 어렵게 느껴질 수 있지만, 결국 핵심은 문서의 내용을 의미에 맞게 구조화하는 것입니다.분류배운 태그 / 개념역할문서 구조, 안녕하세요, 웹 개발을 공부하고 있습니다 HTML, CSS, JavaScript를 차근차근 배우는 중입니다. 프로필 ..
HTML 개념노트 19편HTML 실전 레이아웃 구조 만들기지금까지 배운 HTML 태그들을 조합하면 실제 웹페이지의 기본 구조를 만들 수 있습니다. 이번 글에서는 header, nav, main, section, article, aside, footer를 활용해서 실전형 웹페이지 뼈대를 구성해 보겠습니다.1. 레이아웃이란?레이아웃은 웹페이지의 요소들이 화면에 배치되는 구조를 의미합니다. 쉽게 말해 상단에는 무엇을 둘지, 본문은 어떻게 나눌지, 하단에는 어떤 정보를 넣을지 정하는 것입니다.쉽게 말하면?HTML 레이아웃은 웹페이지의 방 배치도입니다. header는 현관, nav는 길 안내판, main은 거실, aside는 보조 공간, footer는 하단 안내판처럼 생각하면 됩니다.2. 기본 웹페이지 구조가장 ..
HTML 개념노트 18편HTML 접근성 기초 이해하기웹페이지는 다양한 사용자가 이용합니다. 마우스를 쓰기 어려운 사용자, 화면을 볼 수 없는 사용자, 키보드로만 조작하는 사용자도 있습니다. 이번 글에서는 HTML에서 접근성을 높이는 기본 방법을 정리합니다.1. 접근성이란?접근성은 더 많은 사용자가 웹페이지를 불편 없이 이용할 수 있도록 만드는 것을 의미합니다. 단순히 장애가 있는 사용자만을 위한 개념이 아니라, 모바일 사용자, 키보드 사용자, 느린 인터넷 환경의 사용자에게도 중요합니다.쉽게 말하면?접근성은 “누가 사용해도 이해하고 조작할 수 있는 웹페이지”를 만드는 기본 배려입니다.2. 이미지에는 alt 속성을 작성하기alt는 이미지가 보이지 않을 때 대신 표시되는 텍스트입니다. 또한 스크린 리더가 이미..
HTML 개념노트 17편meta 태그와 SEO 기본 이해하기HTML 문서에는 화면에 직접 보이지 않지만 브라우저와 검색엔진이 문서를 이해하는 데 중요한 정보가 들어갑니다. 이번 글에서는 태그와 SEO 기본 개념을 정리해 보겠습니다.1. meta 태그란? 태그는 HTML 문서의 정보를 브라우저와 검색엔진에게 알려주는 태그입니다. 보통 쉽게 말하면? 태그는 웹페이지의 자기소개서 같은 역할을 합니다. 화면에는 보이지 않지만, 문서의 언어, 설명, 화면 크기, 검색 정보 등을 알려줍니다.2. meta 태그는 어디에 작성할까? 태그는 대부분 본문 제목 사용자가 보는 글 제목과 본문은 안에 작성하지만, 브라우저가 문서를 이해하는 데 필요한 정보는 다음 편 예고다음 글에서는 모든 사용자가 ..
HTML 개념노트 16편iframe, video, audio 태그 이해하기웹페이지에는 글과 이미지뿐 아니라 외부 페이지, 영상, 음악 같은 미디어도 넣을 수 있습니다. 이번 글에서는 외부 콘텐츠를 삽입하는 , 영상을 재생하는 , 오디오를 재생하는 태그를 정리해 보겠습니다.1. 미디어 태그란?HTML에서는 웹페이지 안에 다양한 미디어를 넣을 수 있습니다. 대표적으로 유튜브 영상, 지도, 다른 웹페이지, 직접 업로드한 동영상, 음악 파일 등이 있습니다.이때 사용하는 대표 태그가 , , 입니다.쉽게 말하면?은 다른 화면을 내 페이지 안에 넣는 태그이고, 는 영상 플레이어, 는 음악 플레이어를 만드는 태그입니다.2. 태그 태그는 현재 웹페이지 안에 다른 웹페이지나 외부 콘텐츠를 삽입할 때 사용합니다. 유튜브..
HTML 개념노트 15편HTML 엔티티 문자 이해하기HTML에서는 , >, & 같은 문자를 그대로 작성하면 태그나 코드로 해석될 수 있습니다. 이런 특수문자를 안전하게 화면에 표시하기 위해 사용하는 것이 HTML 엔티티 문자입니다.1. HTML 엔티티 문자란?HTML 엔티티 문자는 HTML에서 특별한 의미를 가진 문자를 화면에 그대로 표시하기 위해 사용하는 약속된 표현입니다.예를 들어 기호는 HTML에서 태그의 시작으로 사용됩니다. 그래서 화면에 라는 글자를 보여주고 싶다면 <div>처럼 작성해야 합니다.<div>내용</div>브라우저 출력 결과내용쉽게 말하면?HTML 엔티티 문자는 브라우저에게 “이건 태그로 해석하지 말고 글자로 보여줘”라고 알려주는 표현입니다.2. 왜..
HTML 개념노트 14편class, id, name 속성 차이 이해하기HTML 태그에는 여러 속성을 넣을 수 있습니다. 그중에서도 class, id, name은 CSS, JavaScript, 서버 데이터 전송에서 자주 사용되는 중요한 속성입니다.1. class, id, name은 왜 중요할까?HTML 태그만 작성하면 화면에 요소를 만들 수 있습니다. 하지만 실제 웹페이지에서는 특정 요소에 스타일을 주거나, JavaScript로 선택하거나, 서버로 데이터를 보내야 하는 경우가 많습니다.이때 요소를 구분하기 위해 사용하는 대표적인 속성이 class, id, name입니다.카드 영역쉽게 말하면?class는 여러 요소를 같은 그룹으로 묶는 이름, id는 한 요소만 구분하는 고유 이름, name은 폼 데이터를 서..
HTML 개념노트 13편section, article, aside 태그 이해하기지난 글에서 header, nav, main, footer로 큰 구조를 잡았다면, 이번 글에서는 본문 안의 내용을 더 세밀하게 나누는 , , 태그를 정리해 보겠습니다.1. section, article, aside는 왜 배울까?웹페이지의 본문은 단순히 한 덩어리로만 이루어지지 않습니다. 블로그 글, 뉴스 기사, 상품 상세, 사이드 메뉴, 관련 글처럼 여러 의미의 영역으로 나뉩니다.이때 아무 의미 없이 만 반복하기보다, 내용의 성격에 맞게 , , 를 사용하면 문서 구조가 훨씬 명확해집니다. 주제별 영역 독립적인 글 콘텐츠 보조 정보 영역쉽게 말하면?은 주제별 구역, 은 독립된 글, 는 옆에 붙는 보조 정보라고 생각하면 됩..