일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- typeof
- Methods
- justify-content
- 기초
- if else
- 타입
- 논리연산자
- 함수선언식
- 변수
- flex
- 반복문
- properties
- 함수표현식
- align-content
- javascript
- 비교연산자
- 속성
- 조건문
- 문자열
- frontend
- for of
- 화살표함수
- flex-wrap
- for
- 프론트엔드
- flex-direction
- 함수
- ELSE
- boolean
- for in
- Today
- Total
하얀 코딩
[HTML - 4] 기본 요소 본문
<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 |