HTML (7) 썸네일형 리스트형 [HTML] Form 다루기 HTML에서 Form은 웹에서 사용자의 정보를 입력받기 위해 사용한다.예를들면 로그인, 회원가입, 게시판 글쓰기 등 우리는 사용자의 데이터를 입력받아 이러한 데이터를 입력 받는다.이때 입력받는 데이터들의 묶을 폼(Form)그리고 데이터를 폼 데이터(Form Data) 또는 필드(Field) 라고 한다.즉, 폼(Form)은 사용자의 정보를 입력받을 수 있게 만들어 놓은 형식 이라고 보면 된다. 폼 태그 요소는 정보를 제출하기 위하여 어디서부터 어디까지가 양식인지 지정하는 역할을 한다. 이름: 이메일: 속성action - 양식 데이터를 처리할 서버 프로그램의 URImethod - 양식을 제출할 때 사용할 HTTP 메서드post - 양식 데이터를 요청 본.. [HTML] 🖼️ 이미지 & 멀티미디어 목차 이미지 태그절대경로 vs 상대경로오디오 태그하이퍼링크 태그 이미지 태그 속성src 필수이며, 이미지로의 경로를 지정한다.alt이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt 의 값을 읽어 사용자에게 이미지를 설명하므로, 웹 접근성 차원에서 매우 유용하다.또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여준다.height 이미지 높이를 지정하는 속성이며, 값으로 픽셀(px)과 퍼센트(%) 단위로 지정할 수 있으며 픽셀로 설정시에는 숫자만 입력하면 된다.width 이미지 너비를 지정하는 속성이며, 값으로 픽셀(px)과 퍼센트(%) 단위로 지정할 수 있으며 픽셀로 설정시에는 숫자만 입력하면 된다.그외의 속성 링크: 이미지 .. [HTML] Inline VS Block Element Inline VS Block Element모든 HTML 태그들은 각 태그의 용도에 따른 default display value(기본 표시 값)를 가진다.이때 default display value는 블록 레벨 요소(Block-level Elements)와 인라인 레벨 요소(Inline-level Elements) 두 가지 범주로 나뉜다.예를들면 태그는 블록 레벨 요소이고, 태그는 인라인 레벨 요소이다.DOCTYPE html>html lang="en"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>Inline blocktitle> sty.. [HTML] Sementic Tag 란? 📖 Sementic Tag란시멘틱 태그(Sementic Tag)에서 Sementic의 사전적 의미는 "의미론적"이라는 뜻으로,HTML에서 시멘틱 태그란 의미를 가지는 태그를 말한다. 가령 제목과 같이 큰 글씨를 나타낼 때 태그를 사용하여 나타낼 수 있다. 태그는 페이지 제목이라는 의미를 갖고 있다.반면 태그에 style을 입혀 태그와 동일한 스타일을 표시할 수 있다. 하지만 이것은 HTML 의미(Sementic)를 제대로 살리지 못한 것 이기 때문에 지양할 필요가 있다.페이지 Layout을 만들거나 HTML 마크업을 할 때 최대한 의미있는 Sementic Tag를 사용하길 권장한다. 장점검색엔진 최적화웹 접근성 향상가독성 향상📖 HTML Sementic Elements : 페이지에 대한 정보를 .. [HTML] HTML 기본 태그 ✏️ 글꼴 태그 ~ Heading웹 페이지의 제목 또는 부제목을 표현할 때 사용하며, 숫자가 작을 수록 큰 제목을 표시하는 데 사용한다. Paragraph하나의 문단을 표시할 때 사용한다. Horizontal Rule가로로 선을 긋는 태그이다. (종료태그 없음) Break줄바꿈 태그로 HTML에서 개행 역할을 합니다. (종료태그 없음) Italic텍스트를 이텔릭체로 표시할 때 사용한다. Emphasis텍스트를 이텔릭체로 강조할 때 사용한다. Bold텍스트를 진하게 표시할 때 사용한다. 텍스트를 진하게 강조할 때 사용한다.📄목록 태그 Ordered List순서가 있는 목록을 표현할 때 사용한다.type 속성으로 글머리 기호를 변경할 수 있다. Unordered Lists순서가 없는 목록을.. [HTML] Emmet 💡Emmet 이란?Emmet은 HTML과 CSS의 자동완성 기능을 제공하여, 작성 시간을 아주 빠르게 단축 시켜주는 확장 기능이다. ✍ HTML Emmet 1️⃣ HTML 표준 구조 ! 입력 후 Tab키 : 간단하고 빠르게 HTML 기본구조를 만들어 준다. 2️⃣ 자식노드 > div>ul>li 입력 후 Tab키 : >를 사용하여 자식 요소를 생성할 수 있다. 3️⃣ 형제노드 + div>ul+ol+div 입력 후 Tab키 : +를 사용하여 한 요소와 같은 단계에 위치한 요소를 생성할 수 있다. 4️⃣ 반복하기 * div>ul>li*3 입력 후 Tab키 : *를 사용하여 요소를 반복해서 생성할 수 있다. 5️⃣ 클래스 부여.. [HTML] HTML 이란? HTMLHTML이란, Hyper Text Markup Language의 약자로서 웹 페이지를 만드는 언어이다.그리고 Markup은 원래 인쇄할 때 원고에서 교정표시를 나타내는 뜻으로 써, 말 그대로 Mark 하는 것을 말한다.웹 문서에서는 특정 텍스트에 Mark하기 위하여 HTML 태그(tag)라는 것을 사용한다.제목내용이 들어올 자리입니다.네이버로 이동위 예시와 같이 제목과 같이 크게 볼 수 있도록 하려면 태그를 사용내용과 같은 글의 문단을 표시하려면 태그를 사용합니다.다른 웹 문서로 이동하기 위하여 태그를 사용합니다.HTML 태그(Tag)HTML 태그는 웹 문서에 어떤 표시를 해주는 것이다.예를들면 글자 크기, 글자색, 글자 모양 등을 변경하거나 하이퍼 링크와 같은 문서연결 기능을 넣을 수도 있.. 이전 1 다음
