ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • css태그정리:포지셔닝_210331(수)
      HTML&CSS 2021. 7. 21. 23:24

      CSS 포지셔닝

      ​☆box-sizing(width, height) 속성

      : content-box(안의 내용을 적은 박스), border-box(=박스 전체 크기)

      ​margin > border > padding > content

      ​

      ☆float 속성

      :배치 위치

      float: left | right | none

      ​

      ☆clear 속성

      :float을 무효화

      clear: left | right | both

      지정한 자리에서 움직이지 않는다.

       

      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
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      <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>box</title>
        <style>
          div {
            padding: 20px;
            width: 200px;
            height: 200px;
            /*margin:10px auto;*/
          }
       
          #box1 {
            background-color: blanchedalmond;
            float: left;
          }
       
          #box2 {
            background-color: rgb(37, 94, 148);
            float: left;
          }
       
          #box3 {
            background-color: rgb(126, 33, 79);
            float: left;
          }
       
          #box4 {
            background-color: rgb(7, 168, 20);
            float: right;
          }
       
          #box5 {
            background-color: rgb(233, 213, 101);
            /* float: right; */
            clear: both;
          }
          
        </style>
       
      </head>
       
      <body>
        <div id="box1">박스1</div>
        <div id="box2">박스2</div>
        <div id="box3">박스3</div>
        <div id="box4">박스4</div>
        <div id="box5">박스5</div>
      </body>
       
      </html>
      		 cs

       

      ☆ position 속성

      겹치기, 고정하기 등

      기본적으로 박스는 왼쪽위 모서리가 시작점이다.

      top, left: 위로부터 아래로 움직임, 왼쪽으로부터 오른쪽으로 움직임

      ​

      ☆ visibility 속성

      : 특정 요소를 화면에 보이거나 보이지 않게 설정하는 속성

       

      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
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      <!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>
        <style>
          .box1 {
            width: 100px;
            background: #ffd800;
            margin-right: 10px;
            padding: 20px;
            float: left;
          }
       
          .box2 {
       
            position: relative;
            left: -50px;
            top: 30px;
       
            width: 300px;
            background: #47bac2;
            padding: 20px;
            float: left;
          }
       
          #wrap {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
          }
       
          .box {
            position: absolute;
            width: 50px;
            height: 50px;
            background: #0094ff;
          }
       
          /* 왼쪽 상단 */
          #crd1 {
            top: 0;
            left: 0;
            visibility: hidden;
          }
       
          /* 오른쪽 상단 */
          #crd2 {
            top: 0;
            right: 0;
          }
       
          /* 오른쪽 하단 */
          #crd3 {
            bottom: 0;
            right: 0;
          }
       
          /* 왼쪽 하단 */
          #crd4 {
            bottom: 0;
            left: 0;
          }
       
          /* 정가운데 */
          #crd5 {
            top: 120px;
            left: 120px;
          }
       
          #flexbox {
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            position: fixed;
            top: 0;
            right: 10px;
          }
        </style>
       
      </head>
       
      <body>
        <section>
          <div class="box1">박스1</div>
          <div class="box2">박스2</div>
        </section>
        <section>
          <div id="wrap">
            <div class="box" id="crd1">1</div>
            <div class="box" id="crd2">2</div>
            <div class="box" id="crd3">3</div>
            <div class="box" id="crd4">4</div>
            <div class="box" id="crd5">5</div>
          </div>
        </section>
        <div id="flexbox"></div>
       
       
      </body>
       
      </html>
      		 cs

       

      ☆ column 속성

      :다단으로 편집하기.

      column-count: 3;

      3개 단

      column-gap: 60px;

      단 사이의 간격

      column-rule: 1px dotted gray;

      단 사이의 줄

      ​

      break-before: column;

      이 스타일이 들어간 요소부터 단으로 넘어감.

       

      ☆ border 속성

      border-collapse

      가장자리 합치기

      ​border-spacing

      가장자리끼리 간격

       

      웹과 멀티미디어

      비디오: mp4, webm, ogv

      오디오: mp3, ogg

      등을 넣을 때 쓰이는 코드들

      ​

      <audio>

      오디오 넣을때 쓰는 코드

      ​

      <video>

      영상 넣을때 쓰는 코드

      ​

      ☆ 속성

      controls: 재생바 보여서 컨트롤하게 하는 기능

      loop: 반복

      muted: 소리꺼진체 처음 재생

      autoplay: 처음에 자동재생

      ​

      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
      <!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="media/bgsound.mp3" controls loop></audio>
       
        <video src="media/Fireworks.mp4" controls></video>
        <video src="media/Fireworks.webm" controls></video>
       
        <video controls autoplay loop muted>
          <source src="media/Painting.mp4" type="vidio/mp4">
          <source src="media/Painting.webm" type="vidio/webm">
          <track src="media/Painting.vtt" srclang="" label="Korean" default>
        </video>
       
      </body>
       
      </html>
      		 cs

      <link> 태그: 스타일시트 불러올 때

      ☆속성

      href: 주소(다른 폴더에 있을땐 "폴더명/파일이름")

      rel: 어떤 파일

      type: 어떤 종류

      1
      <link href="css/box_style.css" rel="stylesheet" type="text/css">
      		 cs

       

       

      다재다능한 CSS3 선택자

      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
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      <!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>
       
        <style>
          /* section의 하위 ul의 모든 내용이 선택됨
          section ul {
            border: 1px solid gray;
          } */
       
          /* 자식 선택자 */
          section>ul {
            border: 1px solid gray;
          }
       
          /* 인접 형제 선택자 */
          h2~li {
            border: 1px solid red;
          }
       
       
          /* 속성 선택자 */
          a[href] {
            background: yellow
          }
       
          a[target="_blank"] {
            color: tomato;
          }
       
          [class~="button"] {
            border: 2px solid green;
            box-shadow: rgba(0, 0, 0, 4);
          }
       
          /* 특정 단어가 포함되 있는 요소 선택 */
          a[title |="cake"] {
            color: violet;
          }
       
          /* 특정값으로 시작하는 문자 선택하기 */
          a[title^="t"] {
            color: brown;
          }
       
          /* 특정값으로 끝나는 문자 선택하기 */
          a[title $="d"] {
            color: yellowgreen;
          }
       
          /* 특정값이 포함되어 있는 문자 선택하기 */
          a[title *="re"] {
            background: turquoise;
          }
       
          /* 가상 클래스와 가상 요소 */
          a:link {
            text-decoration: none;
          }
       
          a:hover {
            background: coral;
          }
       
          input:disabled {
            background: #ddd;
          }
       
          input:checked+span {
            color: blue;
          }
        </style>
       
      </head>
       
      <body>
       
        <section>
          <h1>스타벅스메뉴</h1>
          <ul>
            <h2>커피 와 음료</h2>
            <li>커피
              <ul>
                <li><a href="#">에스프레소</a></li>
                <li><a href="#" target="_blank">라떼</a></li>
                <li><a>프라프치노</a></li>
              </ul>
            </li>
            <li>차
              <ul>
                <li class="button">민트</li>
                <li class="button flat">허브</li>
                <li>밀크티</li>
                <li>허비스커스</li>
              </ul>
            </li>
            <h2>음식</h2>
            <li>케이크
              <ul>
                <li><a title="cake">티라미슈</a></li>
                <li><a title="cake-1">딸기생크림</a></li>
                <li><a title="cream">오렌지생크림</a></li>
              </ul>
            </li>
            <li>샌드위치
              <ul>
                <li><a title="sand">에그샌드위치</a></li>
                <li><a title="tab">클럽</a></li>
                <li>베이컨샌드위치</li>
              </ul>
            </li>
          </ul>
        </section>
       
        <fieldset>
          <section>
            <p>이 달에 신청할 과목을 선택하세요.</p>
            <label><input type="radio" name="subject" value="speaking"><span>회화</span></label>
            <label><input type="radio" name="subject" value="grammer"><span>문법</span></label>
            <label><input type="radio" name="subject" value="writing"><span>작문</span></label>
          </section>
        </fieldset>
       
       
      </body>
       
      </html>
      		 cs

      가상 클래스와 가상 요소

      링크에 방문하기 전에 뜨는 요소들(a 링크 아직 누르기 전일 때 마우스 커서 올리면 보이는 요소들)

      link

      visited

      active

      focus

      hover

      ​

      구조 가상 클래스

      n, odd(홀수) , even(짝수)

      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
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      <style> 
         table {
            width: 100px;
            margin: 0px auto;
            border: 2px solid black;
            border-collapse: collapse;
          }
       
          td {
            text-align: left;
            padding: 10px;
            padding-left: 20px;
          }
       
          /* 구조 가상 클래스 지정 */
          /* 앞에서부터 n번째 자식 요소 
          n번째 :nth-child(3)
          n번째 홀수:nth-child(odd), (2n+1)
          n번째 짝수:nth-child(even)(2n)
          첫번째: first-child
          마지막: last-child
          */
       
          table tr:nth-child(odd) {
            background: lightgray;
          }
       
          table tr:nth-child(odd) {
            background: lightgray;
          }
        </style>
       
      </head>
       
      <body>
        <section>
          <table>
            <tr>
              <td>블루베리</td>
            </tr>
            <tr>
              <td>귀리</td>
            </tr>
            <tr>
              <td>토마토</td>
            </tr>
            <tr>
              <td>시금치</td>
            </tr>
          </table>
        </section>
       
      </body>
       
      		 cs
      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
      <style> 
          li.hot:after {
            content: "NEW!";
            font-size: x-small;
            padding: 2px 4px;
            margin: 0 10px;
            border-radius: 2px;
            background-color: red;
            color: #fff;
          }
        </style>
       
      </head>
       
      <body>
       
        <section>
          <ul>
            <li class="hot">에그샌드위치</li>
            <li>클럽</li>
            <li class="hot">베이컨샌드위치</li>
          </ul>
        </section>
       
      </body>
       
       
      		 cs

      반응형 웹이란

      1.모바일 기기와 웹 디자인

      2. 가변 그리드 레이아웃

      3. 가변요소

      ​

      뷰포트(viewport)

      실제 내용이 표시되는 영역

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      ​

      ​

      그리드 시스템(grid system)

      ​

      고정 그리드: 화면 너비를 일정하게 고정하고 레이아웃 만듦(안쓸거임)

      ​

      <가변>

      가변 그리드: 화면 너비를 % 같은 가변 값으로 지정.

      ​

      가장 큰 부모태그를 98%정도로 맞추고

      하위태그들은 100%로 맞추면 된다.

      ​

      em단위

      부모 요소 폰트의 영향을 받아 배율

      ​

      rem 단위(더 많이 채택)

      처음 갖고 있는 폰트에서 배율

      ​

      가변 이미지: 최소와 최대를 지정도 가능

      가변 비디오: 동일

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
          /* 모바일화면 */
          body {
            background-color: green;
          }
       
          /* PC화면 */
          @media screen and (max: width 1024px) {
            body {
              background-color: red;
            }
          }
       
          /* Tablet화면 */
          @media screen and (max: width 768px) {
            body {
              background-color: yellow;
            }
          }
      		 cs

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

      HTML에 대한 이해_210406(화)  (0) 2021.07.21
      css태그정리:transition등_210402(금)  (0) 2021.07.21
      css태그정리:transform등_210401(목)  (0) 2021.07.21
      css태그정리_210330(화)  (0) 2021.07.21
      HTML강의(visual studio code), 기초태그_210329(월)  (0) 2021.07.21

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바