[HTML&CSS] Text

gaeon·2022년 4월 18일
0

HTML & CSS

목록 보기
1/4
post-thumbnail

42seoul이 끝난지 1개월... 함께 으쌰으쌰했던 언니들과 함께 앱 개발을 해보기로 했다. 하지만! 두둥탁!!! 지금까지 접해본 언어는 C언어 하나뿐이었기 때문에 앱개발을 위해 HTML, CSS, JavaScript를 새로 배워보기로 했다. 먼저 시작하는 것은 웹 문서를 만드는 언어인 HTML과 만든 웹 문서를 꾸미기 위한 CSS이다!
<Do it! HTML5 + CSS3 웹 표준의 정석>이라는 책을 발견해 이 책과 구글링을 통해 혼자 해보려고 한다.

편집기는 원래 사용하던 VS code를 사용할 예정이다.


HTML 문서의 기본 구조

<!doctype html>
<html>
	<head>  
    	<meta charset="utf-8">
        <title> HTML과 CSS </title>
    </head>
    <body>
    	<h1> Hello World </h1>
    </body>
</html>

<!doctypeㅤhtml>
먼저 가장 위에 쓰여있는 <!doctypeㅤhtml>은 현재 문서가 html로 쓰여진 웹 문서라는 뜻이다. 즉 문서 유형을 지정해 준다.
<html> ~ </html>
<html> 태그는 웹 문서의 시작을 알려주고, </html> 태그는 문서의 종료를 알려준다.
<head> ~ </head>
<head> 태그와 </head> 태그 사이에는 웹 브라우저에서 보이지 않지만 웹 브라우저가 알아야 할 정보를 담는다. 예를 들얼 <meta charset="utf-8">은 html의 문자들을 utf-8로 인코딩하라는 정보를 담고 있다. 이를 통해 우리가 문자를 깨지지 않고 볼 수 있게 된다.
<body> ~ </body>
<body> 태그와 </body> 태그 사이에는 실제 브라우저에 보여지는 내용을 담는다. 이 부분을 실제로 사용자가 보게 되는 것이다.


텍스트 관련 태그 - (1)

제목

<h1> ~ </h1> 가장 크게 표시됨
<h6> ~ </h6> 가장 작게 표시됨

단락

<p> ~ </p> 앞뒤에 줄바꿈이 있는 텍스트 덩어리

줄바꿈

<br> 닫는 태그 없음!!!

수평줄

<hr> 가로선 삽입 & 닫는 태그 없음

인용문

<blockquote> ~ </blockquote> 인용문을 삽입할 때 사용하며 다른 텍스트보다 들여써짐


텍스트 관련 태그 - (2)

굵게 표시

<strong> ~ </strong> 굵게 "강조"할 텍스트
<b> ~ </b> 굵게 "표시"할 텍스트
*두 태그는 화면에 나타났을 때 차이가 없다.

이텔릭체

<em> ~ </em> 이탤릭체로 "강조"할 텍스트
<i> ~ </i> 이탤릭체로 "표시"할 텍스트

인용

<q> ~ </q> 자동으로 인용내용에 "~"를 붙여줌 & 줄바꿈 하지 않음

형광펜

<mark> ~ </mark> 형광펜같은 효과를 내줌

줄바꿈 없이 단락 묶기

<span> ~ </span> 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하고자 할 때 사용


목록을 만드는 태그

순서 없는 목록 (unordered list)

<ul> ~ </ul> 순서가 필요하지 않은 목록임을 표시
<li> ~ </li> 각 항목을 표시

<ul>
  <li> 첫번째 내용 </li>
  <li> 두번째 내용 </li>
  <li> 세번째 내용 </li>
</ul>
  • 첫번째 내용
  • 두번째 내용
  • 세번째 내용

순서 있는 목록(orderded list)

<ol> ~ </ol> 순서가 필요하지 않은 목록임을 표시
<li> ~ </li> 각 항목을 표시

<ol>
  <li> 첫번째 내용 </li>
  <li> 두번째 내용 </li>
  <li> 세번째 내용 </li>
</ol>
  1. 첫번째 내용
  2. 두번째 내용
  3. 세번째 내용

표를 만드는 태그

기본 구조

<table> ~ </table> 표의 자리 만들기
<tr> ~ </tr> 행 만들기
<td> ~ </td> 각 셀 안에 들어갈 내용

<table>
  <tr>
    <td> 1행 1열 </td>
    <td> 1행 2열 </td>
  </tr>
  <tr>
    <td> 2행 1열 </td>
    <td> 2행 2열</td>
  </tr>
</table>
1행 1열 1행 2열
2행 1열 2행 2열

제목

<caption> ~ </caption> 표의 위쪽 중앙에 표시됨
<figcaption> ~ </figcaption> 태그 위치에 따라 제목의 위치가 달라짐

<table>
  <caption> 위쪽 중앙에 위치한 제목 </caption>
  <tr>
    <td> 1행 1열 </td>
    <td> 1행 2열 </td>
  </tr>
  <tr>
    <td> 2행 1열 </td>
    <td> 2행 2열</td>
  </tr>
</table>
위쪽 중앙에 위치한 제목
1행 1열 1행 2열
2행 1열 2행 2열
<figure>
  <figcaption> 위쪽에 위치한 제목 </figcaption>
<table>
  <tr>
    <td> 1행 1열 </td>
    <td> 1행 2열 </td>
  </tr>
  <tr>
    <td> 2행 1열 </td>
    <td> 2행 2열</td>
  </tr>
</table>
</figure>
위쪽에 위치한 제목
1행 1열 1행 2열
2행 1열 2행 2열
<figure>
<table>
  <tr>
    <td> 1행 1열 </td>
    <td> 1행 2열 </td>
  </tr>
  <tr>
    <td> 2행 1열 </td>
    <td> 2행 2열</td>
  </tr>
</table>
<figcaption> 아래쪽에 위치한 제목 </figcaption>
</figure>
1행 1열 1행 2열
2행 1열 2행 2열
아래쪽에 위치한 제목

열 또는 행 합치기

<td colspan = "합칠 셀의 개수"> ~ </td> 열 합치기
<td rowspan = "합칠 셀의 개수"> ~ </td> 행 합치기

표의 구조 정의하기

<thead> ~ </thead> 제목 부분
<tbody> ~ </tbody> 본문 부분
<tfoot> ~ </tfoot> 요약 부분


이 외에도 HTML에는 다양한 태그가 존재하지만 나는 이런 태그들을 다 외우지는 않을 것이다. 왜냐하면 우리는 필요한 태그가 있을때마다 검색을 하면 된다!

이 사이트에는 다양한 html 태그들이 많이 사용하는 순으로 정리되어 있다. https://www.advancedwebranking.com/seo/html-study/

0개의 댓글