<!doctype html>
<html>
	<head>
		<title>테스트1</title>
		
		<style>
			P{ /* 주석 */
			  font-size : 40px;
			  color : red;
			  background-color : yellow;
			}
			/*h1,h2,h3,h4,h5,h6{
			
			}
			*/
			/* 기본은 위에서 아래순서-> 밑에있는게 최종출력되지만  id가 class보다 우선된다*/
			#hh1{ 
				border : 5px solid green;
			 }
			
			.headline{
				border : 13px double blue; /* border : 테두리, solid:실선 dotted:점선 dashed:점선 double:이중선 */
				/*border-left : none; 
				border-right : none;
				*/
			}
			
			 
		</style>
		
	</head>
	<body>
	 <!-- 블럭(block)요소 : 한줄전체를 차지 하는 요소, 자동으로 줄바꿈
		  p, h1 ~ h6(헤드라인(제목)을 나타내는 태그)
		  인라인(inline)요소 : 내용에 맞춰서 크기가 정해지는 요소
	 -->
	 <!-- br : 강제 줄바꿈 -->
	 
		안녕하세요? <br>
		html 입니다 <br>
		Hello Html <br>
		
		<!-- p : 짧은 단락 자동으로 줄이 바뀐다 . 위아래 여백을 표시한다-->
		
		<p>안녕하세요?</p>
		<p>html 입니다</p>
		<p>Hello Html</p>
		
		<!--"" ='' , ""사이에 공백있으면 안됨 -->
		<!-- class(.)는 같은 이름을 부여할 때, id(#)는 다른 이름을 줄 때 사용-->
		<h1 id="hh1" class="headline" >안녕하세요 html 입니다</h1>
		<h2 id="hh2" class="headline" >>안녕하세요 html 입니다</h2>
		<h3 id="hh3" class="headline" >>안녕하세요 html 입니다</h3>
		<h4 id="hh4"class="headline" >>안녕하세요 html 입니다</h4>
		<h5 id="hh5"class="headline" >>안녕하세요 html 입니다</h5>
		<h6 id="hh6"class="headline" >>안녕하세요 html 입니다</h6>
	</body>
</html>

 

<주석정리>
◾ 기본은 위에서 아래순서-> 밑에있는게 최종출력되지만 id가 class보다 우선된다
◾ 블럭(block)요소 : 한줄전체를 차지 하는 요소, 자동으로 줄바꿈 p, h1 ~ h6(헤드라인(제목)을 나타내는 태그)
◾ 인라인(inline)요소 : 내용에 맞춰서 크기가 정해지는 요소
◾ br : 강제 줄바꿈
◾ p : 짧은 단락 자동으로 줄이 바뀐다 . 위아래 여백을 표시한다
◾ " " =' ' , " "사이에 공백있으면 안됨
◾ class(.)는 같은 이름을 부여할 때, id(#)는 다른 이름을 줄 때 사용


❗  실행

 

+ Recent posts