HTML 주석 및 텍스트 표현

텍스트 표현

HTML 주석

문서 소스의 이해를 돕기 위한 설명을 추가할 때 사용하는 것이 주석이다
모든 프로그래밍 언어에는 주석이 존재한다.
브라우저에 의해 출력되지 않으므로 소스에서만 확인이 가능하다
HTML의 주석
''는 하나의 문자처럼 사용한다.
-> 각 문자 사이에 공백이 불가하다.
-> 주석 안에는 <,>,--를 사용하지 말아야 한다.
CSS,자바스크립트의 주석 형식은 /* 소스설명 */

<!-- HTML의 주석, 소스 설명 -->
/* CSS 및 JS의 주석, 소스 설명 */

<br> 태그

줄을 바꾸는 <br>태그
편집기에서 엔터키와 같은 기능을 한다
종료태그 </br> 없이 사용한다.
-> <br/> = <br></br>

<body>
이름 : 민규
나이 : 비밀

키 : 180cm
몸무게 : 비밀
장래희망 : 대통령
</body>

<!--
위 body의 출력내용은 한줄로 출력됨.
> 이름 : 민규 나이 : 비밀 키 : 180cm 몸무게 : 비밀 장래희망 : 대통령
> 원하는 공백을 채워주기 위해 <br>태그를 아래처럼 사용해야함
-->

<body>
이름 : 민규<br/>
나이 : 비밀
<br/><br/>
키 : 180cm<br/>
몸무게 : 비밀<br/>
장래희망 : 대통령<br/>
</body>

<p> 태그

문단을 나누어 독립된 단락을 생성한다.
다른 내용과의 구분을 위해 단락 전후에서 자동으로 줄바꿈을 수행한다.

<body>
독립된 단락을 생성하기 위해
<p>p태그를 사용한다.</p>
<p><p><p>
p태그 중첩사용하더라도
하나만 적용된다.
</p></p></p>
</body>

<!--
<p> </p> 형식으로 사용
중첩사용해도 1개만 적용된다.
output :
독립된 단락을 생성하기 위해
(자동 <br>)
p 태그를 사용한다.
(자동 <br>)
p태그 중첩사용하더라도 하나만 적용된다
(자동 <br>)
-->

공백 및 특수문자 입력

두 칸 이상 연속된 공백, 예약어로 사용되는 문자들
키보드로 직접 입력할 수 없는 문자를 입력하는 경우
-> 연속된 여려개의 공백
-> <,>,",&
-> ∏,♬,♥등
사용방법
-> & 특수이름 ;
-> &# 10진수코드 ;
-> &#x 16진수코드 ;
줄바꿈태그 <br>
문단 구문 태그 <p>
공백 문자  
☞ 환율 "$1=￥103"
<body>
줄바꿈 태그 <br> <br/>
  문단 구분 태그 <p> <br/>
   공백 문자 &nbsp; <br/>
    ☞ 환율 "$1=¥103"
</body>

<hr> 태그

수평선을 그리는 hr 태그
텍스트 사이에 수평선을 그리는 것
-> 단락의 주제를 구분하는 의미로 사용한다.
-> 자동 줄바꿈, 종료태그 없이 사용한다 (br태그와 비슷함)

<body>
hr 태그는 수평선 그림.
<hr/>
단락 단위로 주제를 바꿀때 주로 사용
<hr/>
</body>

<h1...h6> 태그

단락의 제목을 지정하는 <h(n)>태그
크기는 <h1> > <h2> > .. > <h6>
굵은 글자 (볼드체), 자동 줄바꿈 지원해준다.

<pre> 태그

텍스트를 자유롭게 표시하는 <pre> 태그는
편집기에서 문자가 입력된 형식을 그대로 유지하여 출력해준다.
pre 태그 안에 정의된 다른 태그들은 적용된다.
라인의 길이가 브라우저 폭보다 길더라도 자동줄바꿈이 안되고 짤린다.
특수 문자가 많은 텍스트를 표시할 때 유용하게 사용한다.

<body>
pre설명
-<b>pre 태그는 .....</b>
-특수문자가 많은 텍...
</body>

<!--
위처럼 사용하면 아웃풋은
한줄로 나온다.
형식 그대로 나오게 하고싶으면
아래와 같이 <pre>태그를 사용한다.
-->

<body>
<pre>
pre설명
-<b>pre 태그는 .....
-특수문자가 많은 텍...
</pre>
</body>

<blockquote> 태그

상하 줄바꿈으로 구분되는 단락의 생성 (<p>태그와 동일) 및 들여쓰기가 된다.
들여쓰기 간격은 인위적인 조적이 불가능 하다.
주로 인용문을 만들 때 사용한다.
-> cite 속성이 사용 가능하다. (인용된 부분의 URL을 지정할 때 사용)

<body>
아자아자!
<blockquote cite = "http://min-nine.tistory.com">
HTML태그를 연습하고 있다.
우리모두 힘내서 공부합시다.
</blockquote>
</body>

<!--
output 예시
아자아자!

    THML태그를 연습하고 있다.
    우리모두 힘내서 공부합시다
-->

글자 스타일 지정

물리적 스타일 관련 태그

단순히 웹브라우저에 표시되는 출력 모양만 지정하는 태그
<b> : 볼드, 글자를 굵게 표시한다
->강조의 의미는 사라지고 주목해야 할 단어를 표시할 때 사용
<i> : 이태릭, 글자를 휘어서 표시한다
-> 다른분위가나 어조,보통의 서술과 구분되어야 하는 텍스트 표시시 사용
<s> : ~~글자 중간에 줄을 친다~~
-> 더이상 정확하지 않거나 관련이 없는 내용을 표시할 때 사용
<u> : 글자 아래에 밑줄을 친다
-> 불충분한 내용을 표시할 때 사용
<sup> : 윗첨자, 몇의 몇승
<sub> : 아래첨자, 몇의 몇승
<small> : 기본 글자보다 조그마하게 표시한다
->부수적 해설이나 이용조건, 법적 고지 등의 작은 인쇄를 표시 할 때 사용

