DogFootRuler

웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS

1. HTML Basic

Zoo_10th 2024. 1. 17.

1. HTML의 기본구조

1-1. HTML?

HTML(Hyper Text Markup Language)는 웹 페이지를 만들기 위한 표준 마크업 언어이다.

웹 브라우저가 문서를 표시하는데 사용되며, HTML 문서는 요소(element)와 속성(attribute)으로 이루어져 있다.

 

1-2. HTML 문서의 기본 형태

<!DOCTYPE html> : HTML 문서의 버전을 지정하는 선언

<html> : HTML 문서의 시작을 나타낸다.

<head> : 문서의 메타 데이터와 링크, 스타일, 스크립트 등을 정의한다.

<title> : 문서의 제목을 정의한다.

<body> : 실제 내용을 담고 있는 부분이다.

 

2. HTML의 기본태그

2-1. Tag

HTML 문서의 기본 구성 요소를 나타내며, 시작 태그(<tag>)와 종료 태그(</tag>)로 이루어져 있다.

 

2-2. Heading(제목)

제목은 웹페이지의 중요한 구성 요소 중 하나로, 사용자에게 페이지의 내용과 구조를 알려주는 역할을 한다.

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<!-- ... -->
<h6>제목 6</h6>

<h1>부터 <h6> : 제목을 나타내는 태그로, 숫자가 작을수록 더 큰 제목을 의미한다.

수평선 표시 : <hr> 태그는 수평선을 표시하는 데 사용된다. 이를 통해 시각적으로 나타낼 수 있다.

<hr>

CSS 속성을 활용한 제목 크기 지정 : font-size를 사용하여 제목의 크기를 지정할 수 있다. 

<h1 style="font-size:60px;">Heading 1</h1>

 

2-3. Paragraphs(단락)

<p>이것은 단락</p>
<p>또 다른 단락</p>

<p> 단락을 나타내는 태그로 텍스트를 담는다.

HTML 코드에 공백이나 줄을 추가하여 출력을 변경할 수 없으며, 페이지가 표시되면 브라우저는 여분의 공백과 여분의 행을 제건한다.

 

2-4. Line Break(줄 바꿈)

<p>첫 번째 줄<br>두 번째 줄</p>

<br> 줄 바꿈을 나타내는 태그로 닫는 태그가 없다.

엔터가 입력되어도 줄 바꿈 동작을 하지 않으며 <br> 태그를 사용하여 강제 줄 바꿈 동작을 수행해야 한다.

 

2-5. HTML 인용과 주석

 - HTML 인용 태그 : <q>와 <blockquote>

   * <q> 태그 : 짧은 인용문에 사용되며, 브라우저에서 큰 따옴표로 표시된다.

   * <blockquote> 태그 : 긴 인용문에 적합하며 들여 쓰기로 표시된다.

<blockquote cite="<https://ko.wikipedia.org/wiki/HTML>">
HTML은 웹 페이지를 위한 지배적인 마크업 언어다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다.
</blockquote>

 

- HTML 축약 태그 : <abbr>

   * 축약어 표시에 사용되며, 마우스를 올리면 전체 텍스트가 표시된다.

<abbr title="Hyper Text Markup Language">HTML</abbr> & <abbr title="Cascading Style Sheets">CSS</abbr>

마우스를 글자에 올리면 전체 텍스트가 표시된다.

- HTML 주석 태그

* 코드에 설명을 추가할 때 사용되며, 브라우저에 표시되지 않는다.

<!-- 이 부분은 주석이다. -->

 

2-6. HTML List

리스트는 웹 페이지의 데이터와 정보를 구조적으로 명확하게 표현하는데 중요한 역할을 한다.

 

2-6-1. 순서가 없는 리스트(Unordered List - <ul>)

개념 : 순서가 중요하지 않은 항목들을 나열할 때 사용한다.

기본 스타일 : 항목 앞에 검은색 원형 불릿이 표시된다.

HTML 구조

 - <ul> 태그로 리스트를 시작하고 종료한다.

 - 각 항목은 <li> 태그로 표시한다.

CSS 스타일 변경

 - list-style-type

속성을 사용하여 불릿의 스타일 disc, circle, square, 또는 none(불릿 없음)으로 변경할 수 있다.

<ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ul>
<ul style="list-style-type:square">
      <li>항목 1</li> 
      <li>항목 2</li>
      <li>항목 3</li>
</ul>

 

2-6-2. 순서가 있는 리스트(Ordered List - <ol>)

개념 : 순서가 중요한 항목들을 나열할 때 사용한다.

기본 스타일 : 항목 앞에 아라비아 숫자가 순서대로 표시된다.

HTML 구조

 - <ol> 태그로 리스트를 시작하고 종료한다.

 - 각 항목은 <li> 태그로 표시한다.

스타일 변경

 - type 속성을 사용하여 항목 앞에 표시되는 기호로 아라비아 숫자, 알파벳 대문자(A), 소문자(a), 대문자 로마 숫자(I), 소문자(i)로 변경할 수 있다.

