능글맞은 구렁이

HTML-텍스트 표현 본문

Mark Up/HTML

HTML-텍스트 표현

보라색츄르 2021. 5. 13. 10:01

● HTML 문서의 기본 구조

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

</body>
</html>

-<!DOCTYPE html> :문서 유형 
-<html> :html 시작

-<head></head> :헤드부분  보통 <title>, <link>, <styte>, <script>, <meta charset="UTF-8">등을 선언한다.                         

                        <title>: 웹브라우저 상단의 제목을 보여주는 부분

                        <link> : css파일로 이루어진 문서를 적용하기 위한 태그

                        <styte> :css를 파일을 적용하지않고 html파일에서 바로 적용하고 싶을때 사용하는 태크

                        <script> : javaScript를 적용할때 사용하는 태크

                        <meta charset="UTF-8">: 문자 인코딩 선언

-<body></body> : 웹브라우저 화면에 실제로 출력해서 보여 주려는 모든 정보/내용을 넣는 부분이다.
-</html> : html 끝

● HTML 주석

1. <!-- 주석내용 --> :  소스보기를 하면 보이는 소스

2. <%--주석내용--%>: 소스보기를 해도 보이지 않는 주석

● 텍스트 표현

  태그종류 설명
1 <br> or <br /> java의 println, \n 또는 키보드의 엔터키와 같은 줄바꿈의 효과
2 <p></p> 단락을 나누는 태그
3 <hr/> 수평선을 그리는 태그
4 <h1></h1>~~<h6></h6> 제목을 지정하는 태그 숫자가 적을수록 크기가 크다
5 <pre></pre> 텍스트를 자유롭게 표시하는 태그 , pre태그 내에서 사용된 태그는 
그대로 적용이 되며, 특수기호도 사용이 가능하고, 다른 글자체와 크기가 다르다

 

See the Pen HTML-텍스트표현 by jangboraa (@jangboraa) on CodePen.

 

 

 

●글자 스타일 지정

단순히 웹브라우저에 어떻게 표시될 것인가를 나타내는 출력 모양만을 지정하는 태그이다.

단순히 웹브라우저에 어떻게 표시될 것인가를 나타내는 물리적 스타일과

태그 자체에 의미가 부여되어 있는 논리적 스타일의 태그들이 존재한다.

번호
 태그 설명
1 물리적 <b></b> 글자가 진하게 강조가 된다.
2 물리적 <i></i> 글자가 기울어진 형태로 표시된다.
3 물리적 <s></s> 글자 가운데를 통과하는 수평성이 표시가된다.
4 물리적 <u></u> 글자에 밑줄이 표시된다.
5 물리적 <sup></sup> 글자가 위첨자로 표시된다.
6 물리적 <sub></sub> 글자가 아래첨자로 표시된다.
7 물리적 <small></small> 글자가 기본 크기보다 작은 크기로 표시된다.
8 논리적 <cite></cite> 인명 인용대신에 작품의 제목을 표시(기울어진형태)
9 논리적 <code></code> 컴퓨터 코드를 표시
10 논리적 <samp></samp> 프로그램의 샘플 출력을 표시
11 논리적 <var></var> 변수를 표시(기울어진형태)
12 논리적 <dfn></dfn> 용어에 대한 정의를 표시 (기울어진형태)
13 논리적 <em></em> 강조하는 내용을 표시 (기울어진형태)
14 논리적 <strong></strong> 중요한 내용을 표시(진하게 표시)
15 논리적 <abbr></abbr> 축약형을 표시
16 논리적 <address></address> 실제 우편물 주소를 표시 (기울어진형태, 자동으로 줄바꿈)
17 논리적 <kbd></kbd> 키보드로 입력한 내용임을 표시
18 논리적 <q></q> 짧은 인용구를 표시(큰따옴표가 붙는 형태로 표시)

 

See the Pen HTML-글자스타일지정 by jangboraa (@jangboraa) on CodePen.

 

 

 

● 목록지정

목록을 이용하여 문서를 작업할때 사용

  목록의종류 설명
1 순서가 없는 목록 - 글머리 기호를 붙여 목록을 만드는 형식
- 기본기호 :  · 
- 형식 : <ul></ul>
- 자식요소 : li
2 순서가 있는 목록 - 순서를 매겨서 목록을 만드는 형식
- 기본기호 : 1,2,3...
- 형식 : <ol></ol>
- 자식요소 : li
3 서술 목록 - 어떤 용어나 이름에 대해서 서술하는 형식
-형식 : <dl></dl>
-자식요소 : dt, dd

 

See the Pen HTML-목록지정 by jangboraa (@jangboraa) on CodePen.

 

 

 

● 콘텐츠 그룹핑

1. div : 블록 수준의 요소로서, HTML 요소들을 묶어 하나의 논리적인 단위의 영역을 구성하는 컨테이너이다. 웹브라우저는 기본적으로 div 요소 앞뒤에 항상 줄바꿈을 수행하는데 , 이것은 논리적으로 구분된 대량의 내용에 대해서 css 스타일을 설정하거나 전체 페이지의공간을 분할하여 레이아웃을 작성하는데 널리 사용한다.

(특별한 기능이 없어 컨텍트의 영역을 설정할 때 주로 사용하는 태그/특히 포털사이트에서 검색값을 처리할때/css적용할때)

2. span : 인라인 요소로서, 텍스트를 위한 컨테이너로 사용된다. 이 텍스트의 일부에 대해서 css스타일을 적용하거나 자바스크립트에서 조작할 때 유용하게 사용된다.

(주로 단어와 단어 사이의 띄어쓰기를 할때 사용 /즉 &nbsp; 를 여러번 사용해야 배치할때도 사용)

인라인 요소 블록 요소
텍스트 요소로서 기존 내용에 이어서 작성됨 문서 구조 요소로서 새로운 행에 작성됨
입력하는 내용만큼의공간을 차지해서 내용이 표시됨 하나의 줄을 전부 차지해서 내용이 표시됨
줄바꿈이 수행되지 않아 앞뒤 내용이 이어져서 한 줄에 쭉 나열됨 자동으로 줄바굼이 수행됨
<span>, <img>, <strong>등 <div>, <p>, <h1>등

                                                         

 

See the Pen HTML-콘텐츠 그룹핑 by jangboraa (@jangboraa) on CodePen.

 

 

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

웹브라우저 자동완성기능 제어  (0) 2023.01.09
HTML-시멘틱속성  (0) 2021.05.24
HTML에서 입력양식  (0) 2021.05.24
HTML에서 테이블 표현  (0) 2021.05.16
HTML에서 그림, 멀티미디어와 링크 표현  (0) 2021.05.14
'Mark Up/HTML' Related Articles more
Comments