티스토리 뷰

HTML+CSS

스프라이트 / #SplitShire시멘틱구조 / day17 / 25.04.23

one-dy 2025. 4. 25. 14:35

 

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SplitShire</title>
    <!-- css -->
    <link rel="stylesheet" href="./css/layout.css" />
  </head>
  <body>
    <div class="wrapper">
      <header>
        <div class="con">
          <!-- 로고 -->
          <h1>
            <a href="/">
              <img src="./img/Logo.png" alt="로고" />
            </a>
          </h1>
          <!-- 메뉴 -->
          <nav id="gnb">
            <ul>
              <li><a href="#">INDEX</a></li>
              <li><a href="#">NEW STOCK PHOTOS</a></li>
              <li><a href="#">TOP BEST PHOTOS</a></li>
              <li><a href="#">FREE STOCK</a></li>
              <li><a href="#">VIDEOS</a></li>
              <li><a href="#">CATEGORIES</a></li>
              <li><a href="#">MENU</a></li>
            </ul>
          </nav>
          <!-- 아이콘 -->
          <div class="icons">
            <img src="./img/top_ico.jpg" alt="아이콘" />
          </div>
        </div>
      </header>
      <main>
        <!-- 메인비주얼 텍스트 -->
        <section class="mainvisual_txt">
          <h4>SPLITSHIRE</h4>
          <h2>Beautiful &amp; exclusive<br />free stock photos.</h2>
          <p>
            Instant download private collection of free stock photos,
            <b>free stock videos</b>
            <br />
            <b>&amp; high resolution images</b>
            for personal and commercial use.
          </p>
          <a href="#" class="black_btn">BROWSE ALL STOCK PHOTOS</a>
        </section>
        <!-- 썸네일 -->
        <section class="thumbnail_wrap">
          <div>
            <img src="./img/pexels-ann.jpg" alt="썸네일1" />
          </div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </section>
        <!-- 버튼영역 -->
        <a href="#" class="black_btn">BROWSE ALL STOCK PHOTOS</a>
        <!-- 세번째 섹션 -->
        <section class="black_bg">
          <h2>
            Peace of mind about<br />
            copyright and attribution.
          </h2>
        </section>
        <!-- 네번째 섹션 -->
        <section class="white_bg">
          <h3>Where you can use SplitShire photos</h3>
          <nav id="sitemap">
            <ul>
              <li><a href="#">Websites</a></li>
              <li><a href="#">Blogs</a></li>
              <li><a href="#">Apps</a></li>
              <li><a href="#">Placeholder images</a></li>
              <li><a href="#">Part of Template for Sell</a></li>
            </ul>

            <ul>
              <li><a href="#">Websites</a></li>
              <li><a href="#">Blogs</a></li>
              <li><a href="#">Apps</a></li>
              <li><a href="#">Placeholder images</a></li>
              <li><a href="#">Part of Template for Sell</a></li>
            </ul>

            <ul>
              <li><a href="#">Websites</a></li>
              <li><a href="#">Blogs</a></li>
              <li><a href="#">Apps</a></li>
              <li><a href="#">Placeholder images</a></li>
              <li><a href="#">Part of Template for Sell</a></li>
            </ul>

            <ul>
              <li><a href="#">Websites</a></li>
              <li><a href="#">Blogs</a></li>
              <li><a href="#">Apps</a></li>
              <li><a href="#">Placeholder images</a></li>
              <li><a href="#">Part of Template for Sell</a></li>
            </ul>
          </nav>
        </section>
        <!-- 다섯번째 섹션 -->
        <section class="black_bg">
          <h2 class="main_title">Why SplitShire</h2>
          <p>
            In the course of almost ten years of photography, I have accumulated
            many photos, thousands, who were in the hard disk gathering dust, so
            I created SplitShire with the simple aim of giving them for free. It
            started as a side project in 2014 and since then SplitShire stock
            photos have been downloaded millions of times, now you can see them
            around the web, magazines, musical videos.
          </p>
          <p>Daniel Nanescu</p>

          <!-- 버튼 -->
          <a href="#" class="white_btn">DONATE</a>
        </section>
      </main>
      <footer>
        © 2021 SplitShire - Free Stock Photos & Images - Privacy Policy
      </footer>
    </div>
  </body>
