body 전역 속성, 본문 내부 태그

728x90

전체 코드

<!-- ./는 현재 폴더이며 상대 경로. ../는 상위 폴더. 절대 경로는 c:\User... 다른 컴퓨터에서는 경로가 다르니까 잘 안 됨 -->
<!-- 즉, 해당 파일이 있는 같은 계층의 폴더 내에서 'pic'이라는 폴더에 들어가서 'cute.png'를 선택하는 것 -->
<body bgcolor="#DEF38A" leftmargin="30" topmargin="50" background="./pic/cute.png">
    두번째 라인

    <!-- <p>는 문단. align은 정렬. 크기는 <h1></h1> ... <h6></h6>로 조절 -->
    <p align="center">
    <h1>나의 첫번째 페이지이다.</h1> 나의 첫번째 페이지이다. 나의 첫번째 페이지이다.
    </p>

    <h2>
        <!-- <pre>는 있는 그대로 출력. 잘 안 씀 -->
        <pre>
                a
                    b
            </pre>
    </h2>

    <!-- 선긋기. noshade 안 하면 윤곽선에 음각 처리 -->
    <hr width="300" size="10" color="#0c93d9" noshade>

    <!-- <img>는 이미지 삽입. src: 이미지 경로 -->
    <!-- 해당 파일이 있는 상위 계층의 폴더 내에서 'temp'라는 폴더에 들어가서 'cute2.png'를 선택하는 것 -->
    <img src="../temp/cute2.png" align="center" width="50" height="50">

    <!-- <a>는 하이퍼링크. href: 이동할 링크. target: _blank는 새 탭, _self는 현재 창(디폴트) -->
    <p>
        <a href="https://www.hanyang.ac.kr/web/www/home" target="_blank">한양대학교</a>
    </p>

    <!-- <table>은 표. tr: 행, td: 열. tr 안에 td가 있음. th는 첫 번째 행 -->
    <table border="1">
        <tr bgcolor="white">
            <th>이름</th>
            <th>나이</th>
        </tr>
        <tr>
            <td>김서영</td>
            <td>24</td>
        </tr>
    </table>

</body>

전역 속성

body에 leftmargin="30", topmargin="50"을 부여하면 주황색 영역처럼 여백이 생성된다.

웹의 기준점인 왼쪽 상단(0,0)을 기준으로 각각 왼쪽 30px, 위쪽 50px만큼의 여백을 준 것이다.

개발자 도구의 Style 탭을 확인해 보면, 명시하지 않은 margin-right와 margin-bottom까지 자동으로 설정되어 있다.

이는 브라우저가 이전 방식의 속성을 해석할 때 레이아웃 균형을 위해 대칭적으로 마진을 생성하기 때문이다.

따라서 특정 방향에만 정밀하게 여백을 주고 싶다면, HTML 속성보다는 CSS(margin-left, margin-top)를 사용하는 것이 논리적으로 명확하며 권장되는 방식이다.

