웹기초 2강 - HTML

이미지

  • <img> 태그 사용
    <img> 태그는 이미지를 웹페이지에 삽입할 때 사용한다.
    <img src="../images/ccc.jpg" alt="카푸치노3">
    src 속성 : 이미지 파일 이름을 지정한다.
    alt 속성 : 브라우저가 어떤 이유로 이미지를 화면에 표시하지 못했을 경우에, 표시되는 대체 텍스트를 지정한다.
    title 속성 : 그림에 마우스를 올리면 뜨는 텍스트

하이퍼링크

  • <a> 태그 사용
    <a> 링크는 다른 페이지로 링크를 생성할 때 사용한다.

    <a href="http://www.naver.com" target="_blank">네이버</a>

  • target 속성 : 각 링크가 클릭되었을 때, 새로운 페이지가 어디에 열리는 지를 지정한다.
    _blank : 새로운 윈도우에서 새로운 페이지를 연다.
    _self : 현재 윈도우에 새로운 페이지를 적재한다.
    _parent : 부모프레임에 새로운 페이지를 적재한다.
    _top : 현재 윈도우에서 새로운 페이지를 적재하고 모든 프레임을 취소한다.

test4

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"> 
    <title>제목설정</title>
	
	<link rel = "stylesheet" href="../css/mystyle.css">
	<style>
	  h1,h2,h3,h4,h5,h6{
		background : green;
	  }
	  img{
		 width : 200px;
		 height : 200px;
	  }
	</style>
  </head>
  
  <body><!--제목도 자동으로 줄 바뀜-->
	<pre>
	 &lt;h1> ~ &lt;h6>
		제목을 설정, block요소, 자동으로 줄 바꿈
		
	  &lt;img>:
		정해진 크기만큼 차지, inline 요소
		자동으로 줄이 바뀌지 않는다
	</pre>
	
    <h1>환영합니다 HTML 세계로 오심을 ~~</h1>
	<h2>환영합니다 HTML 세계로 오심을 ~~</h2>
	<h3>환영합니다 HTML 세계로 오심을 ~~</h3>
	<h4>환영합니다 HTML 세계로 오심을 ~~</h4>
	<h5>환영합니다 HTML 세계로 오심을 ~~</h5>
	<h6>환영합니다 HTML 세계로 오심을 ~~</h6>
	
	<img src="../images/what-is-quokka.jpg" alt="what-is-quokka.jpg" title="졸귀탱쿼카"> <!--alt : 그림 안나올때 나오는 대체문자-->
	<img src="../images/아메리카노.jpg" title="아메리카노"><!--title : 그림에 마우스를 올렸을 때 나오는 문자-->
  </body>
  
</html>

test5

<!doctype html>

<html>

 <head>
   <meta meta charset="UTF-8">
   <title>Web programming</title>
   <style>
     body *{
		/* margin : 50px; */
	    /* margin-top
		   margin-left
		   margin-right
		   margin-bottom
		*/
		}
     h1, h2, p{
		width : 70%;
		background : orange;
		text-align : center;
		margin : 20px auto; /*위아래 좌우*/
		/*margin : 20px auto 40px 위 좌우 아래 순서*/
	 }
   img{
	 margin-left : 35%;
	 width : 300px;
	 height : 200px;
   }
   span{
	 color : red;
	 font-style : italic;
	 font-size : 1.5em;
	 background : pink;
   }
   </style>
 </head>
 
   <body>
     <h1>Welcome to the Web programming!!!</h1>
	 <img src="../images/아메리카노.jpg" title="아메리카노">
	 <p>언제든지 오셔서 질문이 있으시면 올려주세요! <span>여러분을 환영합니다</span></p>
	 <h2>내용</h2>
	 <p>HTML5, CSS, Javascript, jQuery, SQL, JSP,...</p>
   </body>
 </html>

