Study/HTML

1. Head Tag란? 태그는 문서 안의 정보를 정의합니다. 태그는 favicon, 타이틀, SNS에 전송할 때 타이틀, 설명, url, 이미지 표현합니다.2. head 안에 배치할 수 있는 요소브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다.NAVER문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다.요소는 현재 문서와 외부 리소스의 관계를 명시합니다.다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

Form은 웹에서 사용자의 정보를 입력받기 위해 사용합니다.Form : 입력받는 데이터들의 묶는 것Form data, Field : 데이터1. 폼 태그 : 어디서부터 어디까지가 양식인지 지정하는 역할 ✍ 코드 이름: 이메일: 👉 결과 속성action : 양식 데이터를 처리할 서버 프로그램의 URImethod : 양식을 제출할 때 사용할 HTTP 메서디action, method는 서버 측에 값을 보낼 때 사용post : 요청 본문으로 전송합니다. (저장, 수정)get : URI의 쿼리스트링으로 붙여서 전송합니다.2. Input 태그 요소로 데이터를 입력받을 수 있습니다.type 속성을 통하여 다양한 방..

1. 이미지 태그 태그는 HTML 문서에 이미지를 넣습니다.src필수이며 이미지로의 경로를 지정합니다.alt이미지의 텍스트 설명이며 필수는 아니지만 웹 접근성 차원에서 매우 유용합니다.height이미지 높이를 지정하는 속성입니다.width이미지 너비를 지정하는 속성입니다.2. 오디오 태그 태그는 HTML 문서에 소리 콘텐츠를 넣을 때 사용합니다.src 속성과 source 요소를 사용할 수 있습니다. 3. 비디오 태그 태그는 영상 콘텐츠를 HTML 문서에 삽입할 때 사용합니다.src 속성과 source 요소를 사용할 수 있습니다. 4. 오디오 & 비디오 태그 속성controls : 컨트롤 바(재생막대)를 표시합니다.autoplay : 오디오나 비디오를 자동으로 실행합니다.loop : 오디오나 비..

모든 HTML 태그들은 각 태그의 용도에 따라서 default display value를 가집니다.Default display value는 Block-level Elements와 Inline-level Elements로 나뉩니다.분할을 의미하고 이는 큰 단위로 묶어주는 컨테이너 같은 역할을 합니다.여러 개의 태그들을 묶어주는 주머니 역할을 합니다.즉, 특정 아이템을 꾸미는 역할입니다.1. Block Element블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 블록을 만듭니다.ex) ~ , , , , 화면 구성이나 레이아웃을 짤 때는 블록 레벨 요소를 사용합니다.블록 레벨 요소는 한 칸을 모두 차지하기 때문에 세로로 나열됩니다.width, height, margin 속성이 적용됩니다.2. In..

1. Semantic Tag란?HTML에서 semantic tag는 의미를 가지는 태그를 의미합니다. 태그에 style을 입혀 태그와 동일한 스타일을 표시할 수 있습니다.그러나 이는 semantic을 제대로 살리지 못한 것이기 때문에 지양할 필요가 있습니다.페이지 Layout을 만들거나 HTML 마크업을 할 때 최대한 의미있는 Semantic Tag를 사용하길 권장합니다.2. Semantic 태그 이점검색엔진 최적화 : 만든 웹이 검색 후 상단에 올라올 확률이 높아집니다.웹 접근성 향상 : 화면 낭독기가 강조하는 부분 등을 잘 압니다.가독성 향상3. HTML Semantic Elements : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다. : 다른 페이지나 같은 페이지 안에 다른 부분으..

1. Emmet이란?Emmet은 HTML과 CSS의 자동완성 기능을 제공하여, 작성 시간을 아주 빠르게 단축시켜주는 확장 기능입니다.2. HTML Emmet2-1. HTML 표준 구조! 사용! 입력 후 Tab키 : 간단하고 빠르게 HTML 기본 구조를 만들어 줍니다. 2-2. 자식노드> 사용div>ul>li 입력 후 Tab키 : > 를 사용하여 자식 요소를 생성할 수 있습니다. 2-3. 형제노드+ 사용div>ul+ol+div 입력 후 Tab키 : + 를 사용하여 한 요소와 같은 단계에 위치한 요소를 생성할 수 있습니다. 2-4. 반복하기* 사용div>ul>li * 3 입력 후 Tab키 : * 를 사용하여 요소를 반복해서 생성할 수 있습니다. 2-5. 클래..

1. HTML이란?HTML(Hyper Text Markup Language)은 마크업 언어로서, 웹 페이지를 만드는 언어입니다.웹 문서에서는 특정 텍스트에 Mark하기 위하여 HTML 태그(tag)라는 것을 사용합니다.제목내용이 들어올 자리입니다.네이버로 이동 태그 : 제목 표현 태그 : 글의 문단 표시 태그 : 다른 웹 문서로 이동2. HTML 태그(tag)HTML 태그는 웹 문서에 표시하는 것입니다.2-1. 태그 구조2-2. 태그 특징태그는 시작 태그와 종료 태그로 이루어져 있습니다.태그 사이에 콘텐츠를 선언합니다.HTML 태그 = 요소(Element) = 노드(Node)3. HTML 파일의 기본 구조HTML 파일은 , HTML 기본 구조 필수로 존재하는 것은 알아둡시다. 1. 현재..