'Web' 카테고리의 글 목록

Web

CSS-(4) 2021.02.19
CSS-(3) 2021.02.19
CSS-(2) 2021.02.18
CSS-(1) 2021.02.05 2
HTML-(4) 2021.02.03
HTML-(3) 2021.02.03
HTML-(2) 2021.02.03
HTML-(1) 2021.02.02

CSS-(4)

화이트 하비 2021. 2. 19. 03:03

2021. 2. 19. 03:03

문자 선택자

특정 문자 또는 문자열을 선택하여 CSS 속성을 설정할 수 있다.

first-letter, first-line 을 사용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #wrap {
        width: 800px;
        margin: 0 auto;
      }
      #header {
        border-bottom: 1px solid #cccc;
      }
      #p1::first-letter,
      #p2::first-letter {
        font-size: 2em;
      }
      #p1::first-line,
      #p2::first-line {
        color: tomato;
      }
      #content > p {
        float: right;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="header">
        <h1>AYA</h1>
      </div>
      <div id="content">
        <p>-마마무</p>
        <p id="p1">
          I love you<br />
          세상을 다 줄 것처럼 말하고 Hate you 이젠 서로 화살을 겨눠 뻔하디뻔한
          bad ending 님 얼굴에 침을 뱉어 오점 하나 생겨 우린 남이 됐다 못된
          사랑놀이에 미쳐 이기적인 넌 이젠 지쳐 눈물인지 또 빗물인지 oh 넌 내게
          모욕감을 줬어
        </p>
        <p id="p2">
          눈물이 <br />
          뚝 떨어진다 no, no, no, eh, oh oh eh, dong do-do-do-dong dong 툭
          떨어진다 눈물이야 빗물이야 아야 눈물이야 빗물이야 아야 눈물이 툭
        </p>
      </div>
    </div>
  </body>
</html>

#content p:first-child::selection{
	background-color:blue;
    color:yellow;
}

selection을 이용해 마우스 커서를 끌어당길 때를 설정할 수 있다

first-child을 이용해 첫번째 태그만을 선택한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #wrap {
        width: 800px;
        margin: 0 auto;
      }
      #header {
        border-bottom: 1px solid #cccc;
      }
      #content p:first-child::selection {
        background-color: blue;
        color: red;
      }
      #p1::first-letter,
      #p2::first-letter {
        font-size: 2em;
      }
      #p1::first-line,
      #p2::first-line {
        color: tomato;
      }
      #content > p {
        float: right;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="header">
        <h1>AYA</h1>
      </div>
      <div id="content">
        <p>-마마무</p>
        <p id="p1">
          I love you<br />
          세상을 다 줄 것처럼 말하고 Hate you 이젠 서로 화살을 겨눠 뻔하디뻔한
          bad ending 님 얼굴에 침을 뱉어 오점 하나 생겨 우린 남이 됐다 못된
          사랑놀이에 미쳐 이기적인 넌 이젠 지쳐 눈물인지 또 빗물인지 oh 넌 내게
          모욕감을 줬어
        </p>
        <p id="p2">
          눈물이 <br />
          뚝 떨어진다 no, no, no, eh, oh oh eh, dong do-do-do-dong dong 툭
          떨어진다 눈물이야 빗물이야 아야 눈물이야 빗물이야 아야 눈물이 툭
        </p>
      </div>
    </div>
  </body>
</html>

링크 선택자

문서에서 링크(href)되어 있는 문자를 선택하여, CSS속성을 설정할 수 있다.

#content a::after{
	content: '-' attr(href);
}

'-'뒤에 href속성값을 붙인다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #wrap {
        width: 800px;
        margin: 0 auto;
      }
      #header {
        border-bottom: 1px solid #cccc;
      }
      #content a {
        text-decoration: green wavy underline;
        color: rgb(9, 45, 248);
      }
      #content a::after {
        content: "-" attr(href);
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="header">
        <h1>Website</h1>
      </div>
      <div id="content">
        <ul>
          <li><a href="https://www.google.com/"> Google</a></li>
          <li><a href="https://www.naver.com/"> Naver</a></li>
        </ul>
      </div>
      <div id="footer"></div>
    </div>
  </body>
</html>

text-decoration => 링크 걸렸을 때 표시 설정 변경

자세한 설명↓

developer.mozilla.org/ko/docs/Web/CSS/text-decoration

text-decoration - CSS: Cascading Style Sheets | MDN

text-decoration CSS 단축 속성은 글씨의 장식(선) 색을 지정합니다. text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness속성 값을 설정합니다. The source for this interactive example is store

developer.mozilla.org

부정 선택자

#content li:not(.fa){
	background-color:#;
}

fa 클래스를 제외한 나머지

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #wrap {
        width: 800px;
        margin: 0 auto;
      }
      #header {
        border-bottom: 1px solid #cccc;
      }
      #content a {
        text-decoration: none;
        color: rgb(0, 0, 0);
      }
      #content li:not(.no) {
        text-decoration: rgb(0, 255, 64) wavy underline;
        background-color: rgb(190, 255, 196);
      }
      #content a::after {
        content: "-" attr(href);
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="header">
        <h1>Website</h1>
      </div>
      <div id="content">
        <ul>
          <li><a href="https://www.google.com/"> Google</a></li>
          <li class="no"><a href="https://www.naver.com/"> Naver</a></li>
          <li><a href="https://www.gogle.com/"> Gogle</a></li>
          <li class="no"><a href="https://www.never.com/"> Never</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

'Web > css' 카테고리의 다른 글

CSS-(3) (0)	2021.02.19
CSS-(2) (0)	2021.02.18
CSS-(1) (2)	2021.02.05

CSS-(3)

화이트 하비 2021. 2. 19. 01:36

2021. 2. 19. 01:36

반응 선택자

마우스의 반응에 따른 속성을 설정할 수 있다