</html>

css↓

@charset "utf-8";
@import url('./reset.css');

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 32px;
  color: #222;
}
header {
  width: 100%;
  height: 100px;
  box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.3);
  background-color: #fff;
}
header .con {
  width: 1500px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 로고 */
h1 {
  width: 55px;
  height: 55px;
}
h1 img {
  max-width: 100%;
}
/* 메뉴 */
#gnb {
  width: 750px;
  height: 100%;
}
#gnb > ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#gnb > ul > li > a {
  display: block;
  padding: 10px 0;
}
#gnb > ul > li:hover > a {
  color: cornflowerblue;
  font-weight: 400;
}
/* 컨텐츠 영역 */
main {
  width: 100%;
  height: auto;
}
.mainvisual_txt {
  width: 100%;
  height: auto;
  padding: 80px 0;
  text-align: center;
}
.mainvisual_txt h4 {
  font-size: 12px;
  font-weight: 800;
  /* 자간: 글자 사이 간격 */
  /* word-spacing : 단어와 단어사이 간격 */
  letter-spacing: 5px;
}
.mainvisual_txt h2 {
  font-size: 70px;
  line-height: 76px;
  font-weight: 700;
  margin-bottom: 20px;
}
.mainvisual_txt p {
  font-size: 16px;
  margin-bottom: 40px;
}
.mainvisual_txt b {
  font-weight: 700;
}
.mainvisual_txt a {
  width: 200px;
}
/* 검정버튼 공통속성 */
.black_btn {
  display: block;
  background-color: #222;
  color: #fff;
  padding: 20px 26px;
  margin: 0 auto;
  font-weight: 700;
  border: 1px solid #222;
  border-radius: 40px;
  text-align: center;
}
.black_btn:hover {
  background-color: #fff;
  color: #222;
}
/* 썸네일 */
.thumbnail_wrap {
  width: 1370px;
  height: fit-content;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-bottom: 100px;
}
.thumbnail_wrap > div {
  width: 430px;
  height: 320px;
  background-color: skyblue;
  overflow: hidden;
  border-radius: 20px;
}
.thumbnail_wrap > div > img {
  max-width: 100%;
}
.thumbnail_wrap + a {
  width: 180px;
  font-size: 13px;
  margin-bottom: 100px;
}
/* 세번째 섹션 */
.black_bg {
  width: 100%;
  height: auto;
  padding: 100px 0;
  color: #fff;
  background-color: #222;
  text-align: center;
}
.black_bg > h2 {
  font-size: 55px;
  line-height: 70px;
}
.black_bg > h2::after {
  content: 'line';
  font-size: 0;
  display: block;
  width: 80px;
  height: 3px;
  background-color: skyblue;
  margin: 0 auto;
  margin-top: 50px;
}
.white_bg {
  margin: 100px 0;
}
.white_bg h3 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 50px;
}
#sitemap {
  width: 1000px;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#sitemap ul {
  list-style: square inside;
}
#sitemap ul > li:hover a {
  color: skyblue;
}
/* 다섯번째 섹션 */
.black_bg > .main_title::after {
  content: '';
  display: none;
}
.main_title {
  margin-bottom: 50px;
}
.main_title + p {
  width: 1000px;
  height: fit-content;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: 18px;
}
.black_bg p:last-of-type {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 50px;
}
/* 버튼 */
.white_btn {
  display: block;
  background-color: #fff;
  width: 150px;
  border: 1px solid #fff;
  padding: 12px 0;
  margin: 0 auto;
  border-radius: 50px;
}
.white_btn:hover {
  background-color: #222;
  color: #fff;
}
/* footer */
footer {
  width: 100%;
  height: 100px;
  color: #ccc;
  text-align: center;
  line-height: 100px;
}
 