<ol type="A">
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ol>
<ol type="i" >
   <li>항목 1</li>
   <li>항목 2</li>
   <li>항목 3</li>
</ol>

2-6-3. 정의 리스트(Definition List - <dl>)

개념 : 용어와 그에 대한 정의를 나열할 때 사용한다.

기본 스타일 : 항목 앞에 아라비아 숫자가 순서대로 표시된다.

HTML 구조

 - <dl> 태그로 리스트를 시작하고 종료한다.

 - 각 용어는 <dt> 태그로 해당 용어의 정의는 <dd> 태그로 표시한다.

<dl>
<dt>용어 1</dt>
<dd>용어 1에 대한 정의</dd>
<dt>용어 2</dt>
<dd>용어 2에 대한 정의</dd>
</dl>
<dl>
    <dt>HTML5</dt>
    <dd>Hyper Text Markup Language의 약자로, 웹 페이지를 구성하기 위한 표준 마크업 언어입니다.</dd>
    <dt>CSS3</dt>
    <dd>Cascading Style Sheets의 약자로, 웹 페이지의 스타일을 정의하는 데 사용되는 스타일 시트 언어입니다.</dd>
</dl>

 

2-7. Table

HTML 테이블은 데이터를 구조화하고 정렬된 형태로 표시하는데 유용하다.

 

2-7-1. 기본 테이블 구조

<style> 태그 :

내부 CSS를 정의한다. 테이블, 행, 셀의 테두리, 배경색 등을 지정할 수 있다.

<thead> 태그 : 

테이블의 헤더 부분을 정의한다.

<tbody> 태그 :

테이블의 본문 부분을 정의한다.

<tr> 태그 :

행(row)을 정의한다.

<th> 태그 : 

헤더 셀을 정의한다.

<td> 태그 : 

데이터 셀을 정의한다.

<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>전화번호</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>홍길동</td>
            <td>010-1234-5678</td>
        </tr>
        <tr>
            <td>이순신</td>
            <td>010-2323-5674</td>
        </tr>
    </tbody>
</table>

 

2-7-2. CSS를 사용한 테이블 스타일링 

<style> 태그 : 내부 CSS를 정의한다. 여기서 테이블, 행, 셀의 테두리, 배경색을 지정할 수 있다.

<style>
 table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
 }
 th {
    background-color: pink;
 }
</style>

 

2-7-3. 열 합치기(colspan)

colspan 속성 : 하나의 셀을 여러 열에 걸쳐 확장한다.

<tag colspan="합치고 싶은 열의 칸 숫자">Content</tag>

 

2-7-4. 행 합치기(rowspan)

rowspan 속성 : 하나의 셀을 여러 행에 걸쳐 확장한다.

<tag rowspan="합치고 싶은 행의 칸 숫자">Content</tag>

 

2-7-5. 테이블 캡션(caption)

<caption> 태그 : 테이블의 제목이나 설명을 추가한다.

<caption>제목 또는 설명</caption>

 

3. HTML 속성 (Attribute)

3-1. Attributes (속성)

HTML 요소에 추가 정보를 제공하거나 동작을 제어하기 위한 속성을 정의한다.

 

 - href : 하이퍼링크의 목적지 주소

 - src : 이미지 등의 외부 리소스 경로

 - alt : 대체 텍스트를 지정하며, 이미지가 표시되지 않을 때 보인다

<a href="https://www.example.com">링크</a>
<img src="image.jpg" alt="이미지">

 

3-2. Image

HTML에서 이미지를 삽입하고 관리하는 방법이다.

 

3-2-1. <img> 태그 사용

  * <img> 태그는 웹 페이지에 이미지를 삽입하기 위해 사용된다.

  * 이 태그는 닫는 태그가 없는 빈 태그이다.

<img src="이미지 URL" alt="대체 텍스트">

  * src (source) : 이미지의 URL 주소를 지정한다.

  * alt(alternative) : 이미지가 로드되지 않을 때 표시되는 대체 텍스트이다.

 

 3-2-2. 절대경로와 상대경로