hover: 마우스가 올라갈 때 반응함

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      ul > li {
        font-size: 20px;
        font-weight: bold;
        color: orange;
      }
      li:hover {
        color: blue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
      <li>menu5</li>
    </ul>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      ul > li {
        font-size: 20px;
        font-weight: bold;
        color: orange;
      }
      li:hover {
        color: blue;
      }
      div {
        width: 500px;
        background-color: palegoldenrod;
        margin: 100px 0 0 50px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
      <li>menu5</li>
    </ul>
    <div>
      <ol>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
      </ol>
    </div>
  </body>
</html>

margin: 상하좌우 여백

e.g: margin 30px =>상하좌우 30px씩 준다

margin: 100px 0 0 50px=>위에서 100px, 왼쪽으로 50px

margin: 0 auto => 위아래 0 왼쪽오른쪽 auto 균등 분배

상태 선택자

상태에 따라서 CSS속성이 변하는 설정을 할 수 있다.

enable, disable, focus 등 상태에 따라 속성을 줄 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      input:focus {
        border: 20px solid rebeccapurple;
        padding: 20px;
      }
      input:enabled {
        color: salmon;
        font-weight: bold;
      }
      input:disabled {
        color: rgb(252, 214, 0);
      }
    </style>
  </head>
  <body>
    <div>
      <form>
        이름: <input type="text" name="uname" /><br />
        아이디: <input type="text" name="uid" /><br />
        비밀번호:
        <input
          type="password"
          name="upw"
          value="12345"
          disabled="disabled"
        /><br />
      </form>
    </div>
  </body>
</html>

html부분

disable =>상태변경 불가

css부분

enable=>변경 가능할 경우 속성

disalbe=>변경 불가능할 경우 속성

focus=>마우스 클릭(focus)일 경우 속성(양식의 입력칸일 때)

구조 선택자

구조에 따라서 CSS속성이 변하는 설정을 할 수 있다

맨 위, 맨 아래는 어떻게 해라, 짝수 구조는 어떻게 해라 등등을 할 때 쓰임

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #content {
        width: 300px;
      }
      ul li {
        list-style: none;
        border: 1px solid;
        padding: 10px;
        background-color: #fffdfd;
        font-weight: bold;
        font-size: 20px;
      }
      ul li a {
        color: #000000;
      }
      ul li:nth-child(2n + 1) {
        background-color: #f8a7a7;
      }
      ul li:first-child,
      ul li:last-child {
        background-color: yellow;
      }
      ul li:first-child {
        border-radius: 10px 10px 0 0;
      }
      ul li:last-child {
        border-radius: 0 0 10px 10px;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
        <li><a href="#">menu4</a></li>
        <li><a href="#">menu5</a></li>
        <li><a href="#">menu6</a></li>
        <li><a href="#">menu7</a></li>
        <li><a href="#">menu8</a></li>
      </ul>
    </div>
  </body>
</html>

list style=>앞에 글머리표 지정, none일 경우 빠짐

자세한 내용: ↓

webberstudy.com/html-css/css-1/list-style/

list-style (리스트 스타일)

HTML 태그 중 ol, ul, li 요소에 스타일을 줄 수 있는 CSS 속성인 list-style 속성을 살펴 봅니다.

webberstudy.com

nth-child(2n+1)=> 2n+1번째 태그 선택, 즉 홀수번째

first-child=>맨 위

last-child=>맨 아래

border-radius=>바깥쪽 둥글게 (좌상단 우상단 우하단 좌하단)

전체적인 레이아웃 설정

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #header,
      #content,
      #footer {
        width: 2000px;
        margin: 0 auto;
        overflow: scroll;
      }
      #header .left_space,
      #content .left_space,
      #footer .left_space {
        width: 150px;
        height: 150px;
        float: left;
        background-color: #f3f3f3;
        border: 1px solid #cccccc;
      }
      #header .center_space,
      #content .center_space,
      #footer .center_space {
        width: 700px;
        height: 150px;
        float: left;
        background-color: #f3f3f3;
        border: 1px solid #cccccc;
      }
      #header .right_space,
      #content .right_space,
      #footer .right_space {
        width: 150px;
        height: 150px;
        float: left;
        background-color: #f3f3f3;
        border: 1px solid #cccccc;
      }
      #header .left_space,
      #footer .right_space {
        border-radius: 20px 0 20px 0;
      }
      #header .right_space,
      #footer .left_space {
        border-radius: 0px 20px 0px 20px;
      }
      #header .center_space {
        border-radius: 0 0 20px 20px;
      }
      #header .right_space {
        border-radius: 0 20px 0 20px;
      }
      #content .left_space {
        border-radius: 0 20px 20px 0;
        height: 300px;
      }
      #content .center_space {
        border-radius: 20px 20px 20px 20px;
        height: 300px;
      }
      #content .right_space {
        border-radius: 20px 0 0 20px;
        height: 300px;
      }
      #footer .center_space {
        border-radius: 20px 20px 0 0;
      }
      #content .center_space ul li {
        list-style: none;
        float: left;
        padding: 0 40px;
        font-weight: bold;
        font-size: 20px;
      }
      #content .hehe {
        clear: both;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <div class="left_space"></div>
      <div class="center_space"></div>
      <div class="right_space"></div>
    </div>
    <div id="content">
      <div class="left_space"></div>
      <div class="center_space">
        <div>
          <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
            <li>menu4</li>
          </ul>
        </div>
        <div class="hehe">
          <h1>헤헤헤</h1>
          <p>가나다라마바사아자차카타파하</p>
        </div>
      </div>
      <div class="right_space"></div>
    </div>
    <div id="footer">
      <div class="left_space"></div>
      <div class="center_space"></div>
      <div class="right_space"></div>
    </div>
  </body>
</html>

차근차근보면 별로 어렵지 않습니다

'Web > css' 카테고리의 다른 글

CSS-(4) (0)	2021.02.19
CSS-(2) (0)	2021.02.18
CSS-(1) (2)	2021.02.05

CSS-(2)

화이트 하비 2021. 2. 18. 23:39

2021. 2. 18. 23:39