/* h1크기를 바꿔도 이미지가 그대로다. 이미지의 원래 저장 사이즈가 있기 때문에  */
}
main {
  width: 100%;
  height: auto;
  /* 또는 overflow: hidden;을 준다. */
letter-spacing: 5px; /* 자간 글자 사이 간격*/
/* 단어와 단어 사이의 간격을 지정할 때는 word-spacing: */
max-width: 100%; /* 부모 박스 넓이 커져도 화질 깨질 염려 없다. */
}
/* 양쪽에 패딩을 넣는다던가 넓이값 계산해서  */
/* 버튼은 section에 들어가 있으면 안되고
(display: flex;가 들어가 있는 상태이기 때문에 ) 아래쪽에 하나 더 만들어줘야한다. */

/* 버튼 a태그 감싸고 있을 때 a에도 넓이 줘도 되고 버튼박스 중 한개에만 줘도 되는지??? */
/* color나 text-align은 섹션에 주는 거지만 상속되서 h2에 적용된다. 패딩은 위아래 여백을 주기 위해 준 거다. */
/* border랑 가상요소 after로 만드는 라인은 차이가 있다. border는 h2의 넓이만큼인 100%로 생기고 fit-content를 해도 왼쪽에 정렬되고, 짧은 선의 경우 border로 만들 수가 없다. */
/* 가상요소는 모두 인라인 속성이라 display:block;으로 속성을 바꿔준다. */
 /* 박스를 항상 부모 영역의 중앙으로 보낼 때
  margin: 0 auto; //margin: 0 auto; 위에다가 margin-top을 써주면 안된다. margin-top보다 margin: 0 같은 속성의 스타일이 아래위치하므로 margin-top이 취소되게된다.*/
h3 {
  font-weight: 700;
  width: 100%;
  font-size: 30px;
  text-align: center;
  margin-bottom: 50px; /* margin-top줘도 되고, 패딩 줘도 된다. */
/* 실제로 글자를 가지고 있는 건 a태그이기 때문에 마우스를 올리면 a태그가 ! 변해야 된다고 써줘야된다. li에 호버 효과를 주면 불릿의 색깔만 바뀌게 된다. li는 내용이 없다. */
/* 불릿은 ul, ul에 불릿을 줘도 li한테 상속된다.li한테 직접 줘도 된다. 둘다 줘도 된다. */
/* 위에 가상요소가 부모요소안에 있는 누구를 불러와라 했으면 그냥 h2  class보다 더 우선순위가 높다. 그럼 부모클래스 안의 h2클래스라고 쓰고 아래 스타일에 써야 우선순위가 높아진다. 클래스는 태그명보다 우선순위가 높기 때문에, 자식태그, 부모태그 둘다 클래스를 써주면 우선순위가 높아진다. */
.white_btn {
  display: block;
  /* a태그이기 때문에 속성부터 블록으로 바꿔라 */
.white_btn:hover {
  background-color: #222;
  color: #fff;
  /* a태그 초기화 컬러가 222이므로 그 색깔을 넣어준다. */

 

i love PDF 사이트 만들때 팁

svg -> copy -> copy element 

좌표값을 수정해서 모양 화려하게 만들면서  모션 있어야할 때는 태그 형태로 있어야한다.

img폴더에 새 파일 만들어서 icon_01.svg 이름 짓고

vs code의 표준 편집기~~~ 클릭 코드 쓸 수 있는 곳에 ctrl v로 붙여넣는다.

html파일에 바로 넣으면 너무 지저분해짐

 

그 자체가 이미지가 된다.

더보기

4/24 능력단위평가 '페르소나 만들기' 안내

2번째 능력단위평가 : 페르소나 만들기 가상의 사용자를 만들어내는 작업 

각 서비스를 대표하는 사용자의 페르소나 

출시 전을 기반으로 동종업계 서비스를 이용하고 있는 사용자의 불편한점!

가상인물이기 때문이 디테일하면 디테일할 수록 상세할 수록 실제 존재하는 사람처럼 쓰는 것이 좋다.

가족관계 생활습관 주위 인간관계 등

기획단에서는 페르소나가 있고 없고가 크다. 페르소나가 있으면 사용자들에게 공감을 유도할 수 있다.

 

노트폴리오 참고하기

......뭐뭐가 되어주고 싶습니다.

38세 가정주부 000님

지역 직업 취미 mbti

 

<과제설명>

클론코딩! 클론코딩을 해야 코딩실력이 는다.

웹폰트 연결해라.

글자 실제 사이트에서 긁어 쓰거나 선생님 문구 복사해서 쓰자.

flex로 해서 레이아웃 구현해라.

2차 메뉴 출력 안해도 된다.

 

배우지 않은 스킬있다.

i 러브 PDF

다음주 월요일까지

사이트랑 완전 똑같게 만들기!

 

아예 처음부터 끝까지 클론코딩해서 포트폴리오로 써도 된다.

아니면 첫번째 pdf합치기만 만들고 2줄만 복사.

ilovepdf desktop 에 마우스 올리면 링크 걸려있고 색깔 바뀌는 것도 구현해야한다.

모두 다 svg이미지

맨 아래 왼쪽 한국어 안 넣어도 되고 저작권 표시만 넣으면 된다. 맨 아래 오른쪽 구현 안해도 되고, 욕심 나면 이미지 찾아서 저장해라.

 

    <title>박스만큼 배경이미지 채우기</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        margin: 20px;
      }
      #logo {
        width: 111px;
        height: 68px;
        background: navajowhite url(./img/css_sprites.png) no-repeat;
      }
      #search {
        width: 24px;
        height: 24px;
        background: #c3adff url(./img/css_sprites.png) no-repeat;
        background-position: -111px 0px;
      }
      /* 아이콘 넓이 높이 24 */
    </style>
  </head>
  <body>
    <div id="logo"></div>
    <div id="search"></div>
    <div id="person"></div>
    <div id="lock"></div>
    <div id="menu"></div>
  </body>
