Programming Language/HTML | CSS | JS

HTML 7์ผ์ฐจ ๊ณต๋ถ€

chaerlo127 2022. 1. 18. 21:27
728x90
728x90

 

- HTML Colors CSS <a> tag ์˜์‚ฌ ํด๋ž˜์Šค

  • a: link -> ๋งํฌ ์ฒซ ๋ฐฉ๋ฌธ ์‹œ ์ƒํƒœ
  • a: visited - ๋งํฌ ๋ฐฉ๋ฌธ ํ›„ ๋งํฌ ์ƒํƒœ
  • a: hover -> ๋งˆ์šฐ์Šค ํด๋ฆญ ์ „
  • a: active -> ๋งˆ์šฐ์Šค ํด๋ฆญ ํ›„
<!DOCTYPE html>
<html>
<head>
  <style>
    body {background-color: beige;}
    bdo {color: cornflowerblue;}
    /* ๋ฐฉ๋ฌธ ์ „ & ๋ฐฉ๋ฌธ ํ›„ */
    a:link, a:visited
    {
      color: darkcyan;
      background-color: gainsboro;
      border: 2px solid tomato;
      text-decoration: none;
      text-align: center;
    }
    /* ๋งˆ์šฐ์Šค ์˜ฌ๋ ค๋†“์„ ๋•Œ */
    a:hover
    {
      color: slateblue;
      background-color: grey;
      text-decoration: underline;
    }/* ๋งˆ์šฐ์Šค ํด๋ฆญํ–ˆ์„ ๋•Œ*/
    a:active
    {
      color:gold;
      background-color: antiquewhite;
      text-decoration: underline;
    }
  </style>
    
</head>
<body>
  <a href="https://monynony0203.tistory.com/31?category=1044186" target="_blank">click</a>
</body>
</html>

 

 

 

- HTML Bookmarks

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <a href="#H1">open chapter 2</a>
  <br>
  <a href="#H2">open chapter 5</a>
  <h2>Chapter 1</h2>
  <p> this chapter is</p>

  <h2 id="H1">Chapter 2</h2>
  <p> this chapter is</p>

  <h2>Chapter 3</h2>
  <p> this chapter is</p>

  <h2>Chapter 4</h2>
  <p> this chapter is</p>

  <h2 id="H2">Chapter 5</h2>
  <p> this chapter is</p>

  <h2>Chapter 6</h2>
  <p> this chapter is</p>

  <h2>Chapter 7</h2>
  <p> this chapter is</p>
</body>
</html>

 

- HTML Image Height, Width

  • Inline CSS
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz0Jbp%2FbtrqCa3BmJ7%2FANZB9PT5x0uF5cxzQA7o50%2Fimg.jpg"
  style="width: 300px; height: 200px;">

  <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz0Jbp%2FbtrqCa3BmJ7%2FANZB9PT5x0uF5cxzQA7o50%2Fimg.jpg"
  width="300" height="200">
</body>
</html>

 

  • Internal CSS
<!DOCTYPE html>
<html>
<head>
  <style>
    img 
    {
      width: 300px;
      height: 200px;
    }
  </style>
</head>
<body>
  <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz0Jbp%2FbtrqCa3BmJ7%2FANZB9PT5x0uF5cxzQA7o50%2Fimg.jpg"
  alt="you can't watch this picture">
</body>
</html>

 

 

- Image Floating

<!DOCTYPE html>
<html>
<head>
  <style>
    img 
    {
      width: 300px;
      height: 200px;
    }
  </style>
</head>
<body>
  <p>
  <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz0Jbp%2FbtrqCa3BmJ7%2FANZB9PT5x0uF5cxzQA7o50%2Fimg.jpg"
  alt="you can't watch this picture" style="float:left"> ์šธ๋ฉด ์•ˆ๋ผ
  </p>

<br><br><br><br><br><br><br><br><br><br><br><br>
  <p>
    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz0Jbp%2FbtrqCa3BmJ7%2FANZB9PT5x0uF5cxzQA7o50%2Fimg.jpg"
    alt="you can't watch this picture" style="float:right"> ์šธ๋ฉด ์•ˆ๋ผ
    </p>

</body>
</html>

 

728x90
์ €์ž‘์žํ‘œ์‹œ