lshjju 님의 블로그

HTML Primary title Title step Title step Title step Title step Title step Title step It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making ..

백엔드에서는 폼태그를 어떻게 사용할까?프론트엔드에서 폼태그를 사용한다는것은 결국 백엔드와 협업한다는 의미입니다.그러한 이유로 백엔드에서 html을 어떻게 사용하는지 알고 있다면 도움이 될것입니다.프론트엔드 폼 코딩과 백엔드 폼코딩이 어떻게 다른지 아래 예제 코드로 체크해 두기를 바랍니다.아래 코딩은 아직 코딩중인 기본 코드입니다. 질문등록 제목 내용 코드 출처https://wikidocs.net/161911 2-16 질문 등록 기능 추가하기* `[완성 소스]` : [https://github.com/pahkey/sbb3/tree/v2..

시맨틱 태그(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)항목 앞에 번호 대신 **불릿(점, 기호)**이 붙는 목록입니다.용도: 순서가 중요하지 않은 메뉴 항목, 특징 나열, 쇼핑 리스트 등에 주..