<!doctype html>
<html>
	<head>
		<meta charset = "utf-8"> 
		<title>test2</title>
		
		<style>
		 p{
			color : red;
			border : 2px solid #C8C8FF; /* color 16진수 줄때 #을 앞에 붙인다*/
			font-size : 20px;
			margin : 50px;
			padding : 50px 100px;
		 }
		 .pp1{
			color : blue;
		 }
		 #pp2{
			color : green;
		 }
		 
		 pre{
			background-color : skyblue;
			font-sizw : 20px;
			border : 3px solid blue;
			margin : 50px 100px; /* margin :테두리의 바깥쪽 여백 (위아래 50, 좌우 100) */
			padding : 20px; /* padding :테두리의 안쪽 여백 */
		 }
		 
		</style>
	</head>
	
	<body>
		<p class="pp1">무궁화 꽃이 피었습니다</p>
		<p id="pp2">무궁화 꽃이 피었습니다</p>
		<p>무궁화 꽃이                           피었습니다</p>
		<p>무궁화 꽃이 피었습니다</p>
		<p>무궁화 꽃이 피었습니다</p>
		<p>무궁화 꽃이 피었습니다</p>
		<p>무궁화 꽃이 피었습니다</p>
		
	<pre> <!-- 서식 그대로 출력 -->
		진달래꽃
		
		나 보기가 역겨워
		가실 때에는
		말없이 고이                       보내 드리우리다

		영변에 약산
		진달래꽃
		아름 따다 가실 길에 뿌리우리다

		가시는 걸음걸음
		놓인 그 꽃을
		사뿐히 즈려밟고 가시옵소서

		나 보기가 역겨워
		가실 때에는
		죽어도 아니 눈물 흘리우리다
	</pre>
	
	무궁화 꽃이 피었습니다
		
	</body>
	
</html>
<주석정리>
◾ <meta charset = "utf-8">  이클립스에서 가져가서 실행할때 한글 안깨지게 함
◾ border : 2px solid #C8C8FF; /* color 16진수 줄때 #을 앞에 붙인다*/
◾ margin : 50px 100px; /* margin :테두리의 바깥쪽 여백 (위아래 50, 좌우 100) */
◾ padding : 20px; /* padding :테두리의 안쪽 여백 */
◾ <pre> <!-- 서식 그대로 출력 -->

❗ 실행

저작자표시 비영리 변경금지 (새창열림)

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[HTML/notepad++] 리스트-1219  (0) 2022.12.19
[HTML/notepad++] 웹기초-1219  (0) 2022.12.19
[HTML/notepad++] 텍스트테그-1219  (0) 2022.12.19
[HTML/notepad++ ] test3-1219  (0) 2022.12.19
[HTML/notepad++] test1 -1216  (0) 2022.12.16 
<!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(#)는 다른 이름을 줄 때 사용

❗  실행

 

저작자표시 비영리 변경금지 (새창열림)

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[HTML/notepad++] 리스트-1219  (0) 2022.12.19
[HTML/notepad++] 웹기초-1219  (0) 2022.12.19
[HTML/notepad++] 텍스트테그-1219  (0) 2022.12.19
[HTML/notepad++ ] test3-1219  (0) 2022.12.19
[HTML/notepad++] test2-1216  (0) 2022.12.16

+ Recent posts

티스토리툴바