HTML - 요약정리

기본문서구조

 

 

!doctype html - 문서는 HTML5기준 작성

HTML ~~ /HTML: 웹문서의 시작과 끝

HEAD ~ /HEAD: 브라우저가 웹문서를 해석하여 정보를 가져옴

BODY ~~ /BODY 우리에게 보이는 문서의 본문

 

 

호스팅 서버 준비하기

HTML로 만든 웹사이트를 다른사람이 볼 수 있게 웹문서를 서버 컴퓨터에 업로드 해야한다.

서버를 물리적으로 사지 않고 일정금액을 내고 사용하는 호스팅 서비스를 이용한다.

 

 

 

https://www.dothome.co.kr/

닷홈 호스팅

 

FTP 프로그램 준비하기

호스팅한 서버에 파일의 업로드와 다운로드 진행함.

 

https://filezilla.softonic.kr/

FileZilla

 

 

텍스트 관련 태그

 

https://d-craftshop.tistory.com/71

HTML - 텍스트 관련 태그

예제 TEXT-1 ~~~ TEXT-6를 봐주시면 됩니다.

 

 

이후에 목록과 표 블로그를 참고해 주세요

https://d-craftshop.tistory.com/73

HTML - 목록과 표

예제 OL, UL, DL을 확인하여 주시기 바랍니다.

 

이후 표와 관련하여서는 TABLE-1 ~~ TABLE-6 예제를 참고해 주세요

표를 만드는 태그에서 주의점은 

CAPTION 과 FIGCAPTION 두가지가 있는데

 

CAPTION은 제목이 위쪽 중앙에 표시되고 

FIGCAPTION은 FIGURE탭 이후 위치에 따라 표의 위나 아래에 제목이 표시됩니다.

 

THEAD, TBODY, TFOOT 은 표의 구조를 의미적으로 정의해주는 태그입니다.

우리눈에 보이는 컨텐츠 자체에는 영향이 없습니다.

 

이미지 관련 태그 내용을 정리하겠습니다.

https://d-craftshop.tistory.com/79

HTML - 이미지 등 멀티미디어 지원 태그

이미지 태그의 기본형은 IMG SRC="경로 [속성=값] 이렇게 됩니다.

여기서 말하는 태그의 속성

SRC = 이미지 파일의 경로

ALT = 이미지를 설명하는 대체 텍스트, 이미지 표시가 어려운 상황일 때

width, height 속성: 이미지 크기조절

이미지파일의 용량은 그대로이다.

 

 

하이퍼링크 내용추가

<a> 태그는 하이퍼링크를 생성하는 데 사용되며 다양한 속성을 가질 수 있습니다. 아래에 <a> 태그에서 사용할 수 있는 일부 주요 속성을 설명하고 예시 코드를 제공합니다:

href 속성:

설명: 이 속성은 링크 대상의 URL을 지정합니다.
예시 코드:

 

<a href="https://www.example.com">Visit Example.com</a>

target 속성:

설명: 이 속성은 하이퍼링크를 어떻게 열지를 제어합니다. _blank 값을 사용하면 새 창 또는 탭에서 링크를 엽니다.
예시 코드:

 

<a href="https://www.example.com" target="_blank">Visit Example.com in a new tab</a>

download 속성:

설명: 이 속성은 하이퍼링크를 클릭했을 때 연결된 파일을 다운로드하도록 지정합니다.
예시 코드:

 

<a href="downloadable-file.zip" download>Download Zip File</a>

rel 속성:

설명: 이 속성은 현재 문서와 링크된 리소스 간의 관계를 지정합니다. 주로 SEO와 웹 접근성에 사용됩니다.
예시 코드:

 

<a href="https://www.example.com" rel="nofollow">Visit Example.com</a>

type 속성:

설명: 이 속성은 링크 대상의 MIME 유형을 지정합니다.
예시 코드:

 

<a href="document.pdf" type="application/pdf">Download PDF Document</a>

title 속성:

설명: 이 속성은 링크에 대한 추가 정보를 제공합니다. 사용자가 마우스를 링크 위에 올렸을 때 툴팁으로 표시될 수 있습니다.
예시 코드:

 

<a href="https://www.example.com" title="Go to Example.com">Visit Example.com</a>

id 속성:

설명: 이 속성은 링크에 고유한 식별자를 부여합니다. 주로 JavaScript와 CSS에서 링크를 조작할 때 사용됩니다.
예시 코드:

 

<a href="#section2" id="section-link">Go to Section 2</a>

<a> 태그는 다양한 속성을 활용하여 다른 웹 페이지로 연결하거나 다운로드 링크를 제공하는 등 다양한 작업을 수행할 수 있습니다.

 

 

한 페이지 안에서 점프하기 - 앵커

 

웹 페이지를 만들 때, 한 페이지 안에서 스크롤하면서 특정 섹션으로 이동할 수 있도록 하는 앵커(Anchor) 또는 내부 링크(Internal Link)를 만들 수 있습니다. 이렇게 하면 사용자가 웹 페이지 내에서 쉽게 다른 부분으로 이동할 수 있으며, 단일 페이지 애플리케이션(Single Page Application) 또는 원페이지 웹사이트(One-Page Website)에서 자주 사용됩니다. 

 

예제 anchor.html 참고

 

폼과 관련된 추가 내용은 아래 블로그를 참조해 주세요

 

https://d-craftshop.tistory.com/80

HTML - Form Tag