[HTML ,CSS] HTML 기초

hosik kim·2021년 8월 8일

CSS html 코드스테이츠

With CodeStates

목록 보기

26/45

💡HTML 기본 구조와 문법

HTML이란?

1. HTML

웹페이지를 만들기 위한 언어로 웹브라이저 위에서 동작하는 언어
HyperText Markup Language의 약자

2. TAG

부등호(<>)로 묵인 HTML의 기본 구성 요소
태그의 형식

<태그명 속성명1 = "속성값1" 속성명 = "속성값2"> 컨텐츠 </태그명>

Tag는 컨첸츠를 감싸서 그 정보의 성격과 의미를 정의한다.
여는 태그가 있으면 닫는 태그도 있어야한다.
닫는 태그 앞에는 '/'가 붙는다.
속성은 태그의 부가적인 정보가 들어온다.

//아래 예시에서 href는 속성명
// http;//velog.io/@hosickk 는 속성값이다.
// href 속성은 컨텐츠인 내 블로그가 velog.io/@hosickk 와 연결되었다는 뜻이다.

<a href = "http;//velog.io/@hosickk">내 블로그 </a>

TREE STRUCTURE

<!DOCTYPE html>
<html>
 <head>
  <title>Page title</title>
 </head>
 <body>
   <h1>Hello World</h1>
   <div>Contents here
     <span>Here too!</span>
   </div>
  </body>
</html>

<!DOCTYPE html> : 이 문서가 HTML 문서임을 명시
<html>: html 시작 태그로, 문서 전체의 틀을 구성
<head>: 문서의 메타데이터를 선언
<title>: 문서의 제목, 브라우저의 탭에 보여진다.
<body>: 문서의 내용을 담는 곳, 웹 브라우저를 통해 보이는 내용(content) 부분
<h1> ~ <h6>: heading을 의마하며, 크기에 따라 h1부터 h6까지 있다.
<span>: 줄바꿈이 없는 content 컨테이너

SELF-CLOSING TAG

태그 내부에 내용이 없다면<태그명/>와 같이 표현이 가능하다.
셀프태그의 종류에는 <base> <br> <col> <command> <embed> <hr> <img> <input> <keygen> <link> <menuiltem> <meta> <param> <source> <track> <wbr> 등이 있다.

MOST USED TAGS IN HTML

모든 태그의 종류를 아는 데에는 한계가 있다, 그러므로 자주 사용하는 태그부터 하나씩 외우는 게 좋다.

💡자주 사용하는 HTML 요소

🔍div

<div> 내용 </div>

컨텐츠를 특정 목적에 따라 묶을 때 사용하는 용도, 특별한 의미는 없다.
block 특성을 가지며, width 와 height 의 영향을 받는다.
새로운 라인에서 시작, 화면 크기 전체의 가로폭을 차지한다.

🔍span

<span> 내용 </span>

분할 영역을 지정하는 용도
div태그처럼 특별한 기능을 갖고 있지 않고, CSS와 함께 쓰인다.
inline의 특성을 가지고 있다.
div는 줄바꿈이 되지만, span은 줄 바꿈이 되지 않는다.

🔍img

<img src = "이미지 경로(파일명 포함)" />
<a href = "이미지 경로" target="_blank">이미지 설명</a>

이미지를 삽입하는 용도
이미지를 삽입하는 방법

이미지를 직접 다운로드 후 파일 경로를 삽입하는 방법
다른 웹페이지의 이미지 주소를 복사해서 삽입하는 방법

self-closing tag에 해당된다.
inline특성을 가지고 있다.
target의 속성은 새 창으로 링크로 이동하게 된다.

🔍ul, li

<ul>
  <li>home</li>
  <li>About us</li>
  <li>Contact</li>
</ul>

<li>의 부모태그로 반드시 자식태그를 가진다.
Unordered list의 약자이다.
순서가 없는 ㅛ소들을 나열하므로 앞에 불렛이 붙는다.
block특성을 가진다.

🔍input

Text, Radio, CheckBox 등을 삽입할 때 사용한다.

// text를 입력 가능하며, 1줄 쓰기
<input type="text" placeHolder="type here">

// 옵션항목 선택 가능하며, 1개만 선택할 수 있다.
<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b"> b

// text 입력 가능하며, 여러 줄 쓰기
<textarea></textarea>

// 체크박스 체크 가능하며, 여러 개 체크 할 수 있다.
<input type="checkbox" checked> checked
<input type="checkbox"> unchecked

// 비밀번호 입력 가능하며, 암호화되어 보여진다.
<input type="password">