lshjju 님의 블로그

시맨틱 태그(Semantic Tag)란 브라우저와 개발자에게 그 **의미(Semantic)**를 명확히 설명해 주는 태그를 말합니다.단순히 구역을 나누는 나 은 그 안에 무엇이 들었는지 알 수 없지만, 시맨틱 태그를 사용하면 그 내용이 '헤더'인지 '푸터'인지 단번에 알 수 있습니다.🏗️ 주요 시맨틱 태그의 종류웹페이지의 구조를 짤 때 마치 건물의 각 방에 명찰을 붙이는 것과 같습니다. 나의 첫 시맨틱 페이지 홈 소개 블로그 최신 기사 ..

웹의 가장 기본이 되는 언어인 HTML의 정의부터 작성 규칙까지, 표준 가이드에 따라 하나씩 짚어보겠습니다.1. HTML의 정의**HTML(HyperText Markup Language)**은 웹페이지의 뼈대를 만드는 마크업 언어입니다.HyperText: 선형적인 읽기 방식이 아니라, 하이퍼링크를 통해 문서와 문서 사이를 자유롭게 이동할 수 있는 텍스트를 의미합니다.Markup: 태그()를 사용하여 텍스트나 이미지 등의 콘텐츠가 웹 브라우저에서 어떤 역할을 하는지 '표시'하는 것을 의미합니다.2. HTML의 기본 구조와 주요 태그표준적인 HTML5 문서는 다음과 같은 계층 구조를 가집니다.: 문서의 루트(Root) 요소로, 모든 HTML 태그를 감싸는 가장 바깥쪽의 컨테이너입니다. 안녕하세요..

하이퍼링크는 단순히 다른 페이지로 이동하는 기능을 넘어, 이메일 보내기, 전화 걸기, 특정 위치로 이동하기 등 다양한 연결 기능을 수행합니다.1. 태그의 정의와 기본 구조는 **Anchor(닻)**의 약자로, 현재 위치에서 다른 위치로 연결(Link)을 고정한다는 의미를 담고 있습니다.기본 문법: 표시될 텍스트특징: 인라인 요소이며, 기본적으로 파란색 글씨에 밑줄이 그어진 형태로 나타납니다.2. 필수 및 주요 속성 (Attributes)링크의 목적지와 동작 방식을 결정하는 핵심 설정들입니다.href (Hypertext Reference): 이동할 **대상 주소(URL)**를 지정하는 필수 속성입니다.target: 링크를 클릭했을 때 어디에서 열지 결정합니다._self: 현재 창에서 엽니다. (기본값)_..

단순한 정적 이미지를 넘어 동영상과 오디오를 삽입하면 훨씬 풍부한 사용자 경험을 제공할 수 있습니다.1. 비디오 태그 웹 페이지 내에서 동영상을 재생할 때 사용합니다.동작 방식: 이미지와 달리 닫는 태그()가 필요하며, 태그 사이에 "브라우저가 비디오를 지원하지 않습니다"라는 안내 문구를 넣을 수 있습니다.주요 속성:src: 비디오 파일의 경로를 지정합니다.controls: 재생, 일시정지, 볼륨 등 컨트롤 바를 표시합니다. (가장 많이 쓰임)autoplay: 페이지가 로드되면 자동으로 재생합니다. (대부분의 브라우저에서 muted와 함께 써야 작동함)loop: 영상이 끝나면 처음부터 다시 재생합니다.poster: 영상이 로딩 중이거나 재생 전일 때 보여줄 썸네일 이미지를 지정합니다.2. 오디오 태그 웹..

웹 환경에서 이미지는 전체 페이지 용량의 큰 비중을 차지하기 때문에, 상황에 맞는 포맷을 선택하는 것이 개발자의 핵심 역량 중 하나입니다.각 파일 형식의 특징과 현재 모던 웹의 흐름을 정리해 드릴게요.1. 주요 이미지 포맷 비교포맷특징장점단점주요 용도JPG (JPEG)손실 압축 방식사진처럼 색상이 다양한 이미지에 최적화, 용량이 작음투명 배경 불가능, 압축 반복 시 화질 저하실사 사진, 배경 이미지PNG무손실 압축 방식투명 배경(Alpha) 지원, 문자나 로고가 선명함사진의 경우 JPG보다 용량이 훨씬 큼로고, 아이콘, 투명도가 필요한 이미지GIF256색 제한짧은 애니메이션(움짤) 가능, 투명 배경 지원색상 표현 한계로 화질이 낮고 용량이 비효율적간단한 배너 애니메이션, 유머 짤SVG벡터(Vector) ..

