Daily coding

HTML : Basic 1 - 구조 및 기본 태그들 본문

Front-end/Client

HTML : Basic 1 - 구조 및 기본 태그들

sunnnkim 2020. 1. 2. 16:38

Hyper Text Markup Language

  
- 띄워주는 문자열 표시 언어

- 각각의 Tag들로 구성되어있다 

HTML -> Standard tag
XML  -> User Tag, setup용, datas 배포용 -> Json : key/value로 관리 

< 주석문 >
<!-- html 주석문 --> : 범위 주석문, 단축키 : ctrl + shift + /

<%-- jsp 주석문  --%> 


<태그명> </태그명>

 

 

< 기본 구조 >

<!DOCTYPE html> <!-- 도큐먼트 타입 -->
<html>
	<head>
		<meta charset="UTF-8">
		<title>제목</title>
		<!-- 이부분에 들어갈 것들
		Jsvasript(함수선언) / 
		CSS(디자인) 설정
		Link집어 넣기 
		정적 처리부분 추가
		 -->
	</head>
	<body>
		<!-- 여기다가 태그 사용하기 -->
		 
	</body>
</html>

 

 

<h1> : 헤더, 글자크기에 따라 1~6까지 나뉜다 (1이 가장 큼)

<p> : 문자열을 단락으로 만들기 

<pre> : 현재 보이는 그대로(띄어쓰기 및 개행 등) 화면에 출력

<br> : 개행

<!DOCTYPE html><!-- 도큐먼트 타입 -->
<html>
	<head>
    <meta charset="UTF-8">
    <title>제목</title>
	</head>
	<body>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
		Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br>
		when an unknown printer took a galley of type and scrambled it to make a type
		specimen book. It has survived not only five centuries,<br> 
		but also the leap 
		into electronic typesetting, remaining essentially unchanged. It was <br> 
		popularised in the 1960s with the release of Letraset sheets<br> 
		containing Lorem Ipsum passages,<br> and more recently with desktop publishing software like Aldus 
		PageMaker including versions of Lorem Ipsum.	
		
		<!-- 
			<태그명 속성(attribute)값설정가능> 태그 효과 문자열</문자열>
		 -->
		
		 <!-- <br> : 띄어쓰기, 뒤에 닫는태그 없음 ,- --> 
		 <br>
		 <!--  <Heading> : 제목 태그 -->
		 <h1>hello Html</h1>
		 <h2>hello Html</h2>
		 <h3>hello Html</h3>
		 <h4>hello Html</h4>
		 <h5>hello Html</h5>
		 <h6>hello Html</h6>
		 
         
         
		 <!-- Paragraph : 단락으로 짜르기 --> 
		 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		 <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
		 
         
         
		 <!-- pre formatted : 보고 있는대로 나오는 태그 -->
		 <pre>
		 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
		 Lorem Ipsum has been the industry's standard dummy 
		 text ever since the 1500s, 
		 when an unknown printer took a galley 
		 </pre>
		 
         
         
	</body>
</html>

 

'Front-end > Client' 카테고리의 다른 글

HTML : Basic 1 - img  (0) 2020.01.02
HTML : Basic 1 - Anchor  (0) 2020.01.02
HTML : Basic 1 - font / div  (0) 2020.01.02
HTML : Basic 1 - Tag안에 사용할 수 있는 Tag  (0) 2020.01.02
HTML : Basic 1 - Attribute와 Property  (0) 2020.01.02
'Front-end/Client' Related Articles more