bgcolor = 색상: 백그라운드 색상 지정
* 색상 이름(red, aqua 등), RGB 값(rgb(255, 0, 0, 0), 마지막은 투명도), 헥스 코드(#FF000) 모두 가능
link = 색상: 링크를 누르기 전의 색상 지정
alink = 색상: 링크를 누른 후의 색상 지정
vlink = 색상: 링크를 한 번 방문했을 경우 색상 지정
leftmargin = 0: 왼쪽 여백
topmargin = 0: 위쪽 여백
marginwidth = 0: 좌우 여백
marginheight = 0: 위아래 여백
background = "이미지 경로": 이미지를 배경으로 지정

본문 내부 태그

텍스트 레이아웃

<br>: 줄바꿈(단일 태그)
<p></p>: 하나의 문단을 만든 다음에 줄바꿈
<p align=left> abc </p>: abc 왼쪽 정렬
<p align=right> abc </p>: abc 오른쪽 정렬
<p align=center> abc </p>: abc 가운데 정렬
<h1></h1> ~ <h6></h6>: 제목. h1이 가장 크고 h6이 가장 작음
<pre></pre>: 입력된 모습 그대로 출력(공백, 줄바꿈 그대로 표현)

목록 구조화

<ol></ol>: Ordered List. 순서가 있는 목록
<ul></ul>: Unordered List. 순서가 없는 목록
<li></li>: ol 또는 ul 안에 들어가는 항목. 모든 내용은 <li> 태그 안에 작성해야 함

type: 속성값 종류
- ol
  - type="1": 1, 2, 3...(기본값)
  - type="A" / type="a": 알파벳 대문자/소문자(A, B, C... / a, b, c...)
  - type="I" / type="i": 로마 숫자 대문자/소문자( I, II, III... / i, ii, iii...)
- ul
  - type="disk": ● 까만 채워진 원(기본값)
  - type="circle": ○ 안이 비어있는 원
  - type="square": ■ 까만 채워진 사각
start: 시작값 지정
- <ol start="5">로 설정 시, 5번부터 번호 시작
reversed: 내림차순으로 순서 매김
- 5, 4, 3... 처럼 역순으로 번호 지정

구분선 및 미디어 연결

<hr>: Horizontal Rule. 수평선
- width: 선의 좌우 폭(픽셀 단위)
- size: 선의 두께(픽셀 단위)
- align: 선의 정렬(left, right, center)
- color: 선의 색상 지정
- noshade: 입체적인 음각 효과를 제거하고 평면으로 표시
<img>: 이미지 삽입
- src: 이미지 파일의 경로(절대 경로 및 상대 경로 사용 가능)
  - 상대 경로
    - ./ 지금 내가 있는 폴더(현재 위치)
    - ../ 나를 감싸고 있는 바로 위 폴더(상위 계층)
  - 절대 경로
    - C:\Users\...처럼 내 컴퓨터의 고유 주소
    - 다른 사람 컴퓨터에서는 열리지 않음
- width / height: 이미지의 가로, 세로 크기 지정
- align: 텍스트와의 정렬 방식
  - top, middle, bottom: 옆에 오는 문자열이 이미지의 위, 중앙, 아래 중 어디에 맞출지 결정
  - left, right: 이미지를 왼쪽이나 오른쪽으로 정렬
- border: 이미지 테두리의 두께
- hspace / vspace: 이미지의 좌우(h) 및 상하(v) 여백 지정
<a>: Anchor. 하이퍼링크
- href: 이동할 목적지 주소(URL)
- target: 링크를 클릭했을 때 페이지가 열릴 방식
  - _blank: 새 창이나 새 탭에서 열기
  - _self: 현재 창에서 열기(기본값)
- title: 마우스를 링크 위에 올렸을 때 나타나는 풍선 도움말(설명)

텍스트 스타일링(최근에는 CSS로 대체됨)

<font> : 글자의 색상(color), 크기(size), 글꼴(face)을 지정
<big></big> : 글자를 한 단계 크게 표시
<small></small> : 글자를 한 단계 작게 표시
<center></center> : 안의 내용물을 가운데로 정렬
<u></u>: Underline. 밑줄을 그음
<strong></strong> (또는 <b></b>) : 글자를 굵게(Bold) 표시

표 구조화

<table></table>: 표 전체 설정
- width / height: 표의 가로/세로 크기 지정
- border: 테이블 전체 테두리의 굵기
- bordercolor: 테두리의 색상
- bgcolor / background: 표 전체의 배경색 또는 배경 이미지
- align / valign: 표의 수평 정렬 및 수직 정렬(top, middle, bottom)
- cellpadding: 셀 테두리와 데이터 사이의 안쪽 여백
- cellspacing: 셀과 셀 사이의 바깥쪽 간격
<th></th>: Table Head. 테이블의 제목 칸. 디폴트로 굵은 글씨와 가운데 정렬 적용
<tr></tr>: Table Row. 표의 한 행을 만듦
- width / height: 해당 행의 크기 설정
- bgcolor / background: 해당 행에만 적용되는 배경 설정. 배경색/배경이미지 경로
- align / valign: 해당 행 안의 데이터들을 수평/수직 정렬(top, middle, bottom)
<td></td>: Table Data. 표의 일반 데이터 칸(열)을 만듦. 옵션은 <tr>과 동일

셀 병합: <th>나 <td> 태그 내에서 여러 칸을 하나로 합칠 때 사용
- colspan="숫자": 열 병합. 가로 방향으로 여러 칸을 합침
- rowspan="숫자": 행 병합. 세로 방향으로 여러 칸을 합침

<table border="1">
  <tr bgcolor="red">
    <td>ghi1</td><td>mnp1</td><td>def1</td>
  </tr>
  <tr bgcolor="yellow">
    <td rowspan="2">ghi2</td><td>mnp2</td><td>def2</td>
  </tr>
  <tr bgcolor="blue">
    <td colspan="2">ghi3</td><td>mnp3</td> </tr>
</table>

주의할 점

셀을 합친 만큼 전체 칸(<td>)의 개수를 줄여서 작성해야 한다.

예를 들어, 한 행에 원래 3칸이 들어간다면 colspan="2"를 쓴 행에서는 이미 2칸을 확보한 상태이므로, 나머지 <td>는 1개만 더 써야 표의 전체 레이아웃이 깨지지 않고 의도한 대로 출력된다.

가로 병합(colspan): 현재 행(Row)에서 옆으로 자리를 차지하니까, 같은 줄에 있는 <td> 개수를 줄여야 함
세로 병합(rowspan): 아래 행(Row)의 자리까지 미리 차지하는 거니까, 다음 줄이나 다다음 줄에 있는 <td> 개수를 줄여야 함

영역 분할 및 그룹화

<div></div>: Division. 구역 분할. 여러 개의 문단이나 태그들을 하나로 묶어 더 큰 단위의 그룹으로 만듦
- 성격: Block Element(블럭 요소). 한 줄 전체를 차지하며, 다음에 오는 요소는 자동으로 줄바꿈되어 아래에 배치됨
- 의미: 자체적인 디자인은 없으나, CSS와 연결하여 그룹 전체의 디자인(배경색, 레이아웃 등)을 한꺼번에 제어할 때 유용
<span></span>: 특정 부분 그룹화. 문장 내부에서 특정 단어나 구절만을 선택하여 그룹화
- 성격: Inline Element(인라인 요소). 문단의 일부분으로 취급되어 줄바꿈 없이 필요한 만큼의 너비만 차지
- 의미: 문장 전체가 아닌, 문장 속의 특정 부분에만 별도의 스타일(색상, 글꼴 등)을 입히고 싶을 때 사용

728x90

'Development > Web(HTML, CSS, JS)' 카테고리의 다른 글

js로 visibility를 collapse에서 visible로 바꿀 때, 처음 클릭에서는 동작하지 않는 문제 (0)	2026.04.18
HTML 태그, head (0)	2026.04.17

외계인우주침공작전

body 전역 속성, 본문 내부 태그

전체 코드

전역 속성

본문 내부 태그

텍스트 레이아웃

목록 구조화

구분선 및 미디어 연결

텍스트 스타일링(최근에는 CSS로 대체됨)

표 구조화

영역 분할 및 그룹화

'Development > Web(HTML, CSS, JS)' 카테고리의 다른 글

티스토리툴바

body 전역 속성, 본문 내부 태그

전체 코드

전역 속성

본문 내부 태그

텍스트 레이아웃

목록 구조화

구분선 및 미디어 연결

텍스트 스타일링(최근에는 CSS로 대체됨)

표 구조화

영역 분할 및 그룹화

'Development > Web(HTML, CSS, JS)' 카테고리의 다른 글

관련글

티스토리툴바