괴발개발

[html] html 기본 지식 본문

Study/Web

[html] html 기본 지식

yousim 2022. 5. 16. 15:13

HTML 기본 정보

HTML (Hyper Text Markup Lang) : 하이퍼 텍스트 마크업 언어.

간단히 말하자면 웹페이지에 디자인을 할 수 있는 언어라고 보면 된다. 

 

<!DOCTYPE html>   // 현재 문서가 HTML5 언어로 작성된 웹문서라는 뜻

<html lang="ko">   // 웹문서의 시작과 끝. ko는 한국어를 사용할거라는 뜻. 
 
<head>                // 웹문서를 해석하기 위해 필요한 문서정보를 입력하는 태그 
 
    <meta charset="utf-8">  // 문자 인코딩 방식을 지정
    <title>test입니다</title> // 해당 웹사이트의 제목(title)입력 태그
 
</head>
 
<body>                 // 실제로 웹사이트 화면에 보일 디자인을 작성하는 태그 
 
  <h1> test입니다</h1> 
  <p> 테스트 라구용 </p>
 
</body>
</html>

 

텍스트 관련 태그들 

 

<hn>태그 : 

<h1> ~ <h6> 이다. 제목텍스트로, 일반 텍스트보다 크기가 크게 표시된다. 

n이 작을수록 크게 표시된다. 

 

<p>태그 : 

단락태그. 텍스트를 표시할 때 사용하는 태그이다.

 

<br> 태그 :

줄 바꿈 태그. 특이점은 닫는 태그가 없다는 것이다. 

 

<hr> 태그 : 

수평줄 넣는 태그. 특이점은 닫는 태그가 없다는 것이다.

 

<blockquote>태그 :

인용문을 사용할때 쓰이는 태그이다.

 

<strong>태그 :

텍스트를 굵게 표시하기 위해 쓰이는 태그이다. 

ex) 

<p>이 부분만 <strong>강조</strong>입니다</p>

-> 이 부분만 강조입니다

 

<span> 태그 :

줄바꿈없이 일부 텍스트만 묶어 스타일을 적용할 때 쓰이는 태그이다. 

ex)

<p>이 부분만 <span style="color:blue;">파란색</span>입니다.</p>

-> 이 부분만 파란색입니다.

 

목록을 만드는 태그들

<ul>태그 :

unorder list로, 순서가 필요하지 않은 목록을 만들때 사용하는 태그이다. 

 

<ol>태그 :

order list로, 순서가 필요한 목록을 만들때 사용하는 태그이다. 

여러 속성을 통해 설정이 가능하다. 

type : 순서를 줄때, 순서를 숫자로 할지 영문자로 할지 결정가능. ( type = "a")

start : 순서를 줄때 시작 항목 설정 ( start = "3" )

reversed : 항목을 역순으로 표시

 

<li>태그 :

<ul>, <ol> 태그 안에, 목록을 넣을때 사용하는 태그이다. 

 

<dl>태그 :

description list

설명 목록을 만드는 태그

 

<dt>태그 :

description title

설명의 제목을 만드는 태그 

 

<dd>태그 :

description description

설명의 내용을 입력하는 태그 

 

 

 

 

 

'Study > Web' 카테고리의 다른 글

[web] 웹 진짜 어렵다!!!!  (0) 2022.07.11
[jsp] tomcat 설치 과정  (0) 2022.06.14
'Study/Web' Related Articles more