텍스트서식

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
	<title></title>
	
	<link rel="stylesheet" href="../css/mystyle.css">
	<style>
	p{
		font-size : 1.5em;
	}	
	#sp2{
		font-weight : bold;
	}
	#sp1{
		font-style : italic;
	}
	</style>
	
  </head>
  
  <body>
    <pre> <!--code는 pre와 다르게 줄바꿈 안됨!-->
	&lt;b>&lt;/b> : 굵게
	&lt;strong>&lt;/strong> : 강하게
	font-weight : bold;
	
	&lt;i>&lt;/i> : 기울임꼴
	&lt;em>&lt;/em> : 강조
	font-style : italic;
	
	특수문자 표현
	공백표현 : &ampnbsp;
	< : &amplt;
	> : &ampgt;
	& : &ampamp;
	
	</pre>
    <p>우리집 강아지는 <b>복슬강아지</b></p>
	<p>학교갔다 돌아오며 <strong>멍멍멍</strong></p>
	<p>반갑다고 <span id="sp2">꼬리치며</span> 멍멍멍</p>
	
	<hr color="blue">
	<p>낮에 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;나온 <i>반달은</i> 하얀 반달은</p>
	<p><em>엄마곁에</em> 누워도 <span id="sp1">생각이</span> 나요</p>
	
	<hr color="red">
	<p>햇볕은 <sup>"쨍쨍"</sup> 모래알은 <sub>반짝</sub></p>
	<p>모래알로 <sub>떡해놓고</sub> <sup>조약돌로</sup> 소반지어</p>
	<p>엄마아빠 모셔다가 <mark>맛있게도</mark> 냠냠</p>
  </body>
  
</html>

커피 전문점 웹 페이지
<에스프레소>

<!doctype html>
<html>
	<head>
	  <meta charset="UTF-8">
	  <title>에스프레소</title>
	  <link rel="stylesheet" href="../css/mystyle.css">
	  <style>
	  </style>
	</head>
	
	<body>
	  <br>
	  <br>
	  <img src="../images/에스프레소.jpg" alt="에스프레소1">
	  <img src="../images/아메리카노.jpg" alt="에스프레소2">
	  <img src="../images/카푸치노.jpg" alt="에스프레소3">
	</body>
</html>

<아메리카노>

<!doctype html>
<html>
	<head>
	  <meta charset="UTF-8">
	  <title>아메리카노</title>
	  <link rel="stylesheet" href="../css/mystyle.css">
	  <style>
	  </style>
	</head>
	
	<body>
	  <br>
	  <br>
	  <img src="../images/코알라.jpg" alt="아메리카노1">
	  <img src="../images/펭귄.jpg" alt="아메리카노2">
	  <img src="../images/뱅쇼.jpg" alt="아메리카노3">
	</body>
</html>

<카페라떼>

<!doctype html>
<html>
	<head>
	  <meta charset="UTF-8">
	  <title>카페라떼</title>
	  <link rel="stylesheet" href="../css/mystyle.css">
	  <style>
	  </style>
	</head>
	
	<body>
	  <br>
	  <br>
	  <img src="../images/코알라.jpg" alt="아메리카노1">
	  <img src="../images/펭귄.jpg" alt="아메리카노2">
	  <img src="../images/뱅쇼.jpg" alt="아메리카노3">
	</body>
</html>

<카푸치노>

<!doctype html>
<html>
	<head>
	  <meta charset="UTF-8">
	  <title>카푸치노</title>
	  <link rel="stylesheet" href="../css/mystyle.css">
	  <style>
	  </style>
	</head>
	
	<body>
	  <br>
	  <br>
	  <img src="../images/공유.jpg" alt="카푸치노1">
	  <img src="../images/핫초코.jpg" alt="카푸치노2">
	  <img src="../images/ccc.jpg" alt="카푸치노3">
	</body>
</html>

<웹커피>

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
	<title>Web coffee</title>
	<link rel="stylesheet" href="../css/mystyle.css">
	<style>
		sub{
		 background : yellow;
		 color : red;
		}
		#sp1{
		 background : pink;
		 color : navy;
		}
		#sp2{
		 background : lightblue;
		 color : green;
		}
		h1,h2,p{
			
			width : 500px;
			margin : 30px auto;
			text-align : center;
		}
	
	</style>
  </head>
  
  <body>
   <h1>Web 커피 메뉴</h1>
   
   <h2><a href="에스프레소.html">에스프레소</a> 5500원</h2>
   <p>곱게 간 원두에 고온 고압의 물을 투과시켜 추출해 데미타스 컵에 담은 커피.</p>
   
   <h2><a href="아메리카노.html">아메리카노</a> 5000원</h2> <!--target 블랭크 안쓰면 기본 셀프-->
   <p>에스프레소에 <sup id="sp1">물을 추가</sup>한 것입니다.</p>
   
   <h2><a href="카페라떼.html">카페라떼</a> 6000원</h2>
   <p>에스프레소에 <sub>우유를 넣은</sub> 커피입니다.</p>
   
   <h2><a href="카푸치노.html">카푸치노</a> 6000원</h2>
   <p>커피 위에 <sup id="sp2">우유거품</sup>을 얹은 커피입니다.</p>
  </body>
