🌏 WEB/📰 HTML

HTML 기초

HTML , CSS , JavaScript(jQuery)

- HTML : 틀 ( 뼈대 ) , 웹문서의 기준

- CSS : HTML의 폰트크기, 간격, 배경 등을 변경하여 꾸며주는 존재

- JavaScript : 웹의 동작을 구현

HTML 기본 구조 ( 태그 )

태그는 < 와 > 를 이용해 구분한다.

태그는 소문자로 쓴다 ex) <img src="maltese.jpg">

여는 태그와 닫는 태그를 정확히 입력한다 ex) <h1> HTML 제목 </h1>

태그가 많아 구분하기 어려움으로 들여쓰기를 통해 개발하는게 좋다

태그는 속성과 함께 사용할 수 있다. ex) <img src="maltese.jpg" width="150" height="160">

주석 ( ) ex)

HTML 기본 구조

<head></head> 링크, 스크립트, 웹의 표준 설정

-- <meta> 태그 : 문자 인코딩 방법 및 문서의 키워드와 요약 정보를 지정

HTML 특수 기호

HTML 문서의 특성상 여러 개의 공백을 나타내거나

따옴표, '<' 같은 꺽쇠 괄호를 화면에 표시할 때는 '엔티티 코드' 사용

Character Entity Reference Chart

dev.w3.org

웹 문서에 사용할 수 있는 특수 문자나 특수 기호에 해당하는 엔티티 코드 제공

body 텍스트 태그

<hn> 태그 : 제목 표시

<h1> 제목 </h1> - 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그

<p> 태그 : 텍스트 단락

<p> 텍스트 </p> - 입력한 내용 위아래로 공백이 생기면서 텍스트 단락이 만들어짐

<br> 태그 : 줄 바꾸기

<br> - 줄 바꿀 위치에 사용

<blockquote> 태그 : 인용문 넣기

<blockquote> 인용 내용 </blockquote> - 다른 텍스트보다 안으로 들여써짐

<hr> 태그 : 분위기 전환

<hr> - 주제가 바뀔 때 분위기 전환, 수평 줄 생김

<pre> 태그 : 입력한 그대로 표시

<pre> 텍스트 </pre> - 소스에 표시한 공백이 그대로 표시 , 프로그램 소스 표시할 때 유용

<mark> 태그 : 형광펜 효과

<mark> 텍스트 </mark> - 태그로 묶은 부분의 배경색이 노랑으로 표시됨

<span> 태그 : 영역 묶기

<span> 텍스트 </sapn> - 줄 안에서 (인라인) 묶기

<div> 태그 : 영역 묶기

<div> 텍스트 </div> - 줄 바꿔 (블록) 단락으로 묶기

<ul> , <li> 태그 : 순서 없는 목록

<ul> <li> 텍스트 </li> </ul> - 각 항목 앞에 불릿이 붙여짐

<ol> , <li> 태그 : 순서 목록

<ol type="a" start="3"><li> 텍스트 </li></ol> - 각 항목 앞에 숫자가 붙여짐

<ol> 태그의 속성

type : 불릿 앞의 숫자 조정

start : 중간 번호부터 수정

reserved : 역순으로 표시

<dl> , <dt> , <dd> 태그 : 설명 목록

하나의 <dt>에 여러개의 <dd> 값을 가질 수 있다

이미지 태그

<img> 태그 : 웹 문서에 이미지를 삽입할 때 사용

ex) <img src="images/펭수.jpg" alt="공부좀해">

하이퍼링크 태그

<a> 태그, href 속성 : 다른 문서, 혹은 다른 사이트로 바로 연결해 주는 기능

폼 태그

<form> 태그 : 폼을 만드는 기본 태그

form 속성

action : <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정

method : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정

( get - 주소 표시줄에 사용자가 입력한 내용 그대로 드러남 )

( post - 사용자의 입력을 표준 입력으로 넘겨줌, 사용자의 입력한 내용이 드러나지 않음 )

<input> 태그 : 사용자가 입력하는 부분

input 태그의 id 속성

input 태그

hidden : 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다

text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다

password : 비밀번호를 입력할 수 있는 필드를 넣는다

저작자표시 비영리 동일조건

'🌏 WEB > 📰 HTML' 카테고리의 다른 글

HTML 기초 - 세션 (0)	2022.06.15
HTML 기초 - 쿠키 (0)	2022.06.15
HTML 기초 - JSP (0)	2022.06.15
HTML 기초 - CSS (0)	2022.06.15
HTML 기초 - 로그인 창 (0)	2022.06.15

Contents

새소식

인기 검색어

HTML 기초

'🌏 WEB > 📰 HTML' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바