250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

개린이 개발노트

[HTML] HTML 각종태그, 결과값 까지 확인해보기2 (feat.VS CODE) 본문

웹/CSS,HTML

[HTML] HTML 각종태그, 결과값 까지 확인해보기2 (feat.VS CODE)

개린이9999 2022. 12. 18. 19:58
728x90

이미지 넣는 태그 사용해서 이미지 넣는법↓

<img src="이미지 경로" width="이미지 넓이"  height="이미지 높이">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <img src="imageFu/pepe.jpg" alt=""이미지가 없습니다" width="200" height="200">

  <!-- 이미지 경로가 잘못 됐을때 -->
  <img src="imageFu/pee.jpg" alt=""이미지가 없습니다" width="200" height="200">

  <!-- 비율에 따라서 조절도 가능 -->
  <img src="imageFu/gifpepe.gif" width="30%" height="20%">
  
</body>
</html>

 

 임시이미지 사용하는 법

<body>

  <h2>임시 이미지 주소</h2>
  <img src="https://via.placeholder.com/200">
  
</body>

 

임시 이미지에 텍스트 첨부하는법 

 ex) aaa라는 글씨를 임시 이미지 안에 넣으려면 -> ?text=aaa ↓ 

<body>

  <img src="https://via.placeholder.com/200x100?text=aaa">
  
</body>

임시 이미지에 색깔 넣는 법

<body>
  
  <img src="https://via.placeholder.com/200x100?text=aaa"><br>
  <img src="https://via.placeholder.com/200x100/000000">
  
</body>

 

-임시 이미지에 색상 + 글꼴색 넣는 법

<img src="https://via.placeholder.com/200x100/000000/ffffff?text=image">

텍스트에 링크 첨부하는 법

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>검색 사이트</title>
</head>
<body>
  <h1>다양한 검색 사이트들</h1>


  <p><strong>인기 검색 사이트 <mark>TOP 3</mark></strong></p>

  <h2>Google</h2>
  <p>주소 : <a href="http://www.google.com">google.com</a></p>

  <h2>Naver</h2>
  <p>주소 : naver.com</p>

  <h2>Daum</h2>
  <p>주소 : daum.com</p>


</body>
</html>

 

target="_blank" <-- 새로운 탭(창)에서 링크를 열고 싶을때 사용
 <h2>Naver</h2>
  <p>주소 : <a href="http://www.naver.com" target="_blank">naver.com</a></p>

 

 

원하는 위치에 있는 <p>태그로 이동하는 방법 

<body>
  <h1>다양한 검색 사이트들</h1>
  <p id="up">시작 부분</p>

  <!-- id를 지칭하는건 # -->
  <p>아래로 <a href="#down"> 이동</a></p>

  <h2>Google</h2>
  <p>주소 : <a href="http://www.google.com">google.com</a></p>

  <h2>Naver</h2>
  <p>주소 : <a href="http://www.naver.com" target="_blank">naver.com</a></p>

  <h2>Daum</h2>
  <p>주소 : daum.com</p>

  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>
  <p>testasdasdasd</p>

  <!--해당 <p> 태그에 id를 down으로 지정-->
  <p id="down">마지막 부분</p>
  
  <p>위로 <a href="#up"> 이동</a></p>

</body>

 

이미지에 링크 넣는 법

  <h2>Daum</h2>
  <a href="http://www.daum.net" target="_blank">
  <img src="imageFu/daum.png" width="30%">
  </a>
  <p>주소 : daum.com</p>

 

목록 작성 태그

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--순서를 매길 경우-->
 <ol>
  <li>google</li>
  <li>Naver</li>
  <li>Daum</li>
 </ol>

 <!-- 순서 없이 도형 -->
 <ul>
  <li>google</li>
  <li>Naver</li>
  <li>Daum</li>
 </ul>

</body>
</html>

번호 타입을 바꾸고 싶을때는 type을 넣어준다. (html에서 설정 권장 안함, css에서 처리 권장)

 

피규어 태그

<figure> : 이미지와 텍스트를 같이보여줌

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <figure>
    <img src="imageFu/gifpepe.gif" width="20%">
    <figcaption>
      설명~~~~~~
    </figcaption>
  </figure>
</body>
</html>

ex) 이미지에 대한 부연설명을 할때

 

 

이미지에 좌표 설정하는 법

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="imageFu/list.jpg" usemap="#list">

  <map name="list">
    <area target="_blank" alt="다음" title="daum" href="http://www.daum.net" coords="104,115,38,49" shape="rect">
  </map>
</body>
</html>

 

 사운드 넣는 법

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <audio src="sound/프리스타일-Y.mp3" autoplay controls loop muted>
    브라우저 지원 못함
  </audio>
</body>
</html>

  <audio autoplay controls>
    <source src="sound/프리스타일-Y.mp3" type="audio/mp3">
    <source src="sound/프리스타일-Y.wav" type="audio/wav">
    지원안됨
  </audio>

보통은 위 처럼 코드 작성해서 사용

 

 

동영상 넣는 법

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <video autoplay controls width="50%">
    <source src="video/nike.mp4" type="video/mp4">
  </video>
</body>
</html>

iframe 태그

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>iframe</p>
  <iframe src="asd.html" width="70%">

  </iframe>
</body>
</html>

 

유튜브 링크 이용해서 동영상 넣는 법

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>iframe 유튜브 링크 퍼오기</p>
  <iframe width="1242" height="699" src="https://www.youtube.com/embed/3zWGbiYjm3c"
  title="미래에서 온 재벌집 막내아들이  S그룹을 후루룩짭짭 하는 방법"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

  </iframe>
</body>
</html>

 

표 만들기

<table>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table border="1">
    <tr>
      <th>이름</th>
      <th>국어</th>
      <th>영어</th>
      <th>수학</th>
    </tr>
    <tr>
      <td colspan="4">ddddd</td>
    </tr>
    <tr>
      <td colspan="2">dd</td>
      <td colspan="2">dd</td>
    </tr>
    <tr>
      <td rowspan="2">행합</td>
      <td colspan="3">dd</td>
    </tr>
    <tr>
      <!-- <td>홍길동</td> -->
      <td>100</td>
      <td>90</td>
      <td>70</td>
    </tr>
    <tr>
      <td>AAA</td>
      <td>80</td>
      <td>90</td>
      <td>70</td>
    </tr>
  </table>
</body>
</html>

 

728x90

'웹 > CSS,HTML' 카테고리의 다른 글

HTML <option> 태그  (0) 2023.08.01
css 활용한 반응형 웹  (0) 2022.12.25
프리웨어 코딩 프로그램 설치  (0) 2022.12.25
코딩시간을 절반으로 줄여주는 VSCode 9개 기능  (2) 2022.12.22
[HTML] HTML 각종태그, 결과값 까지 확인해보기(feat.VS CODE)  (0) 2022.12.18
'웹/CSS,HTML' Related Articles more