이미지 태그는 텍스트 위주의 문서에 활력을 불어넣으며, 정보를 직관적으로 전달하는 핵심적인 역할을 합니다.1. 태그의 기본 정의 태그는 웹 페이지에 이미지를 삽입할 때 사용합니다.이 태그는 닫는 태그가 없는 **빈 태그(Empty Tag)**이며, 속성을 통해 이미지의 경로와 정보를 설정합니다. 이미지 출처 - https://www.learntosap.com/htmltutorial13.html2. 반드시 알아야 할 핵심 속성 (Required Attributes)이미지를 제대로 표시하기 위해 꼭 필요한 두 가지 속성입니다.src (Source): 이미지 파일의 **경로(URL)**를 지정합니다. 내 컴퓨터의 상대 경로이거나 웹상의 절대 경로일 수 있습니다.alt (Alternative Text): 이미..

표는 단순히 선을 긋는 것이 아니라, 행(Row)과 열(Column)의 관계를 명확히 정의하여 복잡한 데이터를 한눈에 보여주는 도구입니다.1. 테이블의 기본 구조 태그표를 만들 때는 바깥에서 안쪽으로 들어가는 계층 구조를 이해하는 것이 중요합니다.: 표의 전체 범위를 지정하는 최상위 태그입니다. (Table Row): 표의 한 행을 만듭니다. (Table Header): 행이나 열의 제목 칸을 만듭니다. 기본적으로 글자가 굵게 표시되고 가운데 정렬됩니다. (Table Data): 표의 일반적인 데이터(내용) 칸을 만듭니다.2. 테이블의 구조화 태그 (더 의미 있게 만들기)표가 길어지면 머리글, 본문, 바닥글로 나누어 관리하는 것이 좋습니다.: 표의 제목 부분(헤더)을 그룹화합니다.: 표의 실제 데이터 본..

웹 페이지에서 메뉴바, 게시글 목록, 용어 사전 등을 만들 때 반드시 사용되는 핵심 요소들입니다.1. 순서가 있는 목록 (Ordered List)항목 앞에 1, 2, 3과 같은 **순서(번호)**가 자동으로 붙는 목록입니다. (List Item): 목록의 각 항목을 나타내는 태그로, 반드시 또는 안에 위치해야 합니다.특징: type 속성을 통해 숫자 대신 알파벳(A, a)이나 로마자(I, i)로 순서를 바꿀 수 있습니다.HTML 라면 물을 끓인다. 면과 스프를 넣는다. 3분간 더 끓인 후 맛있게 먹는다.2. 순서가 없는 목록 (Unordered List)항목 앞에 번호 대신 **불릿(점, 기호)**이 붙는 목록입니다.용도: 순서가 중요하지 않은 메뉴 항목, 특징 나열, 쇼핑 리스트 등에 주..

텍스트 태그는 단순히 글자를 화면에 보여주는 것을 넘어, 검색 엔진이나 스크린 리더에게 이 글자가 어떤 의미인지를 알려주는 아주 중요한 역할을 합니다.1. 블록 레벨 태그 (구조를 잡는 태그)이 태그들은 한 줄을 통째로 차지하며, 글의 전체적인 흐름과 구역을 나눕니다. (Heading): 제목을 나타냅니다. 부터 까지 있으며, 숫자가 작을수록 중요도가 높고 글자 크기도 큽니다. (Paragraph): 본문의 문단을 나눌 때 사용합니다. 가장 많이 쓰이는 텍스트 태그입니다. (Break): 줄 바꿈을 합니다. 닫는 태그가 없는 빈 태그입니다. (Horizontal Rule): 가로 구분선을 긋습니다. 주제가 바뀔 때 시각적으로 분리하는 용도입니다. (Block Quote): 긴 인용문을 나타낼 때 사용하며..

입력창의 동작과 제약 조건을 세밀하게 제어하는 태그의 핵심 속성들에 대해 알아보겠습니다.이 속성들은 사용자가 폼을 작성할 때의 편의성을 높여주고, 잘못된 데이터가 제출되지 않도록 막아주는 중요한 역할을 합니다.1. autofocus (자동 커서 활성화)페이지가 로드되자마자 해당 입력창에 커서가 자동으로 위치하게 만듭니다.설명: 사용자가 마우스로 입력창을 클릭하지 않아도 바로 타이핑을 시작할 수 있게 돕습니다.특징: 한 페이지 내에서 단 하나의 요소에만 사용할 수 있습니다. 로그인 페이지의 아이디 입력창 등에 주로 쓰입니다.2. placeholder (안내 문구)입력창이 비어 있을 때, 무엇을 입력해야 할지 알려주는 힌트를 연한 회색 글자로 표시합니다.설명: 입력창의 용도를 직관적으로 전달하며, 실제 입..