</html>

박스만큼 배경이미지 채우기

 

flex가 적용된 박스에 margin 만들기 

flex로 자식박스를 정렬할 때 사이 간격을 주게 되면 어떠한 방법이든 '동일한'간격을 줄 수 밖에 없다.

이 때 자식박스와 자식박스 사이의 특정 부분만 간격을 더 주고자 한다면 margin을 이용할 수 있다.

반응형할 때 많이 사용하는 속성 

[기본형]

부모태그{

    display: flex;

}

자식태그{

    margin-left : auto; → 자식박스의 왼쪽으로 여백을 쭉 밀어냄.

    margin-right : auto; → 자식박스의 오른쪽으로 여백을 쭉 밀어냄.

    margin-top : auto; → 자식박스의 윗쪽으로 여백을 쭉 밀어냄. (주로 column방향일 때)

     maring-bottom : auto; → 자식박스의 아래쪽으로 여백을 쭉 밀어냄. (주로 column방향일 때)

 <title>flex가 적용된 박스에 마진 만들기</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 80%;
        height: 700px;
        margin: 100px auto;
        background-color: lavenderblush;
        /* flex와 하위 정렬속성은 모두 부모박스에 적용 */
        display: flex;
        gap: 40px;
        /* flex-direction: column; */
      }
      .container div {
        width: 100px;
        height: 100px;
        background-color: salmon;
        text-align: center;
        line-height: 100px;
      }
      /* div박스중 막내(ICON)박스의 왼쪽 방향으로 margin을 쭉 끝까지 밀어냄. */
      .container div:last-child {
        margin-left: auto;
        /* margin-top: auto; */
      }
      /* div박스중 두번째(GNB)박스의 오른쪽 방향으로 margin을 쭉 끝까지 밀어냄.
        위의 코드와 결과가 같음.
      */
      .container div:nth-child(2) {
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <!--
      flex가 적용된 박스에 마진 만들기
      ========================================
      flex로 자식 박스를 정렬할 때 사이 간격을 주게 되면 어떠한 방법이든
      '동일한'간격을 줄 수 밖에 없다. 이때 자식박스와 자식박스 사이의 특정 부분만
      간격을 더 주고자 한다면 margin을 이용할 수 있다.

      [기본형]
      부모태그{
        display:flex;
      }
      자식태그{
        margin-left : auto; => 자식박스의 왼쪽으로 여백을 쭉 밀어냄
        margin-right : auto; => 자식박스의 오른쪽으로 여백을 쭉 밀어냄
        margin-top : auto; => 자식박스의 윗쪽으로 여백을 쭉 밀어냄(주로 column방향일 때)
        margin-bottom : auto; => 자식박스의 아래쪽으로 여백을 쭉 밀어냄(주로 column방향일 때)
      }
    -->

    <div class="container">
      <div>logo</div>
      <div>GNB</div>
      <div>ICON</div>
    </div>
  </body>
</html>

웹 스프라이트( SPRITTE )이미지

 

작은 아이콘이나 버튼을 하나로 뭉쳐놓은 이미지 *실무에서 굉장히 많이 쓴다!

모바일환경에서 이미지를 다운 받을 때 이미지가 각각 개별 저장되있으면 용량을 너무 크게 차지해서 

이미지 하나만 다운받으면 전체 이미지가 출력될 수 있도록 SPRITE이미지를 쓴다.

또한 모두 서버에 저장해야하는 이미지인데 개별로 저장되어 있으면 서버에 차지하는 용량이 크기 때문에

모바일환경에서 스프라이트 이미지를 쓴다.

구글에 스프라이트 이미지 만들기 검색하면사이트가 나온다.

종이에 구멍 뚫고 보여주려는 이미지가 뒤에 물체면 아래쪽 보여주고 싶으면 -방향으로 이미지가 올라가야된다.

(위,왼쪽이 - 음수 방향) (아래,오른쪽이 + 양수방향)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>박스만큼 배경 이미지 채우기</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        background: mediumaquamarine;
        margin-bottom: 20px;
      }
      #logo {
        width: 111px;
        height: 68px;
        background: rgb(32, 153, 127) url(./img/css_sprites.png) no-repeat;
      }

      #search {
        width: 24px;
        height: 24px;
        background: rgb(205, 73, 50) url(./img/css_sprites.png) no-repeat;
        background-position: -111px 0px;
      }
    </style>
  </head>
  <body>
    <div id="logo"></div>
    <div id="search"></div>
    <div id="person"></div>
    <div id="lock"></div>
    <div id="menu"></div>
  </body>
