프론트엔드/HTML

웹 문서 입력 방법

가든_ 2022. 9. 16. 19:50

텍스트 입력하기

<hn>

  • 제목을 나타냄
  • h는 heading의 줄임말
  • n의 자리에는 1~6의 숫자가 들어감
  • <h1>이 제일 크고 <h6>이 제일 작다

<p>

  • 텍스트 단락을 만듦
  • <p>와 </p>사이에 텍스트를 입력하면 텍스트 앞 뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.
  • 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다.

<br>

  • 줄을 바꿈
  • 닫는 태그가 필요없음
💡 <br> 태그를 두 번 사용하면 빈 줄이 생기면서 텍스트 단락이 나뉜 것 처럼 표시할 수 있지만 이것은 실제로 단락이 만들어진게 아니다. 이때 CSS를 사용한다면 문제가 생길 수 있으므로 단락을 만들 때는 <p>를 사용하는게 옳다.

<blockquote>

  • 인용할 때 사용
  • 다른 텍스트 보다 살짝 안으로 들여쓴 형태가 된다.

<strong>,<b>

  • 텍스트를 굵게 표시
  • <strong> : 경고나 주의 사항을 강조할 때
  • <b> : 단순히 글자만 굵게 할 때

<em>,<i>

  • 기울인 텍스트를 입력
  • <em> : 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용
  • <i> : 마음속의 생각이나 용어, 관용구 등에 사용, 다른 텍스트와 구별하고 싶을 때 사용

목록 만들기

<ol>,<li>

  • 순서 있는 목록을 만들 때 사용
  • <ol> ordered list
  • <li> list
<ol type="a" start="2">
<li>항목1</li>
<li>항목2</li>
</ol>

type, start 속성

  • 순서 있는 목록은 기본적으로 숫자로 번호를 붙인다.
  • type : 영문자나 로마 숫자등으로 순서를 나타낼 수 있음
    • type = “1”
      • 숫자(기본값)
    • type = “a”
      • 영문 소문자
    • type = “A”
      • 영문 대문자
    • type = “i”
      • 로마 숫자 소문자
    • type = “I”
      • 로마 숫자 대문자
  • 순서 있는 목록은 기본적으로 1부터 시작하지만 start 속성을 사용하면 시작 번호를 바꿀 수 있다.

<ul>,<li>

  • 순서 없는 목록을 만들 때 사용
    • 순서 없는 목록은 항목 앞에 불릿(작은 원이나 사각형)을 붙여서 구분한다.
  • <ul> : unordered list
  • <li> : list

<dl>,<dt>,<dd>

  • 설명 목록을 만들 때 사용
    • 이름과 값 형태로 된 목록
  • <dl> : <dt>와 <dd>를 묶을 때 사용
  • <dt> : 이름 부분을 지정하는 태그
  • <dd> : 값 부분을 지정하는 태그
    • <dt>태그 하나에 <dd>태그를 여러 개 사용할 수 있다.

표 만들기

표의 구성 요소

  1. 행
  2. 열
  3. 셀

<table>,<caption>

  • 표를 만들 때 사용
  • <table> : 표의 시작과 끝을 알려줌
  • <caption> : 표의 제목을 붙일 때 사용
<table>
	<caption>표 제목</caption>
</table>

<tr>,<td>,<th>

  • <tr> : 행을 만들 때 사용
  • <td> : 행 안에 있는 셀을 만들 때 사용
  • <th> : 표의 제목 행에 셀을 만들 때 사용
    • <td>에 비해 내용이 진하게 표시되고, 셀 안에서 중앙에 배열된다.

<thead>,<tbody>,<tfoot>

  • 표의 구조(제목, 본문, 요약)를 지정
  • <thead> : 제목
  • <tbody> : 본문
  • <tfoot> : 요약

rowspan, colspan 속성

  • 여러 셀을 합치거나 나누고 싶을 때 사용
  • rowspan : 행을 합칠 때 사용
  • colspan : 열을 합칠 때 사용
<td rowspan="합칠 셀의 개수">셀의 내용</td>
<td colspan="합칠 셀의 개수">셀의 내용</td>

