HTML 기초 02

Notice

Recent Posts

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

관리 메뉴

공부기록용

HTML 기초 02 본문

📚강의록📚/유노코딩)HTML

HTML 기초 02

과부하가즈아 2023. 4. 13. 16:49

HTML 기본 텍스트 태그

문단(paragraph)

<p>  </p>

p태그는 문단 요소를 나타내는 태그로써, 가장 많이 사용되는 텍스트 태그이다. 하나의 p태그는 하나의 문단을 표현하며, 문단과 문단 사이에는 공백이 있다.

제목(headline)

<h1>  </h1>
<h2>  </h2>
<h3>  </h3>
<h4>  </h4>
<h5>  </h5>
<h6>  </h6>

h태그는 제목(표제) 요소를 나타내는 태그이며, 숫자와 함께 사용된다. 숫자가 1일때 글자가 가장 크고, 6일때 가장 작다.

수평선 표시

<hr>
또는
</hr>

hr태그는 수평선을 표시하는 단일 태그이다. 수평선은 주제 변경 또는 내용 구분을 위해 주로 사용된다.

줄바꿈, 여러번의 공백(띄어쓰기)

<br>
또는
</br>

&nbsp;
&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;

br태그는 줄바꿈을 담당

  는 두 번 이상의 공백 표시를 담당

※HTML 텍스트의 특징※

일반적으로 엔터는 ‘줄바꿈’을 의미하는 입력이지만, HTML 코드에서는 이를 무시한다. 또한 스페이스를 통한 공백(띄어쓰기)도 한 번씩 밖에 인정되지 않는다.

▶내용실습◀

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>텍스트 태그 연습</title>
  </head>
  <body>
    <h1>텍스트 태그 연습</h1>
    <p>텍스트를 표시하고 있습니다.</p>
    <hr>
    <h2>작은 제목</h2>
    <p>제목의 크기가 바뀌었습니다.</p>
    <p>p 태그는 하나의 문단을 나타냅니다.</p>
    <p>따라서 하나의 p 태그는 자기만의 영역을 가집니다.
        <br><br><br><br>
        지금 따라하면서 열심히 배우고 있는데.....
        <br><br><br>
        커피를 마셔도 조금 졸려서 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 힘드네요
        <br><br>
        그래도 열심히해보겠습니다.
        <br>
        하하하하핳
    </p>
  </body>
</html>

태그의 구분

블록태그: 블록 레벨 요소를 만드는 태그

자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.

ex) h태그, p태그 등

인라인태그: 인라인 요소를 만드는 태그

자기에세 필요한 만큼만의 공간만 차지하여 형성한다.

굵은 텍스트

<strong>  </strong>

strong태그는 감싸고 있는 콘텐츠(내용)을 굵게 표시하는 태그이다. 인라인 요소를 만드는 태그이다.

이탤릭체

<em>  </em>

em태그는 감싸고 있는 콘텐츠(내용)을 기울여 이탤릭체로 표시하는 태그이다. 인라인 요소를 만드는 태그이다.

형광펜 표시

<mark>  </mark>

mark태그는 감싸고 있는 콘텐츠에 형광펜 표시를 해주는 태그이다. 인라인 요소를 만드는 태그이다.

▶내용실습◀

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>태그의 구분과 텍스트 태그</title>
  </head>
  <body>
    <h1>제목을 표시하는 큰 텍스트!</h1>
    <p>문단을 나타내는 작은(?) 텍스트
    <strong>p 태그 안에서 굵에 표시하기</strong>
     이 태그는 블록 요소를 만들까요?
     <p>블록 안에 블록을 넣으면 블록 안에 층이 생겨버려요!</p>
     <mark>p 태그 안에서 밝에 표시하기</mark>
     아니면 인라인 요소를 만들까요!? 
    </p> 

    <strong>굵은 글자를 만들고 싶어요</strong>
    <em>기울여진 글자를 만들고 싶어요</em>
    <mark>형광색으로 칠한 글자를 만들고 싶어요</mark>
  </body>
</html>

HTML 기본 이미지 태그

기본 구조

<img src=”표시할 이미지파일” alt=”이미지설명”/>

