Data Analysis

Web 구성요소 - HTML

yeonny_do 2023. 10. 31. 09:55

■ HTML (HyperText Markup Language)

 

   - 웹 문서의 구조를 만들 때 사용하는 언어, 여러 종류의 태그를 이용하여 문서나 데이터의 구조를 기술함

   - 웹 문서를 구성하는 3개의 요소는 HTML, CSS, JavaScript가 있음

   - 확장명 *.html로 만들어짐

   - html 문서는 일반적으로 아래와 같은 구조를 가짐

 


<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scal=1.0"/>
        <title>문서의 타이틀</title>
    </head>
    <body>
        <h1>청산별곡</h1>
        <div>살어리 살어리랏다. <b>청산</b>에 살어리 랏다 <i>멀위</i>랑 다래랑 먹고 <em>청산</em>에 살어리랏다.</div>
    </body>
</html>

 

 

 

■ HTML이란 무엇인가?

 

   - Hyper Text Markup Language의 약자임

   - 웹 페이지를 생성하기 위한 표준 마크업 언어임

   - 일련의 요소로 구성됨

   - 요소는 브라우저에 콘텐츠를 표시하는 방법을 알려줌

   - 요소는 중첩될 수 있음. 이는 요소가 다른 요소를 포함할 수 있음을 의미

   - html은 대소문자를 구분하지 않음

 

 
<html>
    <head>
        <title>My First HTML</title>
    </head>  
    <body>
        <h1> My First Heading</h1>
        <p>My forst Paragraph</p>
    </body>
</html>
 

 

   - <html>은 html 페이지의 루트 요소임

   - <head>에는 페이지에 대한 메타 정보가 포함되어 있음

   - <title>은 페이지의 제목(브라우저의 제목 표시줄 또는 페이지 탭에 표시됨)

   - <body>는 문서의 본문을 정의하며 제목, 단락, 이미지, 하이퍼링크, 표, 목록 등과 같이 표시되는 모든 콘텐츠에 대한 컨테이너임.

   - <h1>은 큰 제목을 정의함. 숫자가 커질수록 제목의 크기가 작아짐

   - <p>는 단락을 정의함

 

 

※ 태그에 대한 더 많은 정보 : https://www.javatpoint.com/html-5-tags

 

HTML 5 Tags - javatpoint

HTML 5 tags with examples, forms, input, text, anchor, image, heading, marquee, textarea, paragraph, title, quotes, code etc.

www.javatpoint.com

 

 

■ html 요소(element)란 무엇인가?

 

   - html 요소는 시작 태그, 콘텐츠 및 종료 태그로 정의 됨

 <tagname> 콘텐츠는 여기에 표시됨 </tagname>

 

 

■ Web Browser

 

   - 웹 브라우저의 목적은 html 문서를 읽고 그것을 올바르게 표시하는 것

   - 웹 브라우저는 html 태그를 표시하지 않지만 이를 사용하여 문서 표시 방법을 결정함

 

 

■ 태그에서, 닫는 태그는 생략하지 않음

 

   - 닫는 태그를 생략한 경우에도 일부 html요소는 올바르게 표시됨

   - 하지만 의도치 않은 결과와 에러가 발생할 수 있으므로 반드시 닫는 태그를 생력하지 않는 것이 좋음

 

 

■ 빈 html 요소

 

   - 콘텐츠가 없는html 요소를 빈(empty)요소라고 함

   - 태그 <br>은 줄 바꿈을 정의하며 닫는 태그가 없는 빈 요소임

 

<p>This is a <br> paragraph with a linebreak. </p>

 

 

■ html 속성

 

   - html 속성은 html 요소에 추가 정보를 제공함

   - 속성은 항상 시작 태그에 지정됨

   - 속성은 일반적으로 name='value'와 같은 이름/값 쌍으로 제공됨

   - 속성의 이름은 소문자를 사용하고 속성값은 항상 작은 따옴표로 묶음

 

   □ href 속성 : 태그 <a>는 하이퍼 링크를 정의함. 속성 href는 링크가 이동하는 페이지의 url을 지정함

 
<a href="https://www.naver.com">naver에 방문하기</a>
       

 

   □ src 속성 :  <img>는 html 페이지에 이미지를 삽입에 사용됨. 속성 src는 표시할 이미지의 경로 지정

 

   □ width와 height 속성 : <img>에 이미지의 너비와 높이를 지정하는 width와 height속성을 포함

 
<img src=".\images\img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
 

 

 

■ html 스타일

   - html style 속성은 색상, 글꼴, 크기 등과 같은 요소에 스타일을 추가하는데 사용됨

   - style 속성의 구문은 다음과 같음

<tagname style="property:value;">

 

    □ 배경색  : backgroud-color 속성은 html 요소의 배경색을 정의함

<body style="background-color:pwderblue;">

  

   - html style 속성은 색상, 글꼴, 크기 등과 같은 요소에 스타일을 추가하는데 사용됨

   - style 속성의 구문은 다음과 같음

   

    □ 텍스트 색상 : color 속성은 html 요소의 텍스트 색상을 정의

<h1 style="color:blue;"> This is a heading </h1>

 

    □ 글꼴 : fint-family 속성은 html 요소에 사용할 글꼴을 정의

<h1 style="font-family:verdana;"> This is a heading </h1>

 

     □ 텍스트 크기 : font-size 속성은 html 요소의 텍스트 크기를 정의

<h1 style="font-size:300%;">This is a heading </h1>

 

 
<html>
    <head>
        <meta charset='utf-8'>
        <title>Style test</title>
    </head>
    <body style = "background-color:powderblue;">

        <h2>배경색 스타일</h2>
        <h1 style = "background-color:#cc66cc;">This is a heading</h1>
        <p style = "background-color:tomato;">This is a paragraph</p>        
        <hr>

        <h2>텍스트색 스타일</h2>
        <h1 style = "color:blue;">This is a heading</h1>
        <p style = "color:red;">This is a paragraph</p>  
        <hr>

        <h2>글꼴 스타일</h2>
        <h1 style = "font-family:verdana;">This is a heading</h1>
        <p style = "font-family:courier;">This is a paragraph</p>  
        <hr>

        <h2>글꼴 크기 스타일</h2>
        <!---폰트의 크기 : 100%는 16px --->
        <h1 style = "font-size:300%;">This is a heading</h1>
        <p style = "font-size:100%;">This is a paragraph</p>  
        <hr>

    </body>
</html>
 

 

Reference : https://sesoc.tistory.com/244?category=1144882