옥수수와 식빵 그리고 코딩

1. HTML 시작 ~ 3. 기본요소 본문

HTML/TCP - HTML

1. HTML 시작 ~ 3. 기본요소

옥식 2021. 10. 21. 22:13

오늘부터 웹 들어왔다!

1.HTML 시작

W3C : World Wide Web Consortium(협력단)

<태그이름> // 시작태그

</태그이름> // 종료태그

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<p>단락 1</p>
<p>단락 2</p>
<img> <br> <hr>등과 같이 종료태그 없이 시작태그만 자기는 태그 : 빈 태그(empty tag)

<head> : HTML문서의 메타데이터를 정의.

-메타데이터란 MTML문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보.

-이러한 메타데이터는 <title>,<style>,<meta>,<link>,<script>트그 등을 이용하여 표현

http://tcpschool.com/html/html_intro_basicStructure

 

코딩교육 티씨피스쿨

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

tcpschool.com

속성은 언제나  시작 태그 내에서만 정의되며, 속성이름과 속성값(value)로 표현됨

<태그이름 속성이름="속성값">

속성값 감쌀 때 주로 "큰따옴표"를 사용하지만 '작은따옴표'도 사용 가능하다.

 

2. HTML 텍스트 요소

제목

<h>태그 : 제목표현, 검색엔진에 의해 키워드가 수집됨.

 

단락(문단)

<p>태그 

HTML코드에서 띄어쓰기나 줄 나누기를 여러번 해해도 화면에는 나오지 않는다.

웹 브라우저는 여러번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로 인식하기 때문이다.

줄 나누기를 하고자 할 때 <br>태그 (brak line)을 사용하면 줄을 나눌 수 있다. <br>태그는 종료태그가 없는 빈 태그이다.

 

<pre>태그 (preformatted text)

HTML코드에서 작성한 텟스트 서식 그대로  표현

 

<hr>태그 , 수평 가로 구분선 (horizontal rule)

서식

텍스트(text)에 다양한 효과를 주는 여러 태그

텍스트 태그 뒤에 위치

<p><b>"이 부분"</b>은 단순히 글씨가 굵은 부분이에요!</p>

<b>태그는 단순히 화면의 텍스트를 굵게 표현해 줍니다.

하지만 <strong>태그는 텍스트를 굵게 표현해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해 줍니다.

<i>태그는 단순히 화면의 텍스트를 이탤릭체로 표현해 줍니다.

하지만 <em>태그는 텍스트를 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해 줍니다.

<mark>태그는 텍스트에 하이라이팅(highlighting) 효과를 적용시켜 줍니다.

<del>태그(delete)는 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과를 내줍니다.

<ins>태그(insert)는 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 내줍니다.

위첨자는 <sup>태그(superscript)를 사용하여, 아래첨자는 <sub>태그(subscript)를 사용하여 각각 표현할 수 있습니다.

출처 : http://tcpschool.com/html/html_text_formatting

 

<q>태그 (quotation) : 짧은 인용구, 자동으로 앞뒤에 큰따옴표 붙음

<blockquote>태그 (block quatation) : 길이가 긴 인용구, 인용 부분을 별도의 단락으로 구분하여 나타냄

 <abbr>태그 (abbreviation) : <abbr>태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타남

<address>태그 :  HTML에서 주소를 표현, 주소는 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입

 

주석(Comment)

표현 방법

<!--주석내용-->

주석은 중첩하여 사용해서는 안 된다.

 

엔티티(Entity)

HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다.
이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다.
따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다.
엔티티의 이름은 대소문자를 구분한다.ㄴㄴ

엔티티 형태

&엔티티이름;

or

&#엔티티숫자;

발음 구별 부호(diacritical marks), 악센트

단독으로는 사용하지 않고, 다른 문자와 함께 사용

심볼(Symbol) 특수문자

 

문자셋(Character set)

웹 브라우저가 HTML문서를 정확하게 나타내기 위해서는 해당 문서가 어떠한 문자셋으로 저장되었는지를 알아야 함

따라서 HTML문서가 저장될 때 사용한 문자셋에 대한 정보를 <head>태그 내의 <meta>태그에 명시한다.

HTML4에서 UTF-8의 경우 : <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5에서 UTF-8의 경우 : <meta charset="UTF-8">

두 예저 모두 해당 HTML문서가 UTF-8 문자셋을 사용하여 저장되었음을 웹 브라우저에 알려줌

 

문자셋의 종류

1. ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다.

2. ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다.

3. ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋입니다.

4. UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋입니다.

출처:http://tcpschool.com/html/html_text_encodings

 