논리적 스타일 관련 태그

출력 형태보다는 태그 자체에 의미가 부여되어 있는 태그
<site> : 인용이 아닌 작품의 제목을나타낼 때
<code> : 컴퓨터프로그램 코드를 나타낸다
<samp> : 코드를 출력할 떄 사용한다.
<var> : 변수를 나타낸다
<dfn> : 어떤 용어에대한 정의
<em> : 어떤걸 강조할 때
<strong> : 중요성을 나타낼 때
<addr> : 축약어
<address> : 주소를 나타낼때, 태그 사용시 자동 줄바꿈 적용
<kbd> : 키보드로 입력한 문자
"<q>" : 짧은 인용구 표시, 출력시 자동으로 양쪽에 더블쿼테이션이 붙는다.

목록 지정

목록의 종류

순서 없는 목록 ( Unordered List , UL)
-> 글머리 기호 ( 를 붙여 목록의 각 항목을 표시
-> <ul> ... </ul>
-> 자식요소로 <li>태그를 사용한다.
순서가 있는 목록 ( Ordered List , OL )
-> 순서(1,2,3,...)를 매겨서 목록의 각 항목을 표시
-> <ol> ... <ol>
-> 자식요소로 <li>태그를 사용한다.
서술 목록 ( Description List , DL)
-> 어떤 용어나 이름에 대해서 서술하는 형식
-> <dl> .... </dl>
-> 자식요소로 <dt>,<dd>를 사용한다.

<ul> 태그

각 항목 앞에 순서를 나타내지 않는 기호를 붙여서 표시한다.
기호변경은 css의 list-style-type 속성을 주어 사용한다.
-> none, disc(●),circle(○),square(■) 등

<ul>
   <li>항목 1</li>
   <li>항목 2</li>
   <li>항목 3</li>
</ul>
<!--
output 예시 :
· 항목 1
· 항목 2
· 항목 3

기호변경 -> CSS list-style-tpye속성
none, disc(●),circle(○),square(■) 등
-->


<ol>
   <li>항목 1</li>
   <li>항목 2</li>
   <li>항목 3</li>
</ol>
<!--
1 항목 1
2 항목 2
3 항목 3
-->

<ol> 태그

<ol> 태그만의 속성
type = '값' -> 순서가 부여된 기호의 유형을 지정한다.
-> type = '1' //1,2,3,4순
-> type ='a' //a,b,c,d순
-> type = 'A' // A,B,C,D 순
start = '숫자' -> 항목의 시작 번호를 지정
-> start = '3' // 3,4,5,6...순
reversed -> 항목 번호를 역순으로 지정한다.
<li> 태그의 속성
-> value = '숫자' ->항목의 번호를 중간에 변경 할 때 사용
-> 변경 이후 모든 값에 적용이 된다.

<dl> 태그

용어 / 이름을 나열하고 이에 대한 설명을 제공하는 목록
<dt> 태그 : 용어/이름을 나열하기 위한 것. 자동 줄바꿈 제공
<dd> 태그 : 나열된 용어/이름의 설명을 표시, 자동 줄바꿈 및 들여쓰기 기능 지원

콘텐츠 그룹핑

인라인 요소

텍스트 요소 : 기존 내용에 이어서 작성된다
입력 내용만큼의 공간을 차지해서 내용을 표시한다
줄바꿈이 수행되지 않아 앞뒤 내용이 이어져서 한 줄에 표시된다.
<span> 콘텐츠 컨테이너로서 사용한다
- 텍스트를 위한 컨테이너로 사용
- 텍스트의 일부분에 대해 CSS 스타일 지정 또는
자바스크립트에서 조작 할 때 유용하게 사용된다.
<img>
<strong>

블록 요소

문서 구조 요소 : 새로운 행에 작성된다
하나의 줄을 전부 차지해서 내용을 표시한다.
자동으로 줄바꿈을 수행한다.
<div> 콘텐츠 컨테이너로서 사용한다
- HTML 요소를 묶어 하나의 논리적인 단위의 영역을 구성한다.
- 논리적으로 구분된 대량의 내용에 대해 CSS스타일 지정 또는
전체 페이지의 공간을 분할하여 레이아웃을 구성할 때 사용된다.
<p>
<h1>

<head>
	<style>
    .color1 {background-color : green}
    .color2 {background-color : yellow}
    </style>
    
    <body>
    	<div class="color1"> div태그의 특징 1 : 한 줄 공간을 제공 </div>
        <div class="color2"> div태그의 특징 2 : 앞뒤로 자동으로 줄바꿈이 수행된다</div>
        
        <hr/> <!-- 줄사입 -->
        
        span 태그는 <span class = "color1"> 입력하는 내용만큼의 공간을 제공하며, </span>
        <span class="color2"> 줄바꿈이 없어서 앞뒤내용이 이어져서 나타난다 </span>
    </body>
    
</head>

'Mark Up > HTML' 카테고리의 다른 글

HTML에서 멀티미디어 표현 / HTML Video,Audio Tag (0)	2020.04.13
HTML에서 테이블 태그 사용 - html table tag (0)	2020.04.13
HTML img , a Tag (0)	2020.03.19
HTML에서 이미지 관련 img 태그 및 링크 표현 (0)	2020.03.18
HTML 이란? (0)	2020.03.11

공백 및 특수문자 입력

<pre> 태그

'Mark Up > HTML' 카테고리의 다른 글

티스토리툴바