HTML 글자 위로 올리기 - HTML geulja wilo olligi

Question

티스토리 뷰

(1) 이미지나 글자의 위치를 내 맘대로;
<DIV style="position:absolute;left:270;top:180;">원하는 그림이나 글자</div>

목차 Show

티스토리 뷰
어제 오늘 내일
[HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬)
1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬)
2. 글자 위, 아래, 중간 정렬하기 (세로 정렬)

(left:270; top:180 ☜요 숫자로 위치를 조절함)

(2) 문서에 여백을 주려면.. 글을 쓰기 직전에
      <p style="margin-left:50px">
   을 먼저 쓰고 시작한다. (숫자로 조절함)
    <ul>을 넣어주기도 함.

(3) 테이블안에서 이미지 옆에 여백 주기
이미지 주소에 이어서
cellspacing=20 cellpadding=10 를 넣어준다.(숫자로 공간넓이 조절)

(4) 이미지 옆에 공간 없이 글을 쓰려면;
<img src="그림 주소gif" border=0 hspace="3" vspace="5" align=left >

(5) 이미지 상단에 텍스트 정렬하기 (테이블 안 그림의 윗쪽에 글씨 또는 아이콘을 넣고싶을 때)
<td border=0 valign=top align=center>

(6) 이미지 하단에 텍스트 정렬하기(테이블 안에 있는 그림의 아랫쪽에 글씨나 아이콘) <td border=0 valign=bottom align=center>

(7) 이미지를 좌,우, 중앙에 맘대로 배치하려면 ;
이미지(아이콘)를 오른쪽에 ;
<div align="right"> 이미지 주소 </div>

이미지(아이콘)를 중앙에 ;
<div align="center"> 이미지 주소 </div>

이미지(아이콘)를 왼쪽에 ;
<div align="left"> 이미지 주소 </div)

HTML 글자위치 정렬

글자 위치정렬은 단순하게 <center>...</center> 태그가 있습니다. 조금 더 원하는 방향으로 글자 위치정렬 방법은 <p align>...</p>가 있습니다.

<center>...</center>태그 이용하기

아래와 같이<body>...</body> 사이에 태그를 삽입시킵니다.

아래 그림에 파랗게 드래그 되어 있는 부분이 삽입된 부분입니다.

메모장을 이용해 위와 같이 만들어 브라우저를 통해 확인해보면 아래와 같습니다.

<p align>...</p>이용하기

<body>...</body> 사이에 아래의 내용을 삽입합니다.

아래는 메모장을 이용하여 작성하였습니다.

이렇게 메모장을 이용하여 만든 HTML 문서를 브라우저를 통해 확인하면 아래와 같습니다.

다음에는 <div>태그에 대해 알아보겠습니다.

어제 오늘 내일

IT/HTML&CSS

[HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬)

hi.anna 2021. 1. 19. 06:06

HTML과 CSS를 이용하여

테이블 안의 글자를 정렬하는 방법을 정리하였습니다.

1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬)
2. 글자 위, 아래, 중간 정렬하기 (세로 정렬)
3. 정리 (가로 세로 모두 가운데 정렬하기)

1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬)

테이블 안의 글자의 가로 방향 정렬은

CSS의 'text-align' 속성을 사용하고,

속성값으로 'left', 'right', 'center'가 올수 있습니다.

기본

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}

text-align 설정이 없으면 기본적으로 <th>는 가운데 정렬, <td>는 왼쪽 정렬됩니다.

가운데 정렬

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  text-align: center;
}

th, td 태그에 'text-align; center' 속성을 추가하였습니다.

왼쪽 정렬

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  text-align: left;
}

th, td 태그에 'text-align; left' 속성을 추가하였습니다.

오른쪽 정렬

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  text-align: right;
}

th, td 태그에 'text-align; right' 속성을 추가하였습니다.

2. 글자 위, 아래, 중간 정렬하기 (세로 정렬)

글자를 상하로 세로 정렬할 때는 'vertical-align' 속성을 사용합니다.

테이블에서 글자의 위치를 지정하기 위해 'top', 'middle', 'bottom' 값을 사용할 수 있습니다.

기본

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}

vertical-align 속성을 지정하지 않으면 기본적으로 가운데(세로) 정렬됩니다.

위로 정렬

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  vertical-align : top;
}

th, td 태그에 'vertical-align; top' 속성을 추가하였습니다.

아래로 정렬

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  vertical-align : bottom;
}

th, td 태그에 'vertical-align; bottom' 속성을 추가하였습니다.

중간 정렬

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
th, td {
  vertical-align : middle;
}

th, td 태그에 'vertical-align; middle' 속성을 추가하였습니다.

3. 정리

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}
table {
  width : 300px;
  height : 200px;
}
td, th {
  text-align : center;
  vertical-align : middle;
}

테이블안의 글자를 가로, 세로 모두 중앙 정렬하는 코드입니다.

td, th 태그에 text-align, vertical-align 속성을 정의하였습니다.

코딩 텍스트 위치