</html>

 

 

더보기

백그라운드 이미지는 긁히지 않는다. svg라는 태그로 나타내는 방법이 있다.

긁어지는 이미지는 이미지태그! , 긁어지지 않는 건 모두 백그라운드 이미지 

표를 만드는 태그 - 테이블 태그 

 

table태그는 표를 만드는 태그로 웹사이트에서 게시판과 같은 구조를 만들 때 주로 사용한다.

과거 모던 브라우저 시절에는 시멘틱 태그처럼 구조를 만드는 역할로 사용되었지만 

표의 특성상 가로 세로 칸의 넓이가 고정되어 있어 레이아웃 구현이 까다롭다는 이유로 -> div태그 -> 시멘틱 태그로 발전하게 되었다.

3칸 아래 3칸이 와야하므로 tr 안의 td의 갯수는 같아야한다. 칸수가 같지 않을 경우 레이아웃이 무너진다.

표를 만들 때에는 table태그 안에 행을 뜻하는 tr태그를 필요한 갯수만큼 만든 후 tr 안에 td(칸)을 넣어 표를 만든다. 

이 때 각 tr안의 td의 갯수는 모두 동일해야한다. 

[기본형]

1행 1열짜리 표

<table>

 <tr>                                              tr(table row) (=행) -td(칸)들을 묶어주고 있는 가로 1줄

   <td></td>                                  td(=열=셀)  -1칸

 </tr>

</table>

→

 

표의 제목을 나타내는 태그 

<th> <caption> <figcaption>모두 블록속성을 가진다.

표의 제목을 나타내는 태그로 표를 만들다 보면 칸의 내용에 대한 제목을 짓거나 표 전체에 대한 제목이 필요한 경우가 생긴다.

 

<th>는 *table heading 표 구성 시 칸의 제목을 구분지어야할 경우 일반적으로 사용한다.

h태그 속성은 블록속성 ! 두껍다 ! th또한 제목태그라 기본적으로 두껍다.

th, h태그 특징 : 따로 정렬하지 않아도 글자가 중앙에 배치된다. 

