하얀 코딩

[HTML - 4] 기본 요소 본문

HTML

[HTML - 4] 기본 요소

whitecoding 2022. 12. 11. 03:23

<a> </a>

오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재합니다.

이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 <a>태그로 표현합니다.

<a>태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다.

 

<a> 속성

href : 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시합니다.

target : <a>태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다.

target 속성값설명
_blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈.
_self 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정)
_parent 링크로 연결된 문서를 부모 프레임(frame)에서 오픈.
_top 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈.
프레임(frame) 이름 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈.

name : 책갈피를 만들 수 있습니다. 우선 책갈피를 통해 가고 싶은 위치에 <a>태그를 만들고 name 속성을 작성합니다.
그다음에 href속성에 작성한 name 속성값을 이용하여 다른 <a>태그에서 링크를 걸면 됩니다.

<a href="#bookmark"><p>제목 3으로 갑시다!!!</p></a>

...

<h2><a name="bookmark"></a>제목 3</h2>

<img> </img>

웹 페이지에서 주로 사용되는 이미지는 JPEG, GIF, PNG

<img>태그는 종료 태그가 없는 빈 태그(empty tag)입니다.

 

<img> 속성

src : 파일 경로 또는 URL 주소

alt : 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다.


<ul> </ul>, <ol> </ol>

리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다.
대표적인 ul과 ol만 알아보자.


순서가 없는 리스트(unordered list)

순서가 없는 리스트는 <ul>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작합니다.

각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치합니다.

 

순서가 있는 리스트(ordered list)

순서가 있는 리스트는 <ol>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작합니다.
각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치합니다.

 

<ul> <ol> 속성

list-style-type

  • decimal : 숫자 (기본설정)
  • upper-alpha : 영문 대문자
  • lower-alpha : 영문 소문자
  • upper-roman : 로마 숫자 대문자
  • lower-roman : 로마 숫자 소문자

HTML에서 사용 가능한 모든 태그들 모음!

http://www.tcpschool.com/html-tags/intro

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

'HTML' 카테고리의 다른 글

[HTML - 6] form 요소  (0) 2022.12.30
[HTML - 5] block & inline  (0) 2022.12.30
[HTML - 3] 엔티티(Entity)  (0) 2022.12.11
[HTML - 2] 텍스트 태그 요소  (0) 2022.12.11
[HTML - 1] HTML 기초  (0) 2022.10.26