728x90

HTML 서식 요소

 

 

이전 장에서는 HTML 스타일 속성 에 대해 배웠습니다 .

HTML은 또한 특별한 의미로 텍스트를 정의하기위한 특수 요소 를 정의합니다 .

HTML과 같은 요소 사용 <b>과 <i>같은 출력 서식을 굵게 또는 기울임 꼴 텍스트를.

서식 요소는 특수한 유형의 텍스트를 표시하도록 설계되었습니다.

  • <b> - 굵은 텍스트
  • <strong> -중요한 텍스트
  • <i> -이탤릭체
  • <em> -강조된 텍스트
  • <mark> -표시된 텍스트
  • <small> -작은 텍스트
  • <del> -삭제 된 텍스트
  • <ins> -삽입 된 텍스트
  • <sub> -첨자 텍스트
  • <sup> -위첨자 텍스트

 

HTML 텍스트 서식 요소

TagDescription

<b> Defines bold text
<em> Defines emphasized text 
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
728x90

'HTML' 카테고리의 다른 글

HTML 기초 5 / HTML style(HTML style) html 배경색 , 글자 색 , 정렬,글자크기  (0) 2020.03.11
HTML 기초 4 / HTML Attributes(HTML 속성)  (0) 2020.03.11
HTML 기초 3 / html elements (html 요소)  (0) 2020.03.11
<HTML 배우기>2. <h>, <br> ,<p> , <img> , <button> <ul> <ol> <li> 태그  (0) 2020.03.10
HTML 1. HTML의 특징과 기본 HTML이란?  (1) 2020.03.10
728x90
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
 
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
 
</body>
</html>
 
 cs

 

실행결과

 

 

 

●  HTML 스타일 속성

HTML 요소의 스타일 설정은 style속성 으로 수행 할 수 있습니다 .

HTML style속성의 문법 은 다음과 같습니다.

 

<tagname style="property:value;"> 

 

 

● 배경색

CSS background-color속성은 HTML 요소의 배경색을 정의합니다.

이 예제는 페이지의 배경색을 blue로 설정합니다.

 

1
2
3
4
5
6
<body style="background-color:powderblue;">
 
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 
</body>
 cs

 

실행결과

 

 

 

● 글자 색

 

1
2
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
  

 

실행결과

 

 

 

●텍스트 정렬

CSS text-align속성은 HTML 요소의 가로 텍스트 정렬을 정의합니다.

 

1
2
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
  

 

728x90

'HTML' 카테고리의 다른 글

HTML 기초 6 / HTML 텍스트 형식 (HTML 서식)  (0) 2020.03.11
HTML 기초 4 / HTML Attributes(HTML 속성)  (0) 2020.03.11
HTML 기초 3 / html elements (html 요소)  (0) 2020.03.11
<HTML 배우기>2. <h>, <br> ,<p> , <img> , <button> <ul> <ol> <li> 태그  (0) 2020.03.10
HTML 1. HTML의 특징과 기본 HTML이란?  (1) 2020.03.10
728x90

HTML 속성

 

  • 모든 HTML 요소는 속성 을 가질 수 있습니다
  • 속성 은 요소에 대한 추가 정보 를 제공합니다
  • 속성은 항상 시작 태그에 지정됩니다
  • 속성은 일반적으로 name = "value" 와 같은 이름 / 값 쌍으로 제공됩니다.

href 속성

HTML 링크는 <a>태그 로 정의됩니다 . 링크 주소는 href속성에 지정되어 있습니다 .

<a href="https://www.w3schools.com">This is a link</a>

 

src 속성

HTML 이미지는 <img>태그 로 정의됩니다 .

이미지 소스의 파일 이름은 src속성에 지정되어 있습니다 .

 

<img src="img_girl.jpg">

 

width height너비와 높이 속성

 HTML 이미지도 가지고 width와 height이미지의 폭과 높이를 지정하는 속성 

<img src="img_girl.jpg" width="500" height="600">

 

 

alt대체 속성 

이 alt속성은 이미지를 표시 할 수없는 경우 사용할 대체 텍스트를 지정합니다.