th는 제목이기 때문에 글자가 굵게 표현되고, 칸의 중앙에 글자가 정렬된다.

td태그는 제목에 따른 내용을 표시하는 칸으로, 본문을 나타낼 때 사용한다.

<caption>태그 : 표의 전체적인 제목을 나타내는 태그로 table 시작태그의 바로 아랫줄에 작성한다. (자손)

해당 태그의 특징은 표의 위 중앙에 제목이 나타난다는 특징이 있다. 

<figcaption>태그 : 표의 전체적인 제목을 나타낼 때 사용하며 테이블태그의 위나 아래에 작성한다 .

글자가 표의 왼쪽을 기준으로 위나 아랫쪽으로 나타난다. 일반적인 p태그랑 구분이 안 가서 잘 쓰이지는 않는다. 

 

[테이블태그연습]

<style>
      table {
        border: 2px solid blue;
        margin-bottom: 20px;
      }

      th,
      td {
        border: 2px solid red;
      }

      /* tr에는 border가 생기지 않는다. tr은 칸을 묶어주는 역할이라 border안 생기고, 생길 수 있는 경우는 모든 줄들이 하나로 합쳐질 경우에만 생긴다. */
    </style>
  </head>
  <body>
    <table>
      <!-- 기본적으로 글자를 쓰는 만큼만 넓이 높이를 갖는다. th는 제목칸, td는 내용칸 -->
      <tr>
        <!-- 1행 -->
        <td>1행 1열</td>
        <td>1행 2열</td>
        <!-- td는 블록속성인데 알아서 가로로 정렬되있는 이유는 표라서 ! 그리고 tr table row가 묶어주고 있기 때문이다. -->
      </tr>
      <!-- 2행 -->
      <tr>
        <td>2행 1열</td>
        <td>2행 2열</td>
      </tr>
      <!-- 2행3열 -->
    </table>
    <table>
      <caption>
        table태그 아래쪽에 쓰더라도 캡션태그는 이 자리에 만들어짐! <테이블의
        제목>
      </caption>
      <tr>
        <th>제목</th>
        <th>내용</th>
        <th>작성일</th>
      </tr>
      <tr>
        <td>테이블태그</td>
        <td>tr은 td를 묶어주는 줄, td는 칸</td>
        <td>2025년4월23일</td>
      </tr>
    </table>
    <!-- 3행 4열(1줄 안에 4칸이 들어가 있어야한다.) -->

    <table>
      <caption>
        1행을 제목으로: 1행(=tr)에 td->th로 만들기
      </caption>
      <tr>
        <th>1행1열</th>
        <th>1행2열</th>
        <th>1행3열</th>
        <th>1행4열</th>
      </tr>
      <tr>
        <td>2행1열</td>
        <td>2행2열</td>
        <td>2행3열</td>
        <td>2행4열</td>
      </tr>
      <tr>
        <td>3행1열</td>
        <td>3행2열</td>
        <td>3행3열</td>
        <td>3행4열</td>
      </tr>
    </table>

    <table>
      <caption>
        1열을 제목으로: 각 tr의 첫번째 칸 td를 th로 만들기
      </caption>
      <tr>
        <th>1행1열</th>
        <td>1행2열</td>
        <td>1행3열</td>
        <td>1행4열</td>
      </tr>
      <tr>
        <th>2행1열</th>
        <td>2행2열</td>
        <td>2행3열</td>
        <td>2행4열</td>
      </tr>
      <tr>
        <th>3행1열</th>
        <td>3행2열</td>
        <td>3행3열</td>
        <td>3행4열</td>
      </tr>
    </table>
  </body>

 

 

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

✔입력양식태그들 / day19 / 25.04.25  (3) 2025.04.25
멀티미디어태그 / day16 / 25.04.22  (0) 2025.04.25
테이블 태그 칸 합치기 / day18 / 25.04.24  (0) 2025.04.25
#Beyond / is,has선택자 / 배경투명도속성 /day14 / 25.04.18  (0) 2025.04.18
구조&형태구조 / 제외.속성.상태.가상요소선택자 / day13 / 25.04.17  (1) 2025.04.17