일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- async/await
- 스코프 체인
- CORS
- props와 state 차이점
- 변수 생성 단계
- 자바스크립트의 클래스
- 주소창에 naver 입력시 일어나는 일
- 브라우저 렌더링원리
- webpack
- 자바스크립트
- 가상 dom
- polyfill
- undeclared
- 프로미스
- 자바스크립트 함수
- 이벤트 캡처링
- 얕은 복사
- 리액트
- 로컬 스토리지
- 서버 사이드 렌더링
- CSS
- react
- 클라이언트 사이드 렌더링
- 세션 스토리지
- 리액트의 생명 주기
- MPA
- 호이스팅
- 실행 컨텍스트
- 깊은 복사
- 이벤트 버블링
Archives
- Today
- Total
Gapus Dev Blog
[HTML] 웹페이지의 HTML에 대해 본문
HTML 이란?
- 하이퍼텍스트 마크업 언어 (HyperText Markup Language)로 프로그래밍 언어는 아니고, 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 마크업 언어이다.
- HTML은 Element(요소)로 이뤄져 있으며 데이터 항목, 텍스트, 이미지 등을 담거나 담지 않을 수도 있다.
태그 란?
- 하나의 약속된 명령어이며 고유한 기능을 가지고 있다.
- <p>내용</p> 처럼 시작태그 + 내용 + 종료태그로 구성된 한 줄을 HTML Element라고 부른다.
- <> 안에 내용에 따라 기능이 달라 질 수 있다.
- 일부 단독으로 사용되는 태그도 존재한다.
태그의 종류
- 문자를 꾸며주는 태그
- <strong>굵게</strong>
- <u>밑줄</u>
- <h5>제목</h5>
- 빈 태그
- <br /> 다음 줄로 내리는 태그
- <hr /> 수평선을 그려주는 태그
- 특정 기능이 있는 태그와 속성(attribute, value)
- 특정 태그는 속성과 속성의 값을 주어 더 구체적인 기능을 구현 가능하다.
- 기능이 있는 태그
- <button>버튼</button> 버튼 생성
- <textarea>입력창</textarea> 여러 줄 텍스트 입력창
- 태그의 속성과 값
- <input type="text" /> 한 줄 텍스트 입력창 생성
- <input type="password" /> 비밀번호 입력창 생성
- <input type="color" /> 색상 선택창 생성
- <input type="checkbox" /> 체크박스(여러 개 선택) 생성
- <input type="radio" name="group"/> 라디오버튼(1개 선택) 생성 => name이 동일한 radio 버튼 중 1개만 선택
- <label>라벨</label> 체크박스, 라디오버튼 등에 라벨 생성
- <a href="<http://google.com>">구글로 가기</a> 현재창에서 이동
- <a href="<http://google.com>" target="_blank">구글로 가기</a> 새창에서 이동
- 이미지와 동영상 태그
- 이미지를 보여주는 태그
- <img src="/이미지경로/이미지.확장자" /> 일반 이미지
- <div style="background-image: url('/이미지경로/이미지.확장자')" /> 배경 이미지
- 동영상을 보여주는 태그
- 이미지를 보여주는 태그
<video muted="muted" autoplay="autoplay" loop="loop">
<source src="동영상위치.mp4">
</video>
태그의 특징
- Block, Inline
- Block
- 페이지의 가로넓이 전체를 차지하는 요소
- <h1 />, <div />, <p /> 등 해당
- Inline
- 자신의 크기만큼만 차지하는 요소
- <span />, <input />, <button /> 등 해당
- Block
- 종속 태그
- 종속 태그란 다른 태그와 상호작용을 해서 작동하는 태그
- <ol></ol> 번호를 매겨 순서가 있는 리스트(ordered list)를 만들 때 사용
- <ul></ul> 순서 없이 모양의 리스트(unordered list)를 만들 때 사용
- HTML 문서 구조 및 설명
<!DOCTYPE html>
<html>
<!-- 검색엔진을 위한 영역 -->
<head>
<title>사이트 이름</title>
<meta name="description : 사이트 소개"/>
<meta property="og:image" /> <!-- 다른 사이트(카톡 등)에 이미지 알리기 -->
<meta property="og:title" /> <!-- 다른 사이트(카톡 등)에 사이트명 알리기 -->
<meta property="og:description" /> <!-- 다른 사이트(카톡 등)에 사이트상세 알리기 -->
</head>
<!-- 브라우저에서 보여지는 영역 -->
<body>
<header></header> <!-- 웹페이지의 상단(또는 상단메뉴) 부분 -->
<nav></nav> <!-- 웹페이지의 좌측(또는 우측메뉴) 부분 -->
<section></section> <!-- 웹페이지의 독립적인 섹션 부분 -->
<article></article> <!-- 웹페이지의 블로그, 뉴스, 기사 등 -->
<footer></footer> <!-- 웹페이지의 하단 기업정보 부분 -->
</body>
</html>
'프론트엔드 > HTML,CSS' 카테고리의 다른 글
[CSS] CSS에 대해 2 - 정렬 (0) | 2023.01.05 |
---|---|
[CSS] CSS에 대해 1 (0) | 2023.01.05 |