AR삽질러

HTML - Tag, Attribute(1) 본문

WEB/HTML, CSS

HTML - Tag, Attribute(1)

아랑팡팡 2023. 10. 10. 23:32
728x90

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에

developer.mozilla.org

 

HTML

 

 HTML(Hyper Text Markup Language)는 웹 페이지의 구조를 만드는 언어로 HTML에서는 다양한 태그를 사용해 웹페이지의 요소를 정의한다. 태그는 "< >"로 둘러쌓인 키워드를 구성되어 어디서부터 어디까지의 구간이 tag인지 지정할 수 있다. 

 

Tag

0. <html>

 - HTML 문서의 시작과 끝을 나타낸다.

<!DOCTYPE html>
	<name>AR</name>
	<hoby>웨이크보드, 스노우보드</hoby>
</html>

 

1. <head>

 - 웹 페이지의 머리글 부분을 나타내며 메타정보, 스타일, 스크립트 등을 포함할 수 있다.

<!DOCTYPE html>
<html>

<head>
    <title>AR_WebSite</title>
</head>

<body>
    <h1>Hello</h1>
</body>

</html>

 

2. <title>

 - 웹 페이지의 제목을 지정한다.

<title>AR삽질러</title>

 

3. <body>

 - 웹 페이지의 본문을 나타내며 페이지의 주요 콘텐츠가 위치한다.

<!DOCTYPE html>
<html>

<body>
    <h1>Hello</h1>
</body>

</html>

 

4. <h1> <h2> <h3> <h4> <h5> <h6>

 - 헤더 태그로 6단계의 크기를 나타낼 수 있다. 가장큰 <h1> 부터 가장작은 <h6> 까지

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

 

5. <p>

 - 단락을 만들어 구분짓는다.

<p>일반적인 단락</p>
    <p class="highlight">이것은 스타일이 적용된 단락</p>

 

6. <a>

 - anchor를 뜻하며 하이퍼링크를 생성한다.

<a href="http://google.com" target="_blank">Go to google.com</a>

 

 

7. <img>

 - 이미지를 삽입한다. 

<img src="\다운로드.png" />

 

8. <ul> <ol> <li>

 - 목록을 만든다.

 - ul : 순서가 없는 목록

 - ol : 순서가 있는 목록

 -  li : 목록의 항목

<ul>
    <li>python</li>
    <li>ruby</li>
    <li>rails</li>
    <li>java</li>
    <li>C</li>
    <li>Spring</li>
</ul>

<ol>
    <li>python</li>
    <li>ruby</li>
    <li>rails</li>
    <li>java</li>
    <li>C</li>
    <li>Spring</li>
</ol>

 

9. <div> <span>

 - 컨테이너 태그로 <div>는 블록 요소, <span<은 인라인 요소를 만든다.

 

10. <table> <tr> <td>

 - 표를 만든다.

 - table : 표의 시작

 - tr : 행

 - td : 셀

 

 

Attributes

 HTML의 속성은 태그의 기능을 확장하고 웹 페이지의 각 요소를 더 구체적으로 제어할 수 있게한다.

 HTML속성은 태그 내에 위치하고 이름과 값의 쌍으로 구성된다.

<a href="https://arang95.tistory.com/">AR삽질러</a>

href = 속성의 이름, https://arang95.tistory.com/ = 값

 

0. style

 - 속성을 사용하여 태그에 인라인 스타일을 적용할 수 있다.

<style>
        .highlight {
            color: red;
            font-weight: bold;
        }
 </style>

 

 

1. src, alt

 src : 이미지의 URL을 지정하는데 사용된다.

 alt : 이미지가 로드되지 않을 때 대신 표시되는 대체 텍스트를 지정한다.

<img src="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" alt="예제 이미지">

 

2. id, class

 id : 웹 페이지 내의 특정 요소를 식별하는데 사용된다.

 class : 요소에 스타일을 적용하거나 JavaScript를 연결할때 사용된다.

 

3. href

 - 링크의 대상 URL을 지정한다. 주로 <a>태그와 사용되며 URL을 클릭시 페이지의 저장된 주소로 이동된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형
LIST
저작자표시 비영리 동일조건

'WEB > HTML, CSS' 카테고리의 다른 글

CSS box - (2)  (0) 2023.10.16
CSS - How to Add CSS to HTML (1)  (0) 2023.10.15
HTML Form Tags - (2)  (0) 2023.10.11
CSS? - (0)  (0) 2023.10.03
HTML? - (0)  (0) 2023.09.30
'WEB/HTML, CSS' Related Articles more