코딩교육 티씨피스쿨

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

tcpschool.com

 

3. HTML 기본 요소

HTML 스타일

HTML 요소의 style 속성을 이용하면 CSS 스타일을 HTML요소에 직접 설정할 수 있다.

<태그이름 style="속성이름:속성값">

ex) 배경색 변경(background-color), 글자색 변경(color), 글자크기 변경(font-size), 문단정렬 변경(text-align)

여러 스타일 설정

<태그이름 style="속성이름:속성값; 속성이름:속성값; 속성이름:속성값">

* style 속성값에 사용되는 CSS속성(property)과 속성값들은 세이콜론(;)을 이용하여 구분

* CSS속성을 하나만 사용할 때나, 여러개의 CSS속성 중 맨 마지막 CSS속성는 세미콜론(;)을 생략할 수 있다.

 

 

HTML 색 표현 방법

1. 색생 이름으로 표현

 

HTML에서 색상 이름은 대소문자 구분X

ex)  <h1 style="color:blue">색상 이름으로 표현된 파란색</h1>

 

2. RGB 색상값으로 표현

RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가짐.

ex)<h1 style="color:rgb(0,0,255)">RGB 색상값으로 표현된 파란색</h1>

 

3. 16진수 색생값으로 표현

각각의 기본색(Red, Green, Blue)은 00~FF까지 범위

ex)<h1 style="color:#0000FF">16진수 색상값으로 표현된 파란색</h1>

 

배경을 다른 이미지로 변경

<태그이름 background="이미지주소">

 

HTMl링크

하이퍼링크를 링크라 부른다

<a>태그로 표현

href속성 : 링크를 클릭하면 연결할 ㅔ이지나 사이트의 URL주소 명시

<a href="링크주소">HTML 링크</a>

target 속성 : 링크로 연결된 문서를 어디에서 열지 명시

링크의 상태(state)

link 아직 한 번도 방문한 적이 없는 상태 (기본설정)
visited 한 번이라도 방문한 적이 있는 상태
hover 링크 위에 마우스를 올려놓은 상태
active 링크를 마우스로 누르고 있는 상태

<a>태그 name속성 : 페이지 책갈피

책갈피를 통해 가고 싶은 위치에 name속성 작성<h2><a name="bookmark"></a>제목 3</h2>

작성한 name속성값을 이용하여 다른 <a>태그에서 링크 걸기 <a href="#bookmark"><p>제목 3으로 갑시다!!!</p></a>

 

HTML 이미지

주로 사용하는 이미지 종류 : JPEG, GIF, PNG

 

<img>태그 : 이미지 삽입, 종료태그가 없는 빈 태그

<img src="이미지주소" alt="대체문자열">

src 속성은 이미지가 저장된 주소의 URL 주소를 명시합니다.

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

 

이미지 크기(width, height)설정

<style>
    img {
        width:100%;
        border: 1px solid black;
    }
</style>
...
<img src="/examples/images/img_flag.png" alt="html size" width="320" height="214">
<img src="/examples/images/img_flag.png" alt="style size" style="width:320px; height:214px">

이미지 테두리(border)설정

<img src="/examples/images/img_flag.png" alt="이미지 테두리"
    style="width:320px; height:214px; border: 3px solid black">

이미지에 링크(link)설정

<a href="/html/intro" target="_blank">
    <img src="/examples/images/img_flag.png" alt="flag" style="width:320px; height:214px">
</a>

 

이미지 맵 만들기

http://tcpschool.com/html/html_basic_images

 

코딩교육 티씨피스쿨

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

tcpschool.com

 

HTML 테이블 (Table)

여러종류의 데이터를 보기 좋게 정리하여 보여주는 표

<table>태그 사용

태그 구성

1. <tr>태그 : 열 구분

2. <th>태그 : 각 열의 제목 나타냄, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬 됨

3. <td>태그 : 테이블의 열을 각각의 첼로 나누어 줌

열(tr), 열 합치기(td colspan="합칠갯수")
행,
행 합치기
(td rowspan="합칠갯수")		 (td) (td) (td)
     
     

 

http://tcpschool.com/html/html_basic_tables

<caption>태그 : 테이블 상단에 제목이나 짧은 설명 붙임

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시

'HTML > TCP - HTML' 카테고리의 다른 글

자기소개 홈페이지 만들기 - 템플릿 없이  (0) 2021.11.12
자기소개 홈페이지 만들기  (0) 2021.10.25
Q.<p>와 <span>의 차이  (0) 2021.10.22
'HTML/TCP - HTML' Related Articles more
Comments