[Day3] HTML 3 - 이미지, 이미지맵, picture, favicon,table

[Day3] HTML 3 [11/4]

html 이미지

- 웹페이지의 이미지 삽입 - img 태그

- 이미지가 웹 페이지에 링크(연결)

- 종료태그 X

- 2가지 필수 속성

alt == alternatetext

src == uri

- 인라인모드

 <img alt="이탈리안 튤립" src=" http://localhost/webPro/html/images/pic_trulli.jpg">
 <img alt="" src="https://s.pstatic.net/static/newsstand/2022/1103/article_img/new_main/9005/154923_001.jpg">

- 상대 경로 -> 역슬러시 아니고 그냥 슬러시임!

<a href="../images/pic_trulli.jpg"><img src="../images/pic_trulli.jpg" alt="이탈리안 튤립"  width="250"></a>

- 이미지 사이 공백 없애기 위해서는 개행없이 연속해서 적어야함

- 항상 이미지의 너비와 높이를 지정하자

그 이유 ? 너비,높이 지정 X 이미지가 로딩되는 동안 웹 페이지가 깜박일 수 있다.

--> img 인라인모드

- 이미지 크기 : 너비 와 높이 지정 X 500 x 333

 <img src="../images/pic_trulli.jpg" alt="이탈리안 튤립">

- 이미지 크기 : 너비 와 높이 지정 O : 너비 250px 높이도 너비의 비율만큼 설정

 <img src="../images/pic_trulli.jpg" alt="이탈리안 튤립"  width="250">
 <img src="../images/pic_trulli.jpg" alt="이탈리안 튤립"  width="200"  height="100">

- 링크에 이미지 삽입

<a href="../images/pic_trulli.jpg"><img src="../images/pic_trulli.jpg" alt="이탈리안 튤립"  width="250"></a>

css 적용하는 2번째 방법 (인라인)

 <img src="../images/pic_trulli.jpg" alt="이탈리안 튤립"  style="width:250px;">

- 항상 외부 이미지를 사용할 때는 저작권 신경

 <img src="다른서버/웹사이트의 이미지 절대URL" alt="" >

/* css 적용하는 1번째 방법  */
/* selector */
   img{
      width: 100%;
   }
   
   body{
      border:1px solid red; 
   }

* CSS 인라인 방식이 head style 방식보다 우선한다!

애니메이션 이미지 : gif 허용

<img src="../images/programming.gif" alt=""  style="width:58px;height:48px;">

모든 브라우저( Chrome, Edge, Firefox, Safari, Opera 등)에서 지원되는 가장 일반적인 이미지 형식

.apng
.gif
.ico .cur
.jpg .jpeg .pjpeg, pjp .jfif
.png
.svg

html 이미지 맵

1) 맵(map)을 사용하여 이미지에 클릭 가능한 영역을 만들 수 있다.

2) map 태그 - 이미지 맵

area 태그 - 클릭 가능한 영역

3) 모든 이미지를 이미지맵으로 사용할 수 있다( 팁)

4) shape : rect, circle, poly( 다각형), default( 전체지역)

<img alt="workplace" src="../images/workplace.jpg"  usemap="#workmap">

범위 설정

<map name="workmap">
  <area alt="" shape="rect" coords="34,44,270,350"  href="ex03_computer.html">
  <area alt=""  shape="rect" coords="290,172,333,250"  href="ex03_phone.html">
  <!-- <area alt=""   shape="circle" coords="337,300,44"  href="ex03_coffee.html"> -->
  <area alt=""   shape="circle" coords="337,300,44"  href="ex03_coffee.html"  onclick="window.alert('당신은 커피를 클릭했다!!!')">  
</map>

html - picture 태그

1. 여러 개의 source 태그를 설정할 수 있다. - 다양한 장치마다 가장 알맞은 다른 이미지를 선택할 수 있게 하는 태그

2. 반응형 웹을 만들 때 사용 (같은 페이지인데도 반응을 다르게 하는 것)

3. img 태그는 가장 마지막 지정한다.

-> 다양한 장치에 맞게 사용 가능!

<picture>
  <source srcset="../images/img_pink_flowers.jpg"  media="(min-width:650px)">
  <source srcset="../images/img_white_flower.jpg"  media="(min-width:450px)">
  <img src="../images/img_orange_flowers.jpg" alt="">
</picture>

html - Favicon(파비콘)

- 파비콘 ? 브라우저 탭의 페이지 제목 옆에 표시되는 작은 이미지.

- link 태그를 사용해서 파비콘을 추가.

- 파비콘 파일 형식 : .ico .png .gif .jpeg .svg

- link 태그는 문서와 외부 자원(리소스) 간의 관계를 정의하는 태그

* copy selector

<head>
	<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
	<!-- <link rel="shortcut icon" type="image/x-icon" href="https://www.naver.com/favicon.ico?1"> -->
	<!-- http://localhost/favicon.ico?1" -->
</head>

* 파비콘 모든 html 파일에 넣기

- new - html - next - html5 - html templates - html5 - edit - title 밑에다가 행 추가