</html>

id를 이용한 a링크 태그

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
	<title>Web coffee 이동</title>
	<link rel="stylesheet" href="../css/mystyle.css">
	<style>
		sub{
		 background : yellow;
		 color : red;
		}
		#sp1{
		 background : pink;
		 color : navy;
		}
		#sp2{
		 background : lightblue;
		 color : green;
		}
		h1,h2,p{
			
			width : 500px;
			margin : 30px auto;
			text-align : center;
		}
	
	</style>
  </head>
  
  <body>
   <h1>Web 커피 메뉴</h1>
   
   <h2><a href="#cafe1">에스프레소</a> 5500원</h2>
   <p>곱게 간 원두에 고온 고압의 물을 투과시켜 추출해 데미타스 컵에 담은 커피.</p>
   
   <h2><a href="#cafe2">아메리카노</a> 5000원</h2> <!--target 블랭크 안쓰면 기본 셀프-->
   <p>에스프레소에 <sup id="sp1">물을 추가</sup>한 것입니다.</p>
   
   <h2><a href="#cafe3">카페라떼</a> 6000원</h2>
   <p>에스프레소에 <sub>우유를 넣은</sub> 커피입니다.</p>
   
   <h2><a href="#cafe4">카푸치노</a> 6000원</h2>
   <p>커피 위에 <sup id="sp2">우유거품</sup>을 얹은 커피입니다.</p>
   
   <br>
   
   <div id="cafe1">
      <br>
	  <br>
	  <img src="../images/에스프레소.jpg" alt="에스프레소1">
	  <img src="../images/아메리카노.jpg" alt="에스프레소2">
	  <img src="../images/카푸치노.jpg" alt="에스프레소3">
   </div>
   
   <div id="cafe2">
      <br>
	  <br>
	  <img src="../images/코알라.jpg" alt="아메리카노1">
	  <img src="../images/펭귄.jpg" alt="아메리카노2">
	  <img src="../images/뱅쇼.jpg" alt="아메리카노3">
   </div>
   
   <div id="cafe3">
      <br>
	  <br>
	  <img src="../images/코알라.jpg" alt="아메리카노1">
	  <img src="../images/펭귄.jpg" alt="아메리카노2">
	  <img src="../images/뱅쇼.jpg" alt="아메리카노3">
   </div>
   
   <div id="cafe4">
      <br>
	  <br>
	  <img src="../images/공유.jpg" alt="카푸치노1">
	  <img src="../images/핫초코.jpg" alt="카푸치노2">
	  <img src="../images/ccc.jpg" alt="카푸치노3">
   </div>
  </body>
</html>

<div> 와 <span>

  • HTML 요소는 <div>와 <span>을 이용해 묶을 수 있음
  • <div>는 자체적으로 특별한 의미가 없으며 블록 수준의 요소로서 모든 HTML 요소를 묶는데 사용함
  • <div>는 블록 수준의 요소이기 때문에 하나의 줄을 전부 차지함
    주로 웹 페이지의 레이아웃을 작성하는데 사용한다.
  • <span>은 자체적으로 특별한 의미가 없으며 인라인 요소로서 텍스트를 묶어 스타일을 적용할 때 사용함
  • 인라인 요소는 자신이 필요한 크기만 차지하는 요소임
  • 인라인 요소는 크기를 지정할 수 없다(width, height가 적용되지 않는다 )
  • <div> 는 "divide"의 약자로서 페이지를 논리적인 섹션으로 분리하는데 사용하는 태그
20.12.31-28일차
jdbc는 PreparedStatement를 사용하여 데이터를 대량으로 삽입하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage