[Worksheet-220418] HTML
HTML/CSS/JS로 만드는 스타벅스 웹사이트
HTML 개요
HTML 기본 문법
요소(Element)
<tag> contents </tag>
<tag> contents </tag>
열린 태그와 닫힌 태그로 요소의 내용을 감싸주기
부모와 자식 관계의 이해
<tag> //부모 요소
<tag> //자식 요소
contents
</tag>
</tag>
줄바꿈, 들여쓰기로 요소 간 구분하기
- 상위(조상) 요소
나를 기준으로 내 위에 있는 모든 요소 - 하위(후손) 요소
나를 기준으로 내가 감싸고 있는 모든 요소
빈 태그
종료(닫힌) 태그가 없는 태그
- 작성 방법
<tag>
편리한
HTML 1/2/3/4/5<tag />
안전한, 엄격한
XHTML/HTML5
속성과 값
<tag attribute="value"> contents </tag>
속성과 값으로 추가적인 기능 확장 가능
글자와 상자
요소가 화면에 출력되는 특성으로 크게 2가지로 구분된다.
- 인라인(inline) 요소
글자를 만들기 위한 요소들 - 블록(block) 요소
상자(레이아웃)를 만들기 위한 요소들
인라인 요소
<span> Hello </span>
<span> World </span>
-
<span>
대표적인 인라인 요소로, 본질적으로는 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 요소- 하나의 글자처럼 취급된다.
- 요소가 수평으로 쌓인다.
- 가로, 세로 둘 다 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
-
margin 값 사용할 수 없다.
-
인라인 요소 안에는 블록 요소를 사용할 수가 없다.
블록 요소
<div> Hello </div>
<div> World </div>
-
<div>
대표적인 블록 요소로, 본질적으로는 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 요소- 요소가 수직으로 쌓인다.
- 가로는 포함한 콘텐츠 크기만큼 자동으로 늘어난다.
- 세로는 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
-
margin 값 사용할 수 있다.
-
블록 요소 안에는 블록 요소, 인라인 요소 모두 사용 가능하다.
HTML 핵심 정리
핵심 요소 정리
-
<div>
블록 요소. 특별한 의미가 없는 구분을 위한 요소이다. -
<h1>
블록 요소. 제목을 의미하는 요소이다.
h2~h6 까지 사용할 수 있다. -
<p>
블록 요소. 문장을 의미, 구분하는 요소이다. -
<img src="" alt="">
인라인 요소. 이미지를 삽입하는 요소이다.- 속성
- src
필수 속성. 이미지의 경로 - alt
필수 속성. 삽입할 이미지의 대체 이름
- src
- 속성
-
<ul>
블록 요소. 순서가 필요없는 목록의 집합을 의미한다.
자식 요소로<li>
태그를 하나 이상 포함해야한다.
<ul>
<li> 딸기 <li>
<li> 오렌지 <li>
<li> 수박 <li>
<ul>
-
<a href="">
인라인 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소이다.- 속성
- href
필수 속성. 링크 URL - target
링크 URL의 표시(브라우저 탭) 위치
- href
- 속성
-
<span>
인라인 요소. 특별한 의미가 없는 구분을 위한 요소이다.
글자들의 범위를 나타낼 때 사용한다. -
<br>
인라인 요소. 줄바꿈 요소이다. -
<input>
인라인 요소이자 블록 요소. 사용자가 데이터를 입력하는 요소.- 속성
- type
필수 속성. 입력 받을 데이터의 타입
ex) text, checkbox, radio 등 - value
미리 입력된 값(data) - placeholder
사용자가 입력할 값의 힌트 - disabled
입력 요소 비활성화. 값을 명시하지 않는다.
- type
- 속성
-
<lable>
인라인 요소. 라벨 가능 요소(input)의 제목
//radio는 체크 여부를 그룹에서 1개만 입력 받음
<label>
<input type="radio" name="fruits" /> Apple
</label>
<label>
<input type="radio" name="fruits" /> Banana
</label>
<table>
테이블 요소. 표 요소 행(Row)와 열(Column)의 집합이다.
선은 표현 되지 않고 표의 구조만을 가지게 된다.
<table>
<tr> //행 table row
<td>A</td><td>B</td> //열 table data
</tr>
<tr>
<td>C</td><td>D</td>
</tr>
</table>
주석
<!--이것은 html 주석이다-->
Ctrl+'/'
키를 누르면 자동으로 해당 줄이 주석 처리 된다.
전역 속성
-
<tag title="description"></tag>
요소의 정보나 설명을 지정. -
<tag style="style"></tag>
요소에 적용할 스타일(CSS)을 지정. -
<tag class="name"></tag>
요소를 지칭하는 중복 가능한 이름.
같은 태그 내에서도 클래스로 지정 후 css, js에서 제어하기 위해서 사용한다.
다른 파일에서 .name 으로 사용할 수 있다. -
<tag id="name"></tag>
요소를 지칭하는 고유한 이름.
고유하기 때문에 핵심적인 정보에만 사용하도록 한다.
다른 파일에서 #name 으로 사용할 수 있다. -
<tag data-name="data"></tag>
요소에 data를 지정한다.
주로 js에서 사용하기 위함이다.
Author And Source
이 문제에 관하여([Worksheet-220418] HTML), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@aurpo1/Worksheet-220418-HTML저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)