http://www.ohmynews.com/NWS_Web/View/at_pg.aspx?CNTN_CD=A0002877714&PAGE_CD=N0006&utm_source=naver&utm_medium=newsstand&utm_campaign=news&CMPT_CD=E0033M

->가능하면 비슷한 페이지

사는이야기
 <hr color="black">
 <span style="background-color: red;color:white">연재</span>
 이태원 압사 참사  |  203화
 <h1><a href='#'>이태원 참사에 악플 단 당신, 혹시 이런 마음 때문인가요</a></h1>
 <font color="#666"><b>전문가가 본 트라우마와 비난심리의 상관관계... 지금은 서로 불안을 돌보고 연대할 때</b></font>
 <br><br>
 22.11.04 11:33l최종 업데이트 22.11.04 11:33l송주연(serenity153) <a href="javascript:"><img src="http://ojsimg.ohmynews.com/images/ohmynews/common/btn_arw2.gif" alt=""></a>
 <hr color="gray" size="1">
 <button title="이태원 참사에 악플 단 당신, 혹시 이런 마음 때문인가요 좋아요"><span></span></button>
 <a href="#">+크게</a> | <a href="#">-작게</a> | <a href="#"><img src="http://ojsimg.ohmynews.com/images/ohmynews/common/icon_print.svg" alt=""  
 style="width:17px;height:17px">인쇄</a>
  | <a href="#"><img src="http://ojsimg.ohmynews.com/images/ohmynews/common/icon_scrap.svg" alt=""  
 style="width:17px;height:17px">스크랩</a>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <br>
 <a href="#"><img style="width:22px;height:22px" alt="" src=" http://ojsimg.ohmynews.com/images/ohmynews/common/tts.svg">본문듣기</a>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

* 마우스 올릴때 반응

<head>
<style>
  a{
     text-decoration: none;
     color:black;
     font-size: 18px;
  }
  a:hover{            /* hover 맴돌다 */
     text-decoration: underline overline line-through;
  }
</style>
</head>

* 그림 옆에 글자 채워지게하기

<h3>html - 이미지 플로팅( float : 둥둥 떠다니다.)</h3>

<p>
   <img src="../images/programming.gif" alt=""  style="float:right">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
   Dolor laborum tempora reiciendis ut atque laudantium 
   quam necessitatibus alias molestiae et totam eveniet 
   temporibus aperiam ducimus possimus impedit accusamus
   quis molestias?
</p>

<p>
   <img src="../images/programming.gif" alt=""  style="float:left">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
   Dolor laborum tempora reiciendis ut atque laudantium 
   quam necessitatibus alias molestiae et totam eveniet 
   temporibus aperiam ducimus possimus impedit accusamus
   quis molestias?
</p>

* 젠코딩 (에밋) - 플러그인 방식, 생산성 높음

div#page>div.logo+ul#navigation>li*5>a

* 여백, 가운데 정렬

<head>
<style>
   body{
      border:1px solid red;
   }
   
   p{
      border:1px solid gray;
       /* width 속성을 설정하지 않으면 기본은 부모 너비의 100% */
      width: 400px;      
       /* 높이는 지정하지 않으면 내용물의 따라서 높이가 자동 설정되지만
      지정하면   */
      height: 400px;
      
      /* 안쪽 여백 */
      padding: 5px;
      
      /* 가운데 정렬   왼쪽 여백==오른쪽 여백 */
      margin: 0 auto;
      
      background-image: url('../images/img_girl.jpg');
   }
</style>
</head>

<body>
<h3>배경이미지</h3>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Quaerat dicta iure dolor laudantium deserunt nisi unde 
possimus quam. Officiis adipisci natus fugit odit quam 
cumque aperiam culpa cupiditate laborum eos.
</p>
</body>

html - table, tr, td 태그

1. 데이터( 행, 열) 출력

2. 예) dept 테이블 <br>

deptno    dname   loc
10      ACCOUNTING NEW YORK
20 RESEARCH DALLAS
30   SALES CHICAGO
40   OPERATIONS BOSTON

3. 행 A [t]able [r]ow :

열(컬럼) A [cell] within a table

td 태그 : 텍스트, 이미지, 목록, 링크, 자식 테이블 등 모든 html 요소를 포함할 수 있다.

th 태그 : A [t]able [h]eader cell, bold + 가운데 정렬

5행 3열 테이블 생성

- 테이블 width 설정가능

- td 하나 너비도 지정 가능

-> width 속성 권장 X, style 로 권장!!!

table>tr*5>td*3

<table border="1"  style="width:400px">
	<tr>
	<!-- 컬럼들의 머리글이 되는 셀 -->
		<th>deptno</th>
		<th>dname</th>
		<th>loc</th>
	</tr>
	<tr>
		<td>10</td>
		<td>ACCOUNTING</td>
		<td>NEW YORK</td>
	</tr>
	<tr>
		<td>20</td>
		<td>RESEARCH</td>
		<td>DALLAS</td>
	</tr>
	<tr>
		<td>30</td>
		<td>SALES</td>
		<td>CHICAGO</td>
	</tr>
	<tr>
		<td>40</td>
		<td>OPERATIONS</td>
		<td>BOSTON</td>
	</tr>
