20240730수업

a태그(다른 문서 또는 링크와 연결) 형식
<a href="링크"</a>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #img1 {height: 121px; width: 211px; margin-top: 20px;}
  </style>
</head>
<body>
  <h2 style="color: #DB0000;"> A tag - link </h2>
  <p> 다른 문서와 연결하는 기능 hyper-text </p>
  <a href="http://www.naver.com">네이버</a><br />
  <a href="http://www.daum.net">다음</a><br />
  <a href="http://www.google.com">구글</a><br />
  <a href="http://www.nate.com">네이트</a><br />
  <a href="https://sports.news.nate.com/view/20240730n17695?mid=s9810">단체전 싹쓸이 양궁, 전관왕을 향해 출발…김우진-임시현 쌍끌이 3관왕 예열 완료[올림픽 NOW]</a><br />
  <a href="https://sports.news.nate.com/paris/photoslide?cid=1067908&section=event">
    <img id="img1" src="images/양궁 김제덕.webp" alt="" /></a>
</html>
결과

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* : link  psudo(가상)
      /* a:link {color: blue;}
      a:visited {color: green;}
      a:hover {color: red;}
      a:active {color: yellow;}*/
      /* active는 누르고 있는동안. */
      a {
        color: blue;
        text-decoration: none;
        display: inline-block;
        width: 100px;
      } /*어나니머스:나머지(visited,link) 다포함*/
      /*display를 통해 넓이를 넓혀서 구글문자 외의 공간까지 확장시켜서 메뉴처럼 만듬*/
      a:hover {
        color: red;
        text-decoration: underline;
        background-color: yellow;
        /*text-decoration: underline;*/
      }
      ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
      }
      li {
        display: inline-block;
        border: 1px solid black;
        border-collapse: collapse;
        width: 100px;
        text-align: center;
        /* margin-right: -6px; */
      }

      /* ,는 ul과 li를 동시에 */
    </style>
  </head>
  <body>
    <ul>
      <li><a href="http://www.naver.com">네이버</a></li>
      <li><a href="http://www.nate.com">네이트</a></li>
      <li><a href="http://www.google.com">구글</a></li>
      <li><a href="http://www.daum.net">다음</a></li>
      <!-- li와 li사이에 엔터로인한 블락키가 지워져야하는데 안지워지면 엔터 지우기-->
    </ul>
  </body>
</html>

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

꿀팁- 단축키:li*4>a : ul안에 li4개있고 그 li안에 각각 a가 있음

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

      a {
        color: white;
        text-decoration: none;
        background-color: #282a35;
        padding:50px;
        display: inline-block;
        vertical-align: text-bottom;
      }
      a:hover {
        color: rgb(255, 255, 255);
        text-decoration: none;
        background-color: black;
      }
      li {
        list-style-type: none;
        display: inline-block;
      }

    </style>
  </head>
  <body>
      <li><a href="https://www.w3schools.com/html/default.asp">HTML</a></li><li><a href="https://www.w3schools.com/css/default.asp">CSS</a></li><li><a href="https://www.w3schools.com/js/default.asp">JAVASCRIPT</a></li><li><a href="https://www.w3schools.com/sql/default.asp">SQL</a></li>
  </body>
</html>

 

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

 
(result창만 켜서 볼것)
문제 :: a 태그 top/bottom 여백이 제대로 들어가지 않는 것은 왜 그런걸까?

답안 :: inline 요소 전체의 특징이다.
원래 inline 요소는 margin top-bottom이 안들어 간다고 한다.
위 이미지에서는 마치 padding top이 적용되지 않는 것 처럼 보이지만 실제론 들어간 거다.(브라우저에 가려진 듯)
해결 ::>>a 태그 스타일에도 li에 한거처럼 inline-block을 부여한다.
 

 
 

'HTML|CSS' 카테고리의 다른 글

[html/css] Input type  (0) 2024.08.02
[html/css] table태그 (표 만들기), reset css(스타일 시트 초기화)  (0) 2024.08.01
[html/css]이미지 태그(삽입),css적용  (0) 2024.08.01
[html/css] list작성  (0) 2024.08.01
[html/css] display mode  (0) 2024.08.01

티스토리툴바