alt화면 판독기 는 속성 값을 읽을 수 있습니다. 이러한 방식으로, 시각 장애가있는 사람과 같이 웹 페이지를 "듣는"누군가가 그 요소를 "듣게"할 수 있습니다.

 

<img src="img_girl.jpg" alt="Girl with a jacket">

 

추가) h1보다 더큰 제목 

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
 
<h1 style="font-size:60px;">h1 </h1>
 
<h1> h1</h1>
 
</body>
</html>
 cs

 

 

h1 태그에 style이라는 속성을넣어 글자의 크기를 변경할수있음 

이부분에 대해서는 나중에 제대로 알아보겠습니다.

 

 

HTML <pre> 요소

HTML <pre>요소는 사전 형식화 된 텍스트를 정의합니다.

<pre>요소 내부의 텍스트 는 고정 너비 글꼴 (일반적으로 Courier)로 표시되며 공백과 줄 바꿈을 모두 유지합니다.

 

728x90

'HTML' 카테고리의 다른 글

HTML 기초 6 / HTML 텍스트 형식 (HTML 서식)  (0) 2020.03.11
HTML 기초 5 / HTML style(HTML style) html 배경색 , 글자 색 , 정렬,글자크기  (0) 2020.03.11
HTML 기초 3 / html elements (html 요소)  (0) 2020.03.11
<HTML 배우기>2. <h>, <br> ,<p> , <img> , <button> <ul> <ol> <li> 태그  (0) 2020.03.10
HTML 1. HTML의 특징과 기본 HTML이란?  (1) 2020.03.10
728x90

●HTML 요소(html elements)

 

 

 

HTML 요소는 일반적으로 시작<> 태그와 종료</> 태그로 구성되며 내용은 다음 사이에 삽입됩니다.

< tagname > ~~~~~  < / tagname >

HTML 요소 는 시작 태그에서 종료 태그까지의 모든 것입니다.

 

 

※내용이없는 HTML 요소를 빈 요소라고합니다. 빈 요소에는 <br> 요소 (줄 바꿈을 나타냄)와 같은 종료 태그가 없습니다.※

 

●중첩 된 HTML 요소

HTML 요소는 중첩 될 수 있습니다 (요소에는 요소가 포함될 수 있음).

모든 HTML 문서는 중첩 된 HTML 요소로 구성됩니다.

이 예제에는 네 가지 HTML 요소가 있습니다.

 

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

 

<h1>My First Heading</h1>

<p>My first paragraph.</p>

 

</body>

</html>

  

 

설명

<html>요소는 전체문서를 시작태그 <html> 와 종료태그</html>이며

<html>요소안에 <body>가 있으며 <body>는 문서 본문을 <body>와 </body>로 감싸고있으며

<body>의 내부요소는 두개의 <h1> <p>요소가 존재한다 <h1>요소는 제목을 <p>요소는 단락을 정의하고있다.

 

 

 

●빈 HTML 요소

 

내용이없는 HTML 요소를 빈 요소라고합니다.

<br>닫는 태그가없는 빈 요소입니다 ( <br> 태그는 줄 바꿈을 정의 함).

 

빈 요소 태그는 <br />와 같이 시작 태그에서 "닫을"수 있습니다. 

 

 

●대소 문자를 구분하지 않는 HTML

HTML 태그는 대소 문자를 구분하지 않습니다. <P>는 <p>와 동일합니다.

HTML5 표준에는 소문자 태그가 필요하지 않지만 소문자를 권장 하며 XHTML과 같은보다 엄격한 문서 유형에는 소문자(알맞은 문법)을 요구 합니다.

 

728x90

'HTML' 카테고리의 다른 글

HTML 기초 6 / HTML 텍스트 형식 (HTML 서식)  (0) 2020.03.11
HTML 기초 5 / HTML style(HTML style) html 배경색 , 글자 색 , 정렬,글자크기  (0) 2020.03.11
HTML 기초 4 / HTML Attributes(HTML 속성)  (0) 2020.03.11
<HTML 배우기>2. <h>, <br> ,<p> , <img> , <button> <ul> <ol> <li> 태그  (0) 2020.03.10
HTML 1. HTML의 특징과 기본 HTML이란?  (1) 2020.03.10
728x90

<h> 태그 : 제목을 사용할떄 쓰이는태그   h1 h2 h3 ~ h6태그까지 존재

 