웹 개발 및 파일 시스템에서 매우 중요한 개념이며, 차이점을 명확히 알아야 파일과 리소스에 효과적으로 접근할 수 있다.

 

 - 절대 경로(Absolute Path)

  * 정의 : 파일이나 웹페이지의 전체 경로를 나타낸다. 해당파일이나 웹 페이지의 고유한 위치를 표시한다.

  * 특징:

    - 컴퓨터의 파일 시스템에서는 보통 디스크의 루트부터 시작한다.

    - 웹 URL에서는 http:// https://로 시작한다.

    - 이 경로는 해당 시스템이나 웹 상에서 고유하므로, 어디서든 같은 파일이나 페이지를 가리킨다.

  * 예시 : 

    - 웹 URL : https://www.example.com/images/picture.jpg

    - 파일 시스템 : C:\\Users\\Username\\Documents\\file.txt

 

 - 상대 경로(Relative Path)

  * 정의 : 현재 파일의 위치를 기준으로 한 다른 파일의 위치를 나타낸다.

  * 특징:

    - 파일의 위치는 현재 작업 중인 디렉토리나 웹 페이지 URL에 상대적이다.

    - 이동 방식의 종류

       * ./ : 현재 디렉토리.  ex) ./image.jpg는 현재 디렉토리에 있는 image.jpg

       * ../ : 상위 디렉토리. ex) ../image.jpg는 현재 디렉토리의 바로 위 디렉토리에 있는 image.jpg

       * / : 루트 디렉토리. 웹사이트의 루트로부터 경로를 나타낸다.

    - 이 경로는 해당 시스템이나 웹 상에서 고유하므로, 어디서든 같은 파일이나 페이지를 가리킨다.

  * 예시 : 

    - 현재 위치가 C:\\Users\\Username\\Documents이고, 이미지가 C:\\Users\\Username\\Images에 있을 때, 상대경로는 ../Images/image.jpg다.

 

 - 사용 상황

  * 절대경로 : 웹 사이트나 애플리케이션에서 외부 리소스에 접근할 때 자주 사용된다.

ex) 다른 웹에서의 이미지나 파일을 링크할 때, 웹페이나 파일 전체 URL 주소

https://www.example.com/image.jpg

 

  * 상대경로 : 웹 사이트나 소프트 웨어 프로젝트 내부에서 파일을 참조할 때 주로 사용된다. 파일 구조가 변경되더라도 경로를 쉽게 유지할 수 있다.

ex) 현재 파일 위치를 기준으로 한 파일 경로

./images/image.jpg

 

 - 이미지 삽입

  * 절대경로를 사용하여 이미지를 삽입할 수 있다.

<img src="<https://example.com/image.jpg>" alt="HTML 이미지">

 

- 이미지 크기 조절

  * width와 height 속성을 사용하여 이미지의 너비와 높이를 조절할 수 있다.

<img src="<https://example.com/image.jpg>" alt="HTML 이미지" width="100" height="100">

 

3-3. Link

하이퍼 링크는 웹 페이지들을 서로 연결하고, 사용자가 다른 페이지나 페이지 내의 특정 섹션으로 이동할 수 있게 한다.

링크들은 <a> 태그를 사용하여 생성된다.

 

3-3-1. 기본 링크 생성

 - <a> 태그 : 하이퍼링크를 생성한다.

 - href 속성 : 연결할 웹 페이지의 URL을 지정한다.

<a href="<https://www.naver.com/>">네이버</a>

 

3-3-2. target 속성을 사용한 링크 열기 옵션

 

 - _self (기본값): 현재 창에서 링크 열기

 - _black : 새창 또는 탭에서 링크 열기

- _parent : 부모 프레임에서 링크 열기

- _top : 최상위 프레임에서 링크 열기

<a href="<https://www.naver.com/>" target="_blank">네이버</a>

3-3-3. 링크 상태(Link State)

 - link : 방문하지 않은 링크.

 - visited : 방문한 링크.

 - hover : 마우스가 링크 위에 있을 때.

 - active : 링크를 클릭하고 있는 동안

 

3-3-4. HTML Link를 이용한 북마커(Bookmarker)

북마커는 페이지 내의 특정 섹션으로 직접 이동할 수 있게 하는 링크이다.

 - id 속성 사용 : 섹션에 id를 지정하고 해당 id를 링크의 herf에 #과 함께 사용한다.

 - name 속성 사용 : <a> 태그에 name 속성을 추가하여 섹션을 지정한다.

<a href="#article">기사보러 가기</a>
...
<h1 id="article">topic</h1>

<a href="#article">기사보러 가기</a>
               ...
<h1><a name="article"></a>topic</h1>

 

3-3-5. 이미지 링크 설정 방법

 1) <a> 태그 사용 : 링크를 생성하기 위해 <a> 태그를 사용한다.

 2) href 속성 : 사용자가 이미지를 클릭했을 때 이동할 웹 페이지의 URL을 지정한다.

 3) 이미지 삽입 : <img> 태그를 <a> 태그 안에 넣어 이미지를 삽입한다.

htmlCopy code
<a href="https://www.example.com">
    <img src="image_url.jpg" alt="설명 텍스트">
</a>
728x90
저작자표시 비영리 변경금지

'웹 서비스 개발(FB,BE,SERVER,DB) > HTML & CSS' 카테고리의 다른 글

6. CSS_Box Model  (0) 2024.01.21
5. CSS (Cascading Style Sheets)  (0) 2024.01.21
4. HTML 멀티미디어  (0) 2024.01.21
3. HTML Input  (0) 2024.01.20
2. HTML Block 과 Inline  (0) 2024.01.17

댓글

티스토리툴바