<col>,<colgroup>

  • 열을 묶고 싶을 때 사용
  • 표의 특정 열에 배경색을 넣거나 너비를 바꿀 때 열을 선택하기 위해 사용
  • <col> : 열을 1개만 지정해서 선택, 닫는 태그가 없다.
    • 표 전체 열의 개수만큼 <col> 태그를 작성해야한다.
  • <colgroup> : 열을 2개 이상 묶어서 선택
  • 반드시 <caption> 태그 다음에 사용해야 한다.
    • 표의 내용이 시작되기 전에 열의 상태를 알려주기 위해
<table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:#eee;">
      <col>
      <col style="width:150px">
      <col style="width:150px">
    </colgroup>

이미지 삽입하기

<img>

<img src="이미지 파일 경로" alt="대체용 텍스트">
  • src : 이미지 파일의 경로를 지정하여 웹 브라우저에 알려 주는 역할
    • 경로 : 현재 HTML문서에서 이미지 파일이 있는 곳까지 어떻게 찾아가야 하는지 알려줌
    • 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해짐
      • 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 src 속성에는 이미지 파일의 이름만 적으면 된다.
      • 웹 문서가 있는 폴더의 하위 폴더(images)에 이미지 파일이 있다면
      <img src="images/이미지 파일 이름.jpg">
  • alt : 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력
    • 이미지를 삽입할 때, 화면 낭독기 같은 보조 기기에서 이미지를 대신해서 읽어줄 텍스트를 함께 넣을 수 있다.
    <img src="images/이미지 파일 이름.jpg" alt="대체용 텍스트">
<h1>대체용 텍스트</h1>
    • alt 속성을 이용하면 이미지 파일 경로를 잘못 넣거나 인터넷이 불안정할때 이미지 대신 텍스트가 나타난다. ⇒ 이미지를 직접 보지 못하더라도 어떤 이미지인지 짐작 가능
  • width, height
    • 이미지 파일 수정을 하지 않고 웹 브라우저 창에서 보이는 이미지의 크기만 조절하고 싶을 때 사용
    • width나 height 중 하나의 속성만 지정해도 나머지 속성의 비율은 자동으로 계산되어 나타내진다.
    • 퍼센트와 픽셀 단위를 사용해서 조절한다.
      • width=”50%”
      • width=”150”

오디오와 비디오 삽입하기

<object>,<embed>

  • <object>
    • 오디오, 비디오, 자바 애플릿, PDF등 다양한 멀티미디어 파일을 삽입할 때 사용
    • 웹 문서 안에 다른 문서를 삽입할 때도 사용
    <object width="너비" height="높이" data="파일"></object>
    • data 속성에 보여줄 멀티미디어 파일을 지정하고 width, height속성을 사용해 플레이어의 크기를 지정
  • <embed>
    • 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있다.
      • HTML의 <audio>,<video>,<object>태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed>태그를 사용해서 멀티미디어 파일을 삽입
    • HTML 초기 버전부터 사용해서 대부분 브라우저에서 사용할 수 있음
    <embed width="너비" height="높이" data="파일"></object>
    • src 속성에 삽입할 멀티미디어 파일을 지정하고 width, height속성을 사용해 플레이어의 크기를 지정
    • 닫는 태그가 없다.

<audio>,<video>

  • HTML5부터는 별도의 플러그인 프로그램의 필요없이 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생할 수 있다.
    • 웹 브라우저마다 플레이어가 다르다.
    • 같은 브라우저라 하더라도 버전에 따라 지원 상황이 달라지기도 한다.
<audio src="오디오 파일 경로" controls></audio>
<video src="비디오 파일 경로" controls width="700"></video >
  • <audio>
    • 배경 음악이나 효과음 등 오디오 파일을 삽입할 때 사용
  • <video>
    • 비디오 파일을 삽입할 때 사용
  • controls
    • 오디오나 비디오 파일을 시작하거나 종료할 수 있는 컨트롤 바 속성

하이퍼링크 삽입하기

<a> href

  • <a> : 링크를 삽입할 때 사용
  • href : 링크를 삽입할때 쓰는 속성
<a href="링크할 주소">텍스트 또는 이미지</a>
  • 링크가 추가되면 텍스트에 밑줄이 생기면서 글자색이 파란색으로 바뀐다.
    • 한번이라도 클릭한 텍스트 링크는 자주색으로 바뀐다.
    • 텍스트 링크의 색을 바꿀 때는 CSS 사용
  • target 속성
    • 링크를 클릭했을 때 연결된 문서가 새 탭에서 열리게 하기 위해 사용
    <div>
	<p><a href="링크할 주소" target=_blank>본문</a></p>
</div>