이미지를 표시할 때 사용하는 단일 태그이다. 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야한다.
src속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성이다. 즉, 이미지의 url을 입력받는다.
url이란 이미지가 어디에 있는지 알려주기 위해 사용하는 규약(형식)이며, 서버에 위치한 이미지 파일이어도 되고, 내 컴퓨터에 저장된 이미지 파일이어도 된다.
alt는 alternative의 약자로 대체 텍스트 역할을 한다. 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신 대체 텍스트가 표시된다. (alt를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야 하는 상황에 대한 대비가 가능하다. 음성인식기가 이미지 대신 이를 활용하는 것)

이미지의 크기 조절하기

<img src=”표시할이미지파일” alt=”이미지설명”
  Width=”너비 값” height=”높이 값”/>

img 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수 있다. 이때 너비와 높이를 각각 지정할 수 있으며, 단위 없이 정수 값만을 지정한다. 이때 너비와 높이는 각각 픽셀(px)의 단위로 적용되어 진다.

▶내용실습◀

index.html이 생성된 폴더에 새 폴더(images), 이미지파일(테스트용.jpg)생성

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>이미지를 표시해보자</title>
  </head>
  <body>
   <h1>이미지를 표시해볼게요!</h1>
   <img src="images/테스트용.jpg"     ---> 이 html파일이 생성된 곳에 새 폴더로 images를 만들고 이미지를 테스트용으로 저장한뒤 불러온것(웹페이지의 이미지 url이어도 됨)
   alt="벚꽃이 만개한 길거리 사진" 
   width="300"  />                    --->width(너비/가로), height(높이/세로) 지정하고 싶은 값으로 넣으면 되고 하나만 입력시 그에 맞는 비율로 맞춰짐
   <p>이미지를 표시하는 img 태그</p>
  </body>
</html>

HTML 컨테이너 태그

콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그를 ‘컨테이너’라고 한다. 콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 컨테이너를 사용하는 것이 좋다.

<div>  </div>         -->블록 레벨 컨테이너

<span>  </span>       -->인라인 컨테이너

▶내용실습◀

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>영역을 구분해보자 </title>
</head>

<body>
  <h1>일단 문서를 만들자</h1>

  <hr>

  <div>
    <h2><span>공부</span> 다짐하기</h2>
    <img src="images/테스트용.jpg" width="300" alt="벚꽃" />
    <p>펭귄군은 공부를 열심히 하기로 했다!</p>
  </div>

  <hr>

  <div>
    <h2><span>운동</span> 열심히 하기</h2>
    <p>건강을 위해 운동을 열심히 하자!</p>
  </div>

</body>

</html>

전역속성

전역 속성(global attributes)는 모든 HTML 태그에서 공통으로 사용할 수 있는 속성이다.
속성이란, 태그의 부가적인 기능을 정의하는 것으로 선택사항이다. 속성을 시작 태그의 내부에 정의하며, 속성의 개수에는 특별한 제한은 없다.

<!--속성을 추가하는 방법-->
<태그명 속성값=”속성값” 속성명=”속성값”>콘텐츠</태그명>

id : 요소에 고유한 이름을 부여하는 식별자 역할의 속성

class : 요소를 그룹별로 묶을 수 있는 식별자 역할의 속성. 모든 태그에 추가 될 수 있고, 여러 개의 태그가 동일한 클래스의 식별자를 가질 수 있다.

title : 요소의 추가 정보를 제공하는 텍스트 속성으로, 사용자에게 툴팁을 제공한다.(해당 요소에 대한 텍스트 부가 설명)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>영역을 구분해보자 </title>
</head>

<body>
  <h1>일단 문서를 만들자</h1>

  <hr>

  <div id="study">
    <h2 class="title"><span>공부</span> 다짐하기</h2>
    <img src="images/테스트용.jpg" 
    width="300" title="펭귄의 다짐!"      ------->이미지에 title 펭귄의 다짐!
    alt="벚꽃" />
    <p>펭귄군은 공부를 열심히 하기로 했다!</p>
  </div>

  <hr>

  <div id="workout">
    <h2 class="title"><span>운동</span> 열심히 하기</h2>
    <p>건강을 위해 운동을 열심히 하자!</p>
  </div>

</body>

</html>