</table>

* 테이블에 style 속성 주기

(공통)

  table, th, td {
     border: 1px solid black;
  }

(다르게)

  table{
     /* width:400px; */
     width: 100%;
     font-size: 12px;
  }
  
  td{
     padding: 5px;
  }

* 개발자도구에서 style 확인 가능!

* table font-size를 td가 물려받음

th 아니라 td로 가운데 정렬하는법

  <table>
  	<tr> 
  		<td align="center"><b>deptno</b></td>
  		<td align="center"><b>dname</b></td>
  		<td align="center"><b>loc</b></td>
  	</tr>
  	<tr>
  		<td>10</td>
  		<td>ACCOUNTING</td>
  		<td>NEW YORK</td>
  	</tr>
  	<tr>
  		<td>20</td>
  		<td>RESEARCH</td>
  		<td>DALLAS</td>
  	</tr>
  	<tr>
  		<td>30</td>
  		<td>SALES</td>
  		<td>CHICAGO</td>
  	</tr>
  	<tr>
  		<td>40</td>
  		<td>OPERATIONS</td>
  		<td>BOSTON</td>
  	</tr>
  </table>

nth-child(odd) :

<style>   
  table, th, td {
     border: 1px solid black;
  }  
  table{    
     width: 100%;
     font-size: 12px;
  }  
  td{
     padding: 5px;
  }
</style> 
<style>
   tbody > tr:nth-child(odd){
      /* background-color: #dddddd; */
      background-color: #ddd;
   }
   
   table, th, td{
       border-radius: 5px;
       border-collapse: collapse;                  /* 커렙스 == 붕괴되다, 무너지다. */
   }
</style>

<table> 
    <thead>
	    <tr> 
	  	   <!-- input 태그 : 입력용 태그 -->
	  	    <th width="30"><input type="checkbox"></th>
	  		<th>deptno</th>
	  		<th style="width:150px">dname</th>
	  		<th>loc</th>
	  	</tr>
    </thead>
  	<tbody>
	  	<tr height="30">
	  	   <!--  만약  모든 td   align -->
	  	    <td align="center"><input type="checkbox"></td>
	  		<td valign="top">10</td>
	  		<td align="center">ACCOUNTING</td>
	  		<td style="text-align: center">NEW YORK</td>
	  	</tr>
	  	<tr style="height: 30px">
	  	    <td align="center"><input type="checkbox"></td>
	  		<td style="vertical-align: top;">20</td>
	  		<td>RESEARCH</td>
	  		<td>DALLAS</td>
	  	</tr>
	  	<tr>
	  	    <td align="center"><input type="checkbox"></td>
	  		<td>30</td>
	  		<td>SALES</td>
	  		<td>CHICAGO</td>
	  	</tr>
	  	<tr>
	  	    <!-- Element (center) is obsolete. Its use is discouraged in HTML5 documents. -->
	  	    <td><center><input type="checkbox"></center></td>
	  		<td>40</td>
	  		<td>OPERATIONS</td>
	  		<td>BOSTON</td> 
	  	</tr>
  	</tbody>
  	<tfoot>
  	     <tr>
  	       <td colspan="4"  align="center">
  	           <button>추가</button>
  	           <button>수정</button>
  	           <button>삭제</button>
  	       </td>
  	     </tr>
  	</tfoot>
  </table>

<style>
   table{
      border:1px solid black;
      width:500px;
      height:500px;
   }
   td{
       border:1px solid black;
   }
</style>

<table>
	<tr>
		<td align="center">1</td>
		<td align="right"  valign="top">2</td>
		<td valign="bottom">3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td rowspan="4">9~</td>
		<td>10</td>
	</tr>
	<tr>
		<td>11</td>
		<td>12</td>
		<td>13</td> 
		<td>15</td>
	</tr>
	<tr>
		<td>16</td>
		<td>17</td>
		<td>18</td> 
		<td>20</td>
	</tr>
	<tr>
		<td colspan="3">21 ~23</td> 
		<td>25</td>
	</tr>
</table>

* 21~23 가로로 합침 colspan

* row span

* 귀퉁이 valign

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day6] HTML 6 - div 페이지, 반응형웹, form, canvas,svg, 멀티미디어, youtube (0)	2022.11.10
[Day5] HTML 5 - 홈메뉴, button, div float, media, iframe, head tag, 반응형 웹, 이모티콘, 시맨틱 태그, 규칙, form, select, option, get, post (0)	2022.11.08
[Day4] HTML 4 - ul,li, div, jquery, emmet (0)	2022.11.07
[Day2] HTML 2 - 여러가지 태그 (0)	2022.11.06
[Day1] HTML 1 - 개요, HTML 요소, 속성 (태그) (0)	2022.11.03

[Day3] HTML 3 - 이미지, 이미지맵, picture, favicon,table

[Day3] HTML 3 [11/4]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day3] HTML 3 [11/4]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바