<br>태그 : 줄바꿈 태그

 

<p> 태그 : 문단을 나눌때 쓰이는 태그 

 

<img> 태그 : 이미지를 삽입태그

 

<burron>태그 : 버튼 태그

 

<ul> 태그 : 정렬되지 않는 목록 태그 ● 로 정렬됨

<ol> 태그 : 숫자로 정렬된 태그 1. ~~ 2.~~ 로 정렬됨

<li> 태그 : ul태그나 ol태그 안에 정렬할 리스트들을 적는 리스트태그

 

 

 

HTML 단락

HTML 단락은 <p>태그 로 정의됩니다 .

 

HTML 링크

HTML 링크는 <a>태그 로 정의됩니다 :

링크 대상이 href속성에 지정되어 있습니다.

 

 

HTML 이미지

HTML 이미지는 <img>태그 로 정의됩니다 .

소스 파일 ( src), 대체 텍스트 ( alt) width, 및 height속성으로 제공됩니다.

 

HTML 버튼

HTML 버튼은 다음 <button>태그 로 정의됩니다 .

HTML 목록

HTML 목록은 <ul>(정렬되지 않은 / 글 머리 기호 목록) 또는 <ol>(순서 / 번호가 매겨진 목록) 태그와 <li> 태그 (목록 항목)로 정의됩니다.

728x90

'HTML' 카테고리의 다른 글

HTML 기초 6 / HTML 텍스트 형식 (HTML 서식)  (0) 2020.03.11
HTML 기초 5 / HTML style(HTML style) html 배경색 , 글자 색 , 정렬,글자크기  (0) 2020.03.11
HTML 기초 4 / HTML Attributes(HTML 속성)  (0) 2020.03.11
HTML 기초 3 / html elements (html 요소)  (0) 2020.03.11
HTML 1. HTML의 특징과 기본 HTML이란?  (1) 2020.03.10
728x90

HTML언어학습을 통해 자신만의 웹사이트를 제작할수있다.

또한 프로그래밍언어중에 가장 간단하며 직관적인 언어라 첫번째언어로 많이 학습을한다.

 

<HTML 특징>

 

HTML은 웹 페이지의 표준 마크 업 언어입니다.

HTML을 사용하면 자신의 웹 사이트를 만들 수 있습니다.

HTML은 배우기 쉽습니다-

HTML은 태그< > </>로 감싸준다는 특징을 지니고있다.

 

 

 

 

 

<HTML의 기본구조 이미지화>

 

 

 

그렇다면 BODY태그안에 직접 <h1>태그, <p>태그, <p title ="~~~">  </p>태그,  <br>태그를 사용하면서 직접 느껴보고 배워보자.

 

직접 해보기»

 

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

 

  • HTML 태그는 일반적으로 올 쌍으로 같은 <p>과</p>
  • 쌍의 첫 번째 태그는 시작 태그이고 두 번째 태그는 종료 태그입니다
  • 종료 태그는 시작 태그처럼 작성되지만 태그 이름 앞에 슬래시가 삽입됩니다.

 

<h1>태그는 굵은글씨 즉 제목을 작성할떄 쓰이는 태그이다 <h1> <h2> <h3> ... 등등 태그가 존재하며 글씨가 점점작아진다.

<p>태그는 문단은 나눌때 쓰이는 태그이다 가장 흔한 태그.

 

<p title="" >태그는  p태그로 감쏴진 텍스트에 마우스를 올릴경우 " " 로 주석이 나오게된다.

<br>은 띄어쓰기 

 

728x90

'HTML' 카테고리의 다른 글

HTML 기초 6 / HTML 텍스트 형식 (HTML 서식)  (0) 2020.03.11
HTML 기초 5 / HTML style(HTML style) html 배경색 , 글자 색 , 정렬,글자크기  (0) 2020.03.11
HTML 기초 4 / HTML Attributes(HTML 속성)  (0) 2020.03.11
HTML 기초 3 / html elements (html 요소)  (0) 2020.03.11
<HTML 배우기>2. <h>, <br> ,<p> , <img> , <button> <ul> <ol> <li> 태그  (0) 2020.03.10

+ Recent posts

티스토리툴바