id(#)와 class(.)

태그의 id와 class 를 이용하여 css에서 속성을 설정 할 수 있다

id를 이용할 때는 #

class를 이용할 때는 .

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #header {
        width: 500px;
        background-color: #ffcc00;
        border: 1px solid #000000;
        text-align: center;
      }
      #wrap {
        width: 500px;
        background-color: #00ffdd;
        border: 2px solid #ea00ff;
        text-align: center;
        overflow: hidden;
      }
      #content {
        width: 350px;
        background-color: #ffcc00;
        border: 2px solid #000000;
        float: left;
      }
      #side_banner {
        background-color: #ffcc00;
        border: 2px solid #000000;
        float: left;
      }
      #footer {
        clear: both;
        width: 500px;
        background-color: #ff0080;
        border: 1px solid #66fa03;
        text-align: center;
      }
      .menu1 {
        color: #aaaaaa;
        font-weight: bold;
      }
      .menu1,
      .menu3,
      .menu5 {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>HEADER</h1>
    </div>

    <div id="wrap">
      <div id="content">
        <h1>CONTENT</h1>
        <ul>
          <li class="menu1">menu1</li>
          <li class="menu2">menu2</li>
          <li class="menu3">menu3</li>
          <li class="menu4">menu4</li>
          <li class="menu5">menu5</li>
        </ul>
      </div>
      <div id="side_banner">
        <h1>BANNER</h1>
        <a href="https://www.naver.com/"
          ><img
            width="100px"
            src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDEwMjRfMTU3%2FMDAxNjAzNDgyNTU0Mjg0.-Rc206zme2K6XKWJjosmHucpqDj8sqNvzhZeAVCwb08g.gFvmgVX1_N2-7SXYkzzhwDGxNoRzsRmHdGmPRFuMCW8g.GIF.boccabe%2Fnaver.gif&type=a340"
            alt="naver"
        /></a>
      </div>
    </div>
    <div id="footer">
      <h1>FOOTER</h1>
    </div>
  </body>
</html>

float를 할 때 overflow에 hidden을 해줘야한다.

text-align: 텍스트 정렬 방향

-left: 왼쪽 정렬

-center: 중앙 정렬

-right: 오른쪽 정렬

-justify: 양쪽 정렬(자동 줄바꿈시 오른쪽 경계선 부분 정리)

overflow: 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법

-visible: 넘친부분까지 보이기

-hidden: 넘친부분 숨기기

-scroll: 스크롤 형식

-auto: 사용자 에이전트가 결정

https://developer.mozilla.org/ko/docs/Web/CSS/overflow

overflow - CSS: Cascading Style Sheets | MDN

overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. overflow-x, overflow-y의 값을 설정합니다. The source for this interactive example is stored

developer.mozilla.org

float: 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너 좌우측을 따라 배치되어야 함을 지정함, 한마디로 주위에 감싸는 걸 하는가 안하는가를 의미, 둥둥 떠 움직이는 것

-none: 요소가 부동하지 않아야함, 주위 둘러싸지 않음

-left: 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타냄

-right: 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타냄

-inline-start: 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타냄

-inline-end: 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타냄. 즉 Itr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽

https://developer.mozilla.org/ko/docs/Web/CSS/float

float - CSS: Cascading Style Sheets | MDN

CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. The so

developer.mozilla.org

clear: 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는지를 지정

-none: 요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 않음을 나타내는 키워드

-left: 요소가 지난 left 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드

-right: 요소가 지난 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드

-both: 요소가 지난 both left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내느 키워드

https://developer.mozilla.org/ko/docs/Web/CSS/clear

clear - CSS: Cascading Style Sheets | MDN

clear CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다. The source f

developer.mozilla.org

tag, id, class 혼합

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      ul li.menu1 {
        color: #aaff00;
      }
      .menu2 {
        color: #00ffd5;
        font-weight: bold;
        font-size: 20px;
      }
      #menu {
        color: #eb0000;
      }
      #header {
        background-color: aqua;
        text-align: center;
        border: 2px solid #000000;
      }
      #wrap {
        background-color: #ffee00;
        border: 2px solid #000000;
        overflow: scroll;
      }
      #content1 {
        border: 1px;
        width: 250px;
        float: left;
      }
      #content2 {
        border: 1px;
        width: 250px;
        float: left;
      }
      #footer {
        background-color: aqua;
        clear: both;
        border: 2px solid #000000;
      }
      * {
        width: 500px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>header</h1>
    </div>

    <div id="wrap">
      <div id="content1">
        <ul>
          <li id="menu">menu</li>
          <li class="menu1">menu</li>
          <li class="menu2">menu</li>
          <li class="menu1">menu</li>
          <li class="menu2">menu</li>
        </ul>
      </div>

      <div id="content2">
        <ol>
          <li class="menu1">menu</li>
          <li class="menu2">menu</li>
          <li class="menu1">menu</li>
          <li class="menu2">menu</li>
          <li class="menu1">menu</li>
        </ol>
      </div>
    </div>

    <div id="footer">
      <h1>footer</h1>
    </div>
  </body>
</html>

ul li .menu =>ul태그 안에 li태그 안에 menu를 선택

속성 선택자

tag의 속성을 선택하여 CSS의 속성을 설정 할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      input {
        color: rgb(255, 140, 0);
        font-size: 30px;
        font-weight: bold;
      }
      input[type="text"] {
        color: #ff0000;
        font-size: 50px;
        width: 200px;
      }
      input[type="tel"] {
        color: blue;
      }
      img[src] {
        border: 5px solid green;
      }
    </style>
  </head>
  <body>
    <form>
      이름: <input type="text" /><br />
      아이디: <input type="text" /><br />
      비밀번호: <input type="password" /><br />
      전화번호: <input type="tel" /><br />
    </form>
    <img
      src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAxMjFfMTkx%2FMDAxNjExMTU1MTYwNzY3.Ud-RGzNn46Vs9ftBU0gaXaH5vIFCHro8TA230qMMZX4g.st3kqQD_bzQo4WXblhUDNfKJI-fOdNCMpdL4rqrviXYg.PNG.djgkrrl1234%2Fimage.png&type=sc960_832"
      alt="네이버"
      width="100px"
    />
  </body>
</html>

[]를 이용해 속성 표시

후손 및 자손 선택자

tag의 속성을 선택하여 CSS의 속성을 설정 할 수 있다.

가족관계 식으로 할경우

자손 선택자: 바로 밑에 있는 태그 선택, >으로 구분

후손 선택: 밑에 있는 모든 것 선택, 공백으로 구분

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #header,
      #wrap {
        border: 1px solid rgb(255, 0, 0);
      }
      /*후손*/
      div li {
        background-color: rgb(215, 176, 253);
      }
      div p {
        font-size: 5px;
      }
      /*자손*/
      div > h1 {
        font-weight: bold;
        color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <div class="logo">
        <h1>LOGO</h1>
        <!--여기부분이 div 자손이라 노란색으로 바뀐다-->
      </div>
      <div class="copy">
        <h2>global company</h2>
      </div>
    </div>

    <div id="wrap">
      <!--여기부분은 div 후손이라 글씨 사이즈가 5px로 바뀐다-->
      <p>제목</p>
      <ul>
        <!--여기부분은 div 후손이라 글씨 사이즈가 5px로 바뀐다-->
        <li><p>가가가</p></li>
        <!--여기부분은 div 후손이라 노란색으로 바뀌지 않는다-->
        <li><h1>나나나</h1></li>
        <!--여기부분은 div 후손이라 글씨 사이즈가 5px로 바뀐다-->
        <li><p>다다다</p></li>
        <!--여기부분은 div 후손이라 노란색으로 바뀌지 않는다-->
        <li><h1>라라라</h1></li>
      </ul>
    </div>
  </body>
</html>

div li => div 안에 li, 후손일 경우 공백으로 표시

div>h1 => div 안에 바로 h1을 선택

동위 선택자

태그의 동등한 위치를 판단하여 CSS속성을 설정 할 수 있다

+: 그 태그와 바로 근접해 있는 태그 하나 선택

~: 그 태그와 동등한 위치에 있는 태그들 중에 다 선택

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      h3 ~ div {
        font-size: 10px;
        color: orange;
      }
      h3 + div {
        font-size: 20px;
        font-weight: bold;
        color: orchid;
      }
      #title ~ div {
        width: 300px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h3 id="title">동위 선택자(+,~)</h3>
    <!--h3+div에 의해 크기와 색깔이 바뀜-->
    <div>div_01</div>
    <!--h3~div에 의해 크기와 색깔이 바뀜-->
    <div>div_02</div>
    <div>div_03</div>
    <div>div_04</div>
    <div>div_05</div>
  </body>
</html>

'Web > css' 카테고리의 다른 글

CSS-(4) (0)	2021.02.19
CSS-(3) (0)	2021.02.19
CSS-(1) (2)	2021.02.05

CSS-(1)

화이트 하비 2021. 2. 5. 22:41

2021. 2. 5. 22:41

CSS: html문서의 레이아웃, 색깔 등을 변경, 설정할 때 쓰임

선택자

특정 태그를 선택하여, 해당 태그의 속성을 변경 하는 목적으로 사용됨=>CSS 사용 전체 이유

tag 선택자

tag를 선택하면 태그 선택자, 특정태그를 선택하여 CSS 속성을 적용할 수 있음

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <style>
      div {
        background-color: #ffd800;
        border: 5px solid #afffff;
      }
    </style>
  </head>
  <body>
    <h1>제목 입니다.</h1>
    <p>본문 입니다.</p>

    <div>
      <h1>제목입니다.</h1>
      <p>본문입니다.</p>
    </div>
  </body>
</html>

head 태그에다가 <style></style>넣어서 css적용

div{}: 선택자=>div를 선택함

background-color: 배경색

font-weight: 글씨 두께

-bold: 두껍게

border: 테두리

-solid, dash red 등으로 선 종류와 색깔을 바꿀 수 있음

자세한 내용을 보고 싶다면↓

border - CSS: Cascading Style Sheets | MDN

border: solid; border: 2px dotted; border: outset #f33; border: medium dashed green; border: inherit; border: initial; border: unset; border 속성은 다음의 값 중 한 개에서 세 개를 선택해서 지정할 수 있습니다. 순서는 영향을

developer.mozilla.org

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <style>
      div {
        background-color: #ffd800;
        border: 5px solid #afffff;
      }
      h1 {
        background-color: aqua;
        border-bottom: 5px solid azure;
      }
    </style>
  </head>
  <body>
    <h1>제목 입니다.</h1>
    <p>본문 입니다.</p>

    <div>
      <h1>제목입니다.</h1>
      <p>본문입니다.</p>
    </div>
  </body>
</html>

div 처럼 h1도 설정 변경 가능

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <style>
      div {
        background-color: #ffd800;
        border: 5px solid #afffff;
      }
      h1 {
        background-color: aqua;
        border-bottom: 5px solid azure;
      }
      li {
        color: #07916e;
      }
    </style>
  </head>
  <body>
    <h1>제목 입니다.</h1>
    <p>본문 입니다.</p>

    <div>
      <h1>제목입니다.</h1>
      <p>본문입니다.</p>
    </div>
    <ul>
      <li>안녕</li>
      <li>Hi</li>
      <li>Hello</li>
    </ul>
  </body>
</html>

li 태그 선택자

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <style>
      li,
      p,
      h1 {
        background-color: #ffd800;
        border: 5px solid #afffff;
      }
      h1 {
        background-color: rgb(3, 255, 87);
        border-bottom: 5px solid rgb(255, 0, 85);
      }

      p {
        color: #07916e;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>주식회사</h1>
    </header>
    <nav>
      <ul>
        <li>회사소개</li>
        <li>제품소개</li>
        <li>고객센터</li>
        <li>공지사항</li>
      </ul>
    </nav>
    <section>
      <p>
        우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사입니다.
      </p>
    </section>
    <footer>
      <p>서울시 oo구 oo동 oo빌딩</p>
    </footer>
  </body>
</html>

코드를 볼 때 h1이 위 아래 중복이 되는데 중복되는 부분은 아래 것이 우선적으로 보여짐

* 선택자(전체 선택자)

전체라는 의미의 *선택자를 사용하면 문서 전체를 선택하는 의미가 있다

문법:

<style>
	* {
        color: #00d0ff;
      }
</style>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <style>
      * {
        color: #ff0000;
        background-color: blueviolet;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>주식회사</h1>
    </header>
    <nav>
      <ul>
        <li>회사소개</li>
        <li>제품소개</li>
        <li>고객센터</li>
        <li>공지사항</li>
      </ul>
    </nav>
    <section>
      <p>
        우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사입니다.
      </p>
    </section>
    <footer>
      <p>서울시 oo구 oo동 oo빌딩</p>
    </footer>
  </body>
</html>

전체와 특정태그의 혼합

전체적으로 속성을 설정한 다음 특정 태그의 속성을 변경함

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <style>
      li,
      p,
      h1 {
        background-color: #ffd800;
        border: 5px solid #afffff;
      }
      h1 {
        background-color: rgb(3, 255, 87);
        border-bottom: 5px solid rgb(255, 0, 85);
      }

      p {
        color: #07916e;
      }

      * {
        color: #ff0000;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>주식회사</h1>
    </header>
    <nav>
      <ul>
        <li>회사소개</li>
        <li>제품소개</li>
        <li>고객센터</li>
        <li>공지사항</li>
      </ul>
    </nav>
    <section>
      <p>
        우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사입니다.
      </p>
    </section>
    <footer>
      <p>서울시 oo구 oo동 oo빌딩</p>
    </footer>
  </body>
</html>

전체 선택자와 태그 선택자가 겹칠 경우 태그 선택자를 위주로 보여줌

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <style>
      li,
      p,
      h1 {
        background-color: #ffd800;
        border: 5px solid #afffff;
      }
      h1 {
        background-color: rgb(3, 255, 87);
        border-bottom: 5px solid rgb(255, 0, 85);
      }

      p {
        color: #07916e;
      }

      * {
        color: #ff0000;
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>주식회사</h1>
    </header>
    <nav>
      <ul>
        <li>회사소개</li>
        <li>제품소개</li>
        <li>고객센터</li>
        <li>공지사항</li>
      </ul>
    </nav>
    <section>
      <p>
        우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사입니다.
      </p>
    </section>
    <footer>
      <p>서울시 oo구 oo동 oo빌딩</p>
    </footer>
  </body>
</html>

전체 선택자에 margin, padding 추가

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <style>
      li,
      p,
      h1 {
        background-color: #ffd800;
        border: 5px solid #afffff;
      }
      h1 {
        background-color: rgb(3, 255, 87);
        border-bottom: 5px solid rgb(255, 0, 85);
      }

      p {
        color: #07916e;
      }

      * {
        color: #ff0000;
        background-color: blueviolet;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>주식회사</h1>
    </header>
    <nav>
      <ul>
        <li>회사소개</li>
        <li>제품소개</li>
        <li>고객센터</li>
        <li>공지사항</li>
      </ul>
    </nav>
    <section>
      <p>
        우리 회사는 50년 전통의 역사와 뛰어난 기술을 바탕으로 좋은 회사입니다.
      </p>
    </section>
    <footer>
      <p>서울시 oo구 oo동 oo빌딩</p>
    </footer>
  </body>
</html>

margin: 바깥쪽 여백

padding: 안쪽 여백

+속성:

text-decoration: underline =>글 아래 밑줄

'Web > css' 카테고리의 다른 글

CSS-(4) (0)	2021.02.19
CSS-(3) (0)	2021.02.19
CSS-(2) (0)	2021.02.18

HTML-(4)

화이트 하비 2021. 2. 3. 20:50

2021. 2. 3. 20:50

Table대체->div태그

div를 이용한 레이아웃

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <div>
      <h1>MY HOMEPAGE</h1>
      <hr />
    </div>
    <div>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JAVASCRIPT</li>
        <li>JQUERY</li>
      </ul>
    </div>
    <hr />
    <div>
      <h1>What is HTML5?</h1>
      <p>HTML5 is aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <hr />
      <div>
        <p>xxx주식회사 어쩌구 저쩌구 00구 00동</p>
      </div>
    </div>
  </body>
</html>

시멘틱(semantic)을 이용한 레이아웃

개발, 편집을 빠르게 하기 위해 각 위치별 태그를 써주는 것을 시멘틱이라고 함

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <header><!--제목-->
      <h1>MY HOMEPAGE</h1>
      <hr />
    </header>
    <nav><!--메뉴-->
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JAVASCRIPT</li>
        <li>JQUERY</li>
      </ul>
    </nav>
    <hr />
    <section><!--본문-->
      <h1>What is HTML5?</h1>
      <p>HTML5 is aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <hr />
    </section>
    <footer><!--사이트 바닥-->
      <p>xxx주식회사 어쩌구 저쩌구 00구 00동</p>
    </footer>
  </body>
</html>

<header></header>: 제목을 뜻하는 태그

<nav></nav>: 메뉴

<footer></footer>: 사이트 바닥

'Web > html' 카테고리의 다른 글

HTML-(3) (0)	2021.02.03
HTML-(2) (0)	2021.02.03
HTML-(1) (0)	2021.02.02
Web과 html (0)	2021.01.27

HTML-(3)

화이트 하비 2021. 2. 3. 20:25

2021. 2. 3. 20:25

동영상을 출력하는 태그(video)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <video controls="controls" width="500">
      <source src="C:\Users\hobby\Videos\Captures\123.mp4" type="video/mp4" />
    </video>
    <video
      src="C:\Users\hobby\Videos\Captures\123.mp4"
      controls="controls"
      width="500"
    ></video>
  </body>
</html>

음악을 추가하듯이 비디오도 똑같이 해주면 됨

폼 태그(form)

회원등록 할 때 많이 접함

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <form action="#" method="get">
      이름: <input type="text" name="uname" /><br />
      아이디: <input type="text" name="uid" /><br />
      비밀번호: <input type="password" name="upw" /><br />
      연락처: <input type="text" name="uphone1" size="5" />-
      <input type="text" name="uphone2" size="5" />-
      <input type="text" name="uphone3" size="5" /><br />
      사진: <input type="file" name="upic" /><br />
      성별구분:<input type="radio" name="gender" value="m" />남
      <input type="radio" name="gender" value="w" />여<br />
      사용언어:<input
        type="checkbox"
        name="lan"
        value="kor"
        checked="checked"
      />한글, <input type="checkbox" name="lan" value="eng" />영어,
      <input type="checkbox" name="lan" value="jap" />일어,
      <input type="checkbox" name="lan" value="chi" />중국어<br />
      자기소개: <textarea cols="20" rows="5">간단하게 입력하세요.</textarea
      ><br />
      국적:
      <select>
        <option>KOREA</option>
        <option>USA</option>
        <option>JAPAN</option>
        <option>CHINA</option></select
      ><br />
      좋아하는 음식:
      <select multiple="multiple">
        <option>김치</option>
        <option>불고기</option>
        <option>파전</option>
        <option>비빔밥</option></select
      ><br />
      <input type="submit" />
    </form>
  </body>
</html>

-action: 정보가 어디론가 갈 때 주소 기입

-method: get/post 방식이 있음. 정보가 가는 방식(입력을 안할 경우 defalut은 get)

get: 도메인 주소에 내가 입력한 값의 정보가 나타남(보안 취약, 페이지 넘어갈 때)

post: 도메인 주소에 내가 입력한 값의 정보가 나타나지 않음(회원 정보 등록, 로그인 등 노출되지 말아야할 정보를 넘길 때 사용)

<input/>: 값을 넣을 때 태그

-type: 입력 창 타입을 정해줌

text: 일반 텍스트, password: 글자가 은닉화 됨, file: 파일 넣을 때, submit: action에 있는 주소로 정보 전송

radio: n개 중에 한 개만 유일하게 선택해야할 때, value값이 전송됨), checkbox: 여러 개 선택할 때(value 값이 전송됨, defalut로 체크 표시 되어 있게 할 때, checked="checked"를 씀)=>한 묶음일 경우 name을 같게

-name: 각 입력 창의 고유 식별 이름

-size: (속성값)만큼 글자 칸 크기 설정

<textarea></textarea>: 여러줄 입력

-rows: (속성값)만큼 행

-cols: (속성값)만큼 열

<select></select>: 선택 태그, 여러 개 선택할 수 있게 하려면 multiple="multiple"

ㄴ> <option></option>: 옵션 태그(select랑 같이 쓰임)

이렇게 입력을 하고 get 방식으로 제출할 경우

"file:///C:/Users/hobby/source/repos/Web/ex1.html?uname=%E3%85%81%E3%85%81%E3%85%81&uid=%E3%85%81%E3%85%81%E3%85%81&upw=aa&uphone1=111&uphone2=111&uphone3=111&upic=&lan=kor#"

이렇게 ?뒤에 각 name="입력 값" 이렇게 표시가 된다

레이아웃 구성 태그(div, span)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <div>divblock1</div>
    <div>divblock2</div>
    <div>divblock3</div>
    <div>divblock4</div>
    <p>pblock</p>
    <ul>
      <li>liblock1</li>
      <li>liblock2</li>
    </ul>

    <span>inline1</span>
    <span>inline2</span>
    <span>inline3</span>
    </form>
  </body>
</html>

html은 영역을 크게 블럭 요소와 라인 요소로 나뉠 수 있다

<div></div>: 블럭 형식(한 개가 끝나면 엔터 친 듯 아래로 내려감, 수직방향)으로 태그, 또 다른 예: li, p

<span></span>: 라인 형식(한 개가 끝나면 옆으로 이어짐, 개행이 되지x)

'Web > html' 카테고리의 다른 글

HTML-(4) (0)	2021.02.03
HTML-(2) (0)	2021.02.03
HTML-(1) (0)	2021.02.02
Web과 html (0)	2021.01.27

HTML-(2)

화이트 하비 2021. 2. 3. 05:49

2021. 2. 3. 05:49

리스트 태그1(ul, li, ol)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <p>메뉴 리스트</p>
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
      <li>menu5</li>
    </ul>

    <p>지역 리스트</p>
    <ol>
      <li>서울</li>
      <li>경기</li>
      <li>충청</li>
      <li>전라</li>
      <li>경상</li>
      <li>강원</li>
    </ol>

    <p>검색 사이트 리스트</p>
    <ol>
      <li><a href="http://naver.com" target="_blank">naver</a></li>
      <li><a href="http://google.com" target="_self">google</a></li>
    </ol>
  </body>
</html>

<ul></ul>: 순서없이(unorder list)

<ol></ol>: 순서O(order list)

<li></li>: 줄 별 앞에 개행 문자 해줌

리스트 태그2(dl, dt, dd)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <dl>
      <dt>메뉴 리스트</dt>
      <dd>menu1</dd>
      <dd>menu2</dd>
      <dd>menu3</dd>
      <dd>menu4</dd>
      <dd>menu5</dd>

      <dt>지역 리스트</dt>
      <dd>서울</dd>
      <dd>경기</dd>
      <dd>충청</dd>
      <dd>전라</dd>
      <dd>경상</dd>
      <dd>강원</dd>
    </dl>
  </body>
</html>

<dl></dl>: 리스트 시작과 종료

<dt></dt>: 리스트 상단 타이틀

<dd></dd>: 리스트 아이템

여기서는 아까와 다른 점이 개행문자가 없네요

dl과 ul의 차이점

dl일 경우 사전적인 의미를 쓸 때 많이 씀, children 개념을 내포

ul의 경우, 순서없음

표를 나타내는 태그(table, tr, td)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
      </tr>

      <tr>
        <td>2행 1열</td>
      </tr>
    </table>
    <table border="4">
      <tr>
        <td rowspan="4">중간고사 성적</td>
      </tr>
      <tr>
        <td>국어</td>
        <td>수학</td>
        <td>영어</td>
      </tr>
      <tr>
        <td>100</td>
        <td>60</td>
        <td>80</td>
      </tr>
      <tr>
        <td colspan="2">평균</td>
        <td>80</td>
      </tr>
    </table>
  </body>
</html>

table: 표형식의 레이아웃을 만드는 태그, 예전에는 웹사이트의 전체적인 레이아웃을 만들었으나 현재는 사용빈도가 많이 줄음(유지보수 어렵, 테이블 태그의 한계(변경이 어렵))

<tr></tr>: 행 단위

<td></td>: 열 단위

-rowspan 속성: 행 (속성값)개가 합쳐짐

-colspan 속성: 열 (속성값)개가 합쳐짐

=>저 속성 2개는 많이 쓰이지 않음, 깨짐, 의도치 않은 모양이 생기기 때문

<table></table>: 테이블 단위

-border 속성: 선 두께

이미지를 출력하는 태그(img)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <p><img src="Navi_dr.png" alt="꿈 Story" /></p>
    <p>
      <img
        src="http://www.sba.seoul.kr/kr/images/header/Navi_dr.png"
        alt="꿈 Story"
      />
      <p><img src="http://www.sba.seoul.kr/kr/images/header/Navi_dr.png" alt="꿈 Story" width="500"></p>
    </p>
  </body>
</html>

<img />: 웹사이트에서 이미지를 출력해주는 태그

-src: 이미지 경로를 나타냄

<p><img src="Navi_dr.png" alt="꿈 Story" /></p>

: 로컬에 있는(내 컴퓨터 문서에 저장)되어있는 같은 경로의 이미지를 뜻함

<p>
      <img
        src="http://www.sba.seoul.kr/kr/images/header/Navi_dr.png"
        alt="꿈 Story"
      />
</p>

: 원격 경로의 이미지(네트워크 상)

-alt: 이미지를 못찾을 경우 나타내는 문구

-width: 사이즈 크기 정함(잘 쓰이지 않음, 거의 css에서 크기 변경해줌)

사운드를 출력하는 태그(audio)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <audio
      src="music.mp3"
      controls="controls"
      autoplay="autoplay"
      loop="loop"
    ></audio>
  </body>
</html>

<audio></audio>: 웹사이트에서 사운드를 출력해 주는 태그

-controls: 컨트롤러를 보일 것인지 결정

-autoplay: 자동적으로 play할 것인지

-loop: 반복할지

주간 히트 노래 예제

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <table width="300" border="3">
      <tr>
        <td><h1>주간 히트 노래</h1></td>
        <hr />
      </tr>
      <tr>
        <td>
          <ol>
            <li>
              <img
                src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxITEhUTEhIVFRUXGB0aFxUVFRcXFxcVGhgXGBgXFxUYHSggGB0lHRgVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGy0mICUtLS0tLS0uLy0tLS0tLS0tLS0tLS0tLS0tLy0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAKgBLAMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAADBAIFAAEGBwj/xAA+EAABAwIDBQYDBgUEAgMAAAABAAIDESEEEjEFQVFhcQYTIjKBkQehsUJScsHR8CMzYpLhFBWi8SSyF1OC/8QAGgEAAwEBAQEAAAAAAAAAAAAAAAECAwQFBv/EAC4RAAICAgAFAgMJAQEAAAAAAAABAhEDIQQSMUFRE2EFIjIjQnGBkaHB0fCxFP/aAAwDAQACEQMRAD8A9RaERuqGEjtXawiIAGZ2tNwHNEYuTpFQg5ukGxjfEi4S7SP3oudftx7j4mt9Kj51Tr8c7uS+ImuYbqka1qPZaPFJVZb4acWr7lvB5Uo4XVXsjaUrpWtLqgm4oOB5K3mF1M4OLpk5cTxumPQmwU5ELDaBFesyDFt2hURopBAynmFCeRR3HxA9FDGNv6f4Wzo3omQPuS8FnOCPqAg6P6j9/RBRmJ8qnhz4QozeUrWGPh9UCCvKGVN65vthtSWBkZjIbUmriAdKUFDxv7IujTFieWahHqy+HmCjityW2biXSRRSOpVzQTTS6axHlQRKLi2mRwpueikR4SELDnxI8e9Al0Emp5hsEk0XTcRsE2JAJx4lNp8I/e9RxOoWRnwoDuanFghx6o0oseqDGboQMaw58KhJZzVLD7+qjiRoeaBm26j1CWxHmTL9fX6oOLGiQE5zolsYL+iW21iHtyZSQCL2re1LqrdtCU/a+Q/RbRwuStHTDhZTjzJouIjcKzquTGOk+98gif7rN9/5D9E//PL2LXBz8o6BoseqB+9UTDOqL6kA+4Qyuc5CzC5HFnPO7m+npWg+S60FcliPBO6u6Svpmr9F04O518H1lXWi72ts2MQEtaAWgGo1NxWqS7NSHM9vFtfb/tWe2cS0QOuPFYX1v+iquzg8bj/SR+/ZCbeJ2ODb4eXN5/oR2XiBHI17q0GtNdF03fB4D21oeOq5jZ2H7x7WE0rv13LqWYXu2NZWtK3pTeTonxFX7j43ltef4GcJomTolcJoU0FynEiLVMKDVIIGV+Pb9fqht8o6pnHt16V9krD5T1TJY/CatCFNq0+ilhT4VHEC3S6AJOQsIfCeqDtPaMUDe8lkbG3i4gBcd/8AJmz2Oc0ymm45HUPySsDvHGy4vt1joWgd4C4sFS0f1OAAPBc5jvirE0l2d5qTkiiaymUWrI94rU00FF5/t7trLiX1cxrWl2YtBJLtwqeQ0taqarui4NxkmnXv4PXexPaKKQGBoLb1YCa9QD7rtXaFfOvZ7a7O9aWv7p1fDWl773GwXuexcc6RjS9zASLhtwT+LTnRZyz4+blevZlzxy+pvm9ywiNwmG+ZJsNCOqbcfEFqYIXeLnqmIdEGceIosGiA7kcQPqhs0P74o2IFigR70CfUK7f0SwTNdOiX3oGxmE+IqUwsVCLUdEdwshjQCTjyHyUMWLKZFh6halu1IBDa/wDI9R9VSYTEZCTStedFb47Gsa3u3NLq3sef+FXd/DT+UfddWNfJTVnfgT9LlcW0/wDeSf8Auf8AR8/8JTFTZ3F1KV3elEbvov8A6z7orcTBvhPurilF2om2NKDuMH/vzLjD/Z/CPoouCjhcQHhpaCALUPL/ALU5NSuNrZ5kk06ZYNVbtfZJkOdlM28Hf68VZb0VicZOLtBjyODtHJs2NMTTJTmSKK4wGD7oU1O8q1bql5hRyuWWUuppl4ieTTOZ2KwiZlQRfgeC6zFC3qsnFvVTn0PRTknzuxZsvqSugGE1ITjUlh/MnWqDJEN6kFpy3VIYLFC451Cr4BZwVjidK8Ek1vid0TQmHwRsVufQjkoYQ3UsUPCeiAR5v252xHDF35aJJT4Yg+7GC4zluhOpp0C8Sx2LdI4vcSXONS46k/l0XonxbLg+KM6Na51N2bMGj2XK9jdgDEy1f5G3PPkotK2zRRbaSKzZuxp5yO7YSOOg90fHbAmic5r2EFoBtwNb/Je34TDRxMAja0ADoB1KrdpyRS1y1fIBbJG43BqBwp+qx9Z2dHoKjw1zaJvAbRlhIdFI9hH3XEfJdrtXsZI5+ZkbmNPFtgeFty5Ta+w5sOf4jaA6EXBWqnGWjGWOUdnpHYP4jF72wYxwq7yTG1XbmP4HgV6zIdCvlnYeHbJO2J5oH+FrvuvPkP8AdQeq9x+GnaJ2Jw5ilqJ8OQx9dSNzutiDzCta0ZNdzs8R5vRTgOqHPuPJTg3qiO4SUWKVZqm3hJjVAMM7QdUGTVF+z6ocuqBvoFj+yedEwUrGbdCmigEBdoeR+qi3RSkFndEOIpDE3bPZJd1agbilDs1lD5q0NL76dFawakIIs5WpyXc0jlmtJs57DwkuAINCVcRbJjI+17/4RE1hzZXLLJvwaT4mc3adAmYZsbQG1pWt76/9KUouiziyhKL+iyuzBu3bHZNSpRlal1WmFBKC70HFi6OdUPFCwSBkn3b7KerfRDb5FOHyhAxaM3HVPJDQp5AI1IoveAKkgAakmgCFj8SI2F50HzJsB7rjtsY6WY1ZUtjvp4c41POm5ZZMiib4sLyfgdi+VrmEggj8+F0ux4JFxWlxUV9lw0kM2drnNEjnHRzqVNN3AK77ORuzvMhY1zTVsTKWzC5O/S3uohmcnVGuXhlCLlZfYZ4zUqKjUV06hMyjVUeypQMhOrnGp4kglXritYS5lZz5Mfpyo8e+MGF/ixn71WjmXAGnyVB2NxGRjYo4y97iXOpprQBxXY/G/CF2HjeAasdWo4aH6gqp7CYtscUeSIySS1c4NoKDMQXOcbNb+wssmka4Ns73BRMcA2UAGniA0UMfj2QGjWFxJoxsbaki1+A6kqWz4JJczpC0UsKaBuoqTr1sjQQkGhIobgggg9CFjWjq7gMI6d5JcxrG7ml2Z/qG+Ee5VZ2l2G2aN0bxQO38DuK7TC4agqktpx1aRRNx1ZClbo8D2R2IxE+JfCCGd04ZpDuBuCBvNl6FhdjvwO0YX5szcTmie6lCJQM4DgDS5aaeqtdm4XLO9wsXgA88tT9CVZ7di7wRHKBSWM14lr21IHSo9U45W5IUsMVFoupDYKWHN1D7K3Cbhdp5/cZJSbrFODRKTi5QJk2mxUJNApRnUclB2nQoH2Jx6FNV0SkKZiPhCGCNEX6gpeJNO1HVKDUhIZuM0cgzWceqKfMFDEi5TEAeLlHwpQZNVLDG6GC6jsoq0qLRUDopO0PRag8qQ2MzoJcmJhZLOTExo3pzC1P5Vpp8Lf3yU3CxSGDg8qlhzZRw29bg1IQwAyjxFNsNglsQLo8J8KAK7bsYcxgJ+2Po4KqgwNGuBzZK0pvcP0Vh2mfkiD/uPafStD8itzAua1w8lPU9FyZlcjv4d1EWjwbCSQxtvvEk0/JI4HBNjnlmNnOaAzcKCum+vW6uoCMtN25Ryd4SKW31UR07RrP5k0xSKFobE4V8wPqRTT1V3VUu1AGOiY21Xj5eK3srdhsujEqVHHxDTkmU3azZn+ogczWx9baLmvh5snJhmsNyC6ppuzOIB913so/L6ri8LtMQ42bD6VOZvMG9vWqWVdwwvsPbZgLJI8riAal7bZXChFHD6URNj4SGFrWMaGNaSQAKNBOpVR2txLqNcL9DTpfqkOz2zZJXgvdzNCdK1q47zwGnJY9zujC4W2ejMmFEDEAEKL2hrfDp9FyXabtPPh5AxkbMpAIdI0urehy0du5hOcklsjDhllnyw6j+JcI5GuNaVvSmhtW6Xy4ibFQSOZIzDNBddoAkkLRkeACXUoXWPDmq/Y/aSed0feRwFpnZER3LdHteTc7/AArqtl4qUwzucGgQwgsawUaTRx03AUAoLKcdPaOnPwmTGqnX6+XQ5E8EEAj98ljCue2T2vjmeIZIqONgaggmm7fVXkYLbE1H2Xfkea6ceZS0ebxPB5MLqSLAJacXR4zoh4gLY4yEOvotHQhZEdOqwalAzURumodPVJxm6bh3oBEpdKoEo8RR5BZAl1B4hIYKbUFbxYusnGiybQHkmhMWk3dFkWoW3aBRaUB3LIIEL6C6ONEpJqUii4eLJMp1JvF0yWEZ5CjNQYdCESI2SGCg8xU2ecqDbPU3WcEARxIuFPDGxWsRoFHDG5QAtt7C95BIwalpp1F1UdjdoiSAMd5m+E8iP8LpHuaBVxAG8kgD3K8Q232p/wBJjXuwkjZGEnMKHKTUWB30vcLGcG5Jo2hljCLUj198OXojMeGAk0XmMHxfBbR+E9Wy0+Raktt/E0ysLI4CwkeYyXHQBqn05J6Rb4rHW2diZjiMY3KfBDUk8Xm1PQfVdbCbLjfhxg3DBtlePFJ4h+E6H11S/az4k4fB1jiAnm3gH+Gz8Thqf6R7hbY40tmGXIpS0d0+4PRcX232EXvbiorPaKPprl1Dh0+i4OP4u48OqY4HN+7kcPnnqr3CfFaCVmSeF8RLSC9lJAKilcpofqiUeZUyY5OV2hj/AHdpORzml7KHwkEOFjbmRuXW7Pla9g7stAtSnBeGY/a8feOMWYgkUcQGm2+l/Zdr2clxTWB8BbLG8VpUNLTvq0mxrwK5ZRcVs7oZYz0j0zHzsZGczgvNO1uPbK9uW+VtK7jetl0WE2ZiMQ4d64NH3a1+Q/VI/EPZMcEUHdi5c4OcdTYEfQrHK+aOjv8Ah7UM8SHYzZ0rmtdkIa3ExS5nVAcxjZQ6hOp8TV6BgIm91IyoIkZl8O4Xrp+JeebK7bTAMY9kbg0BorVvAZjqLW3cV12ydumTOzPHG/K0xEixBc7NVtRWwGhGqrDJVo6viGPiJNykqXsV+K7EQVqDM07nNcKg7jQrpcLCcuTO11qEvrmPMjihQw4guBdimOH3REB88xRw81o5oeOIH5FUopOzzsubJPU5WDiLmOEchBJqWOGjm7xfePp6o8+irduRg5C0Fp1B0oRoQi4PG940h1ntHiG4/wBTeR+S6MWS3ys8/NipcyDR6qf2vVCZqpv1qtznRDem4tUs8XKPEUAg5S8mg/e9MlLyi3qkUDmFlF/lCnJoUNvl9UxMFTw+qgAitFnIaAY9GbJafVHgNlGVlSkMswl5RdGBQphdNCZmH1UoSoRG4W2anqkCNTHxKc2oKjiNVuXyhMCU4sgwGhR33b6JRpuEAzyv41bVLp4sM0kNYzO4A2L3kgVHJrf+RXm+VdV8UJg/aU5aahoa224hgqPeq5XMVSOLI7kZ3QUHtI4LbiUN9aFMSs6HC9t8VDhX4Vj/AAuFGu+1G2+YMO4GvpuXKkVW3R0FeOpUmKTa9AwFsqawNsU6CwYcu0+HvaFkLzFM6jHHwuOjXcDwB4riijMpXqonBTVM0jkeN8yPpHDw1yvjcOIOoPqNVR/E9pdhY3nVsoB9WuH1ovG9nbYxMB/gTyM5NeQPVuissb2zxszBHiJi6PM0uqxgNjrVoquaXDtRaO/huMissW/KHI3XTONe6oDjoAKdFWRbRhOkjfdHnxsRv3rT1K83kmk1TPvFxWBr61+qEdsyuDKMJa4kAEEjmbjkFffD/tdJG4QvleXt0Y92Zkrd+Quu144Voeq5PbmLa5wDHAgVrQ9APzVUR6EaEajmF6ODD9lvqfGfE+LT4t8vRaPqBsgna1w0panNLzYR1KtNHt8p/IrzT4X9rXgHDSuzOF2Em7m8BXUhetbNf3grSleKlqpV3Mea1a6CWExOcVpQixbwKaeuI+I2LfhZYp4TR7XGrd0jPtNcN40vuXUbG2ozEwRzR+V4rTe06Fp5g1HouqErWzjmlGVIffrVFhQjoFOFaEdxtBkGvojBDk/JIYLd6IUehRmILNSEARiFyOSC5HiPiQnhAhjCGyI+OqDgjqm6JFoYaoT7lMLUwsmSwIU3eYoalKbg8kAic+gWDyLcvlUYdCEg7k2Hwqsx+I7uOST7jHO/tBP5KxgNlT9oG/8AjTjjG8e7SExSPnZ8pe4vcalxLieZNSt0QmCyIxys89g6VP0WnhEaFt4QF7F2qLSKkIkjUJ9iCkaLZstWmtUnGqJRAWJOCluCk4XK3GKiiDS9G7jdUcVF8g4WW4X0sUZ0IKCbSexEsafshbGHHBMmJY5oSov1PAtlAsFMBTLFsMQDkFwJLXB9NN41B5L0nDfFV0bA1mHbmA8znkjrQfqvOoHajh9EYFo1oEOEX1I9ecbSLPbe358ZJ3kzqncAKNaODQj7A7Sz4QgMf4AamI+Q11tuJ4hUxmabD9EEsoaA1qamqqlWjJTldtn0RsraDJ4GTM8rhWm8HeDzBqE5GbrhvhRiy7DyxH7DwR0cNPdp912zdyk7YytJliFF62w2WFIsA1CHmRRvQpPMD0QAMG61NqVuXX1W5h9ExMzCm6dqkcP5k7RSykNBUHaDESsf4XOawgaaVvVX4VP2q/ls/F+RWuL6jfhq9RJoFsPEPeHZnE0IpVWsugXK4HaDoqgAGvGv5Jo7efSmRvz/AFWk8MnLRtl4Wbm3FaOl1aeiHhzdUuE249zmsLG0Jpv3q3jNwsZQcdM5cmOWN1ILDvCou12PZBhppJNAKAb3OdYNHMlXbD4ivM/jfM4NwzB5HOeSP6mtaG/JzlJhN0jyoUottWm8FIhWcLJLZooVWVTJoyc0QZ7tRJhYJd+ljZJmkEagGqONEKHRFpZIqXUCBqjYdjagONBUVcBWgrc5d6g0eIjedBxRMVD3fmILgKloNcvInjySfguKb32NFjMpNLg1BqRY8tFkDNQTQaA8SdF03ZTsy/aGGe+BzHSs8LoS7K6l8sgJsWgltb/ZTPazsRNh6EULY4gZHvfGwOf9ruWE5nACg4n5JJjyQaOTbHrW1NffT98EJ7ASRVPxsaY87iRQtBPrQH2z+wW4sa11GS5WxgUY6gBYdaki5rv147kOVCx4+bq68fiV5gy0vqK04cPlf1WPbQKzZsmaSN87QHRtBJcHNIoHZTobU50ralVWuFbck07IaaewzoL1Bv8AVQy11afyQcNNTU7vmrBj7KjOdxF8vAU6qdQwFzyivdQVS5Fbu9juHBBKd9T1j4Qlhwz3trV76u5ZbAfn6rt15V8Itod3iH4cnwytLmDg9uo9W/8AqvVTqVJ3xapUPRGwUqIWHPhRkjRFJtjFyMeAw0BHAHeq520pd5/4j9Fb7U2h3TwMua1dacRwVVj9o940DKBQ11ru6Lqxq0vlPRwQbirgq86JPxT3RuJN8wuLfRBMzu7Hid5uJ4LI/wCS78QQO88OXnX5UVxiu3k2x41ul97+C52Q8loqSbnVXFVSbJ8g6lXTSuTJ9TPNy/XL8WNtQcS2J4yyZDTcSLFFaue2jseV8r3NDaE2vyCMaTe3Q8UYt7dBNqQQsY4sayopS9d43VSWzCx7iHtYBSvC9Rvqou2JMNzf7gtDYs3Ae66Vy8tcx2L01Bx59+S7wmGw4NaMqDY10+aY31XON2NKdzfcK+w0RYxrTqBdYzSXR2cmeMUk1Kxl3nC8i+N+HpicPJmJrG5hbWzS12YEDdUOP9q9ckOhXnvxqwGbDxyjVjteo/wVi3RzSVpnkQ1W0s2fRMLQ4XFo0AFMNUWBTrZBLBSn5JZjdRxFfVFc6zjxPyWGlLpGq0jUYsplRGix2iAfUPhZXtL3MbVwaTmoSWN0c4DjfXdrzBtidmsVi2SnCx94IhV1wDetGgHzONDYJRrhnFbAmhI4GxK7XsnjJsDLIIye7maA52XNklY4mN+UaitjyKynkjB7PQ4bh8maHy9F1/Mjh8YNh46MQ/xA+FolbJUefUtIpTxMrQg0oRvUe1na7EYoOZNHA6ri1pEXiZTKR3bycwJqK1J10Uu2faaLFODo4W5m0L5KVFQXZchcA6lSdefFWvYjb+Dw5kixWFZIHSkunIa8ta4eEZHA2sTY7idyfuYyca5b2cRi8JI0Rxhj6POoByOy2NDShDTWpG8q/wAX2JZBhmY+aZs2Ga4NfG1j43kuo22bzUcd25pvuXRdsu0EWFxWCxWHiacK+F7G5LB8WdpJERAEZDiSOPJWG0O1GzMTh+6lbH/pWxktBe0SF4ADGRQxuqxwqbmlKc01KtlPCpWuirz2/s892rJExrsPhZAGeZ8YuH5i1w8XFuRhpuBPMLnXm9FvB4TK0SOdcGjWgauFySdwFupPVCkddXdttGEoUoq7df5kMS26Z2dJqDpuUXMDqEncpMAagzk7jQw51TTghyvohx4hQ1N0zNQrqWnZ/HGCeKf7jwTzb9oexI9V9BB4dRzTVrgCDxBFQfZfOTdF6t8Mdud5CcO81dF5K6mPh/8Ak/IhKjXFPseg4XRHS2EOqZCk6kc92k/mN/D+ZW4Dh+7bmy5qXsa1T219mmRwcHAUFKEc/wDKROwz98ey6FKDik2ehHJiljUXJqvAHGzxZMsYvvoCBY80llGSu/NT0onp9l0ZUEuNdKIAwr8lMp1r8lpGUUtPua48mNRSjLv3HtleT1KtwVVbPjLWUIoamxVpHouWf1M8/Jucq8se3qQWLFBAKbcoM1WliZJGI3U59VixAEXnw+qpu2+D77BSNpW2b2WLEn0Gup84Twljy07j8kw0rFiqLtHJlVOiQWSOoFpYqMV1AyuFENhrc7lixI2SpBG6LHaLFiCe5qVddgNqyCAZaEaSP3NLGkAuPR1uJ50WLFhmgprZ6Hw/NPG5cr+6/wBtlMC3LlAo1x3i+8Bx9Qrvslh8KcT/AOc8tiEYq2h8T2tu00FhQPBPPmsWLbl1R5vqNz5mOds+2R2g2KEQshgY8uZl81GsLdRSjaE1byCCdjYNre8AFSD4b2AoMxDiSBXMPCaGo30WLFnkfL07npcF9om5dr/49fscpiZ8xrTK1oo1vBo/PeeZKr81StrFqkcSbk3Jkaoofai0sQDMjYmWsotLEzKb2FrZWXZTan+nxMUtaNDqO/A6zvka+ixYhijrZ9AYY3TaxYpO5GSCyEdFtYkUKDQ9UNu/osWIEiNU1CbLaxDGj//Z"
                alt="아무 노래"
                width="100"
              /><a href="#">아무 노래</a>
            </li>
            <li>
              <img
                src="http://image.kmib.co.kr/online_image/2016/0311/201603111758_61110010439591_1.jpg"
                alt="픽미"
                width="100"
              /><a href="#">픽미</a>
            </li>
            <li>
              <img
                src="data:image/jpeg;base64,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"
                alt="독기"
                width="100"
              />
              <a href="#">독기</a>
            </li>
          </ol>
          <p>
            <audio
              src="C:\Users\hobby\Music\Playlists\픽미.mp3"
              controls="controls"
              autoplay="autoplay"
            ></audio>
          </p>
        </td>
      </tr>
    </table>
  </body>
</html>

'Web > html' 카테고리의 다른 글

HTML-(4) (0)	2021.02.03
HTML-(3) (0)	2021.02.03
HTML-(1) (0)	2021.02.02
Web과 html (0)	2021.01.27

HTML-(1)

화이트 하비 2021. 2. 2. 03:11

2021. 2. 2. 03:11

1. 태그

태그: HTML 문서를 구성하고 있는 요소. 이름과 속성(, 속성값)이 있음.

<>와 </>

<>:열린(시작) 태그, </>: 닫힌(종료) 태그

<a href="~~~~"><img src="~~~~~" alt="~~~~~"/></a>

이름: a, img, 속성: href, src, 속성값: "~~~~"

2. HTML버전과 편집 툴

ver.5(HTML5) ~_~, 편집 툴: 메모장, Notepad, atom, VSC, VS

저는 VSC로 하겠습니다

확장프로그램 ctrl+shift+x 눌러도 됨

html 실행을 하기 위해서 vsc에서 open in browser를 설치 합니다

prettier

prettier를 사용하면 난잡한 코드를 정리해준다.

prettier를 찾고 우측 상단에 있는 파일 같이 생긴 아이콘을 누른다.

settings.json에서 "editor.formatOnSave":true를 쓴다.

prettier 작동 오류

"editor.formatOnSave":true는 저장했을 때 자동적으로 코드를 정렬해주게 만든다.

만약 저장했는데 prettier가 제대로 적용되지 않는다면, Default Formatter 때문이다. 이걸 esbenp.prettier-vscode로 바꾸어줘야한다.

settings.json에 "editor.defaultFormatter": "esbenp.prettier-vscode"를 추가하면 된다.

3. 문법

head, title, body, br

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    안녕하세요~<br />
    Helloworld~
  </body>
</html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head></head>: 탭 부분에 써져 있는 문구 지정, 설정 값들, 스타일 시트, JS 등의 환경 설정에 관한 정보가 들어감

<body></body>: 내용

<br />: 줄바꿈(<br>로 써도 됨)

h1,p,a,b,i,sup,ins,del

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <h1>h1 태그</h1>
    <h2>h2 태그</h2>
    <h3>h3 태그</h3>
    <h4>h4 태그</h4>
    <h5>h5 태그</h5>
    <h6>h6 태그</h6>

    <p>주로 본문에 사용되는 태그로서 단락을 구분</p>
    <p>주로 본문에 사용되는 태그로서 단락을 구분</p>
    <p>주로 본문에 사용되는 태그로서 단락을 구분<br />햄바꿈 태그</p>

    <p>주로<b>본문</b>에 사용되는 태그로서 단락을 구분<br />행바꿈 태그</p>

    <p><a href="http://naver.com">네이버</a></p>

    <p><i>KOREA</i></p>
    <p>KOREA<sup>seoul</sup></p>
    <p><ins>KOREA</ins></p>
    <p><del>delete</del></p>
  </body>
</html>

<h1></h1>~<h6></h6>: 제목 글씨

<p></p>: 주로 본문에 사용되는 태그로서 단락을 구분

<a href="~~"></a>: 어떤 사이트, 다른 페이지로 이동할 때 사용(a태그: 앵커 태그로 하이퍼링크가 걸림)

<b></b>: 글씨를 진하게(bold)

<i></i>: 이텔릭체(기울기)

<sup></sup>: 지수의 형태로 뜸

<ins></ins>: 밑줄이 뜸

<del></del>: 가운데 밑줄이 뜸(삭제 표시)

'Web > html' 카테고리의 다른 글

HTML-(4) (0)	2021.02.03
HTML-(3) (0)	2021.02.03
HTML-(2) (0)	2021.02.03
Web과 html (0)	2021.01.27

PREV 이전 1 2 NEXT 다음

Web

문자 선택자

링크 선택자

부정 선택자

'Web > css' 카테고리의 다른 글

반응 선택자

상태 선택자

구조 선택자

전체적인 레이아웃 설정

'Web > css' 카테고리의 다른 글

id(#)와 class(.)

tag, id, class 혼합

속성 선택자

후손 및 자손 선택자

동위 선택자

'Web > css' 카테고리의 다른 글

선택자

tag 선택자

* 선택자(전체 선택자)

전체와 특정태그의 혼합

'Web > css' 카테고리의 다른 글

div를 이용한 레이아웃

시멘틱(semantic)을 이용한 레이아웃

'Web > html' 카테고리의 다른 글

동영상을 출력하는 태그(video)

폼 태그(form)

레이아웃 구성 태그(div, span)

'Web > html' 카테고리의 다른 글

리스트 태그1(ul, li, ol)

리스트 태그2(dl, dt, dd)

dl과 ul의 차이점

표를 나타내는 태그(table, tr, td)

이미지를 출력하는 태그(img)

사운드를 출력하는 태그(audio)

주간 히트 노래 예제

'Web > html' 카테고리의 다른 글

1. 태그

2. HTML버전과 편집 툴

3. 문법

head, title, body, br

h1,p,a,b,i,sup,ins,del

'Web > html' 카테고리의 다른 글

티스토리툴바