기록

*53일차 (CSS - 11~17.position ~ layout) 본문

학원/강의

*53일차 (CSS - 11~17.position ~ layout)

pringspring 2022. 4. 13. 00:22

@CSS - 11.Position

 

*position

  • 문서내에서 요소 배치와 관련된 속성
  • static : 기본값. 문서에 정의된 대로 화면배치 . offset값 무시
  • relative : 문서배치는 static과 동일하나 offset 적용가능
  • absolut : 가장 가까운 static이 아닌 조상요소 기준으로 offset 적용
  • fixed : 브라우저 viewport기준으로 offset적용
  • sticky : 기본적으로 relative처럼 작동하다 특정 offset에 다다르면 fixed처럼 작동
<!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>position</title>
</head>
<body>
  <h1>position</h1>
  <h2 class="position-sticky">sticky</h2>
  <h2>static</h2>
  <!-- div.outer>.first+.second+.third -->
  <div class="outer">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
  </div>

  <h2>relative</h2>
  <div class="outer">
    <div class="first"></div>
    <div class="second position-relative"></div>
    <div class="third position-relative"></div>
  </div>

  <h2 style="margin-top: 200px;">absolute</h2>
  <div class="outer position-relative">
    <div class="first"></div>
    <div class="second position-absolute"></div>
    <div class="third position-absolute"></div>
  </div>

  <h2>fixed</h2>
  <div class="fourth position-fixed"></div>

  <style>
  .position-fixed {position: fixed;}
  .position-relative {position: relative;}
  .position-absolute {position: absolute;}
  .position-sticky {
    position: sticky;
    top: 0px;
    background-color: yellowgreen;
    z-index:9999;
  }
  .fourth {
    width: 100px;
    height: 100px;
    background-color: tomato;
    bottom: 50px;
    right: 50px;
  }


  .outer {
    background-color: lightgray;
    border: 1px solid #000;
  }
  .first {
    width: 300px;
    height: 300px;
    background-color: thistle;
  }
  .second {
    width: 200px;
    height: 200px;
    background-color: violet;
    top: 50px;
    left: 50px;
  }
  .third {
    width: 100px;
    height: 100px;
    background-color: magenta;
    top: 100px;
    left: 100px;
  }
  </style>




  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

@CSS - 12.table

<!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>table</title>
</head>
<body>
  <h1>table</h1>
  <table>
    <thead>
      <tr>
        <th>브라우져명ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ</th>
        <th>제조사</th>
        <th>홈페이지</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>크롬</td>
        <td>Google</td>
        <td>https://google.com</td>
      </tr>
      <tr>
        <td>사파리</td>
        <td>apple</td>
        <td>https://apple.com</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">총 브라우져 수</td>
        <td>2</td>
      </tr>
    </tfoot>
  </table>
  <style>
  table {
    border: 1px solid #000;
    border-collapse: collapse; /* separate이 기본값 */
    width: 500px;
    height: 300px;
    table-layout: fixed; /* 테이블 길이 고정 */
  }
  th, td {
    white-space: nowrap;
    overflow-x: scroll;
    border: 1px solid #000;
    vertical-align: top;
    text-align: center;
  }
  </style>

  <div class="box">
    <span>안녕</span>
  </div>
  <div class="square">
    <span>안녕</span>
  </div>
  <style>
  .square {
    width: 100px;
    height: 100px;
    background-color: hotpink;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }  
  .box {
    width: 100px;
    height: 100px;
    background-color: greenyellow;
    margin: 100px auto;
    display: table;
    text-align: center;
  }
  .box span{
    display: table-cell;
    vertical-align: middle;
  }
  </style>



  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

@CSS - 13.flexbox

 

 

*부모요소 flex-container

  • flex-direction : row(기본값) | column
  • justify-content : 메인축 정렬
  • align-items : 크로스축 정렬
  • flex-wrap : 줄바꿈 여부 nowrap(기본값) | wrap
  • align-content : 여러줄 flex-container 설정
  • flex-flow

 

*자식요소 flex-item

  • flex
  • flex-grow
  • flex-shrink
  • flex-basis
  • order
<body>
  <h1>flexbox</h1>

  <!-- ul.test.test1>li{$}*3 -->
  <ul class="test test1">
    <!-- li{$}*10 -->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  <style>
  ul.test {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    border: 1px solid red;
    background-color: lightgray;
    height: 70vh;
    padding-left: 0;
  }
  ul.test li {
    width: 100px;
    height: 100px;
    background-color: orangered;
    margin: 8px;
  }
  </style>

  
</body>

 

 

 

@CSS - 14.transform

<!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">
  <!-- prefix.js 연결 -->
  <script src="./js/prefixfree.min.js"></script>
  <title>transform</title>
</head>
<body>
  <h1>transform</h1>

  <div class="wrapper">
    <!-- (img.transform.transform$+hr)*3 -->
    <img src="../sample/image/flower1.PNG" alt="" class="transform transform1">
    <hr>
    <img src="../sample/image/flower2.PNG" alt="" class="transform transform2">
    <hr>
    <img src="../sample/image/flower3.PNG" alt="" class="transform transform3">
    <hr>
  </div>
  <style>

  .wrapper {text-align: center;}    
  .wrapper img {width: 200px; margin: 100px;}
  .transform1 {
    -webkit-transform: translate(-50px, -30px);
    -moz-transform: translate(-50px, -30px);
    -o-transform: translate(-50px, -30px);
    -ms-transform: translate(-50px, -30px);
    transform: translate(-50px, -30px); /* translate 이동 */
  }
  .transform2:hover {
    -webkit-transform: scale(1.5, 1.5);
    -moz-transform: scale(1.5, 1.5);
    -o-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
  }
  .transform3:hover {
    transform: rotate(-350deg);
  }
  </style>



  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

*transform 변형

  • 요소이동
  • 확대/축소
  • 회전
  • 비틀기

 

*브라우저별 접두사 (Vendor Prefix)

  • css3표준을 아직 지원하지 않는 브라우저에 해당기능 지원을 위한 문법
  • 해당 브라우저에 해당하는 vendor prefix를 자동으로 실행

ex)

  • webkit : 크롬/사파리/엣지
  • moz : 파이어폭스
  • o : 오페라
  • ms : IE

→ 브라우저 vendor prefix문법 먼저 작성 후 표준 문법을 작성한다.

 

  • 양수 : 시계방향 
  • 음수 : 반시계방향

 

@CSS - 15.transition

<!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>transition</title>
</head>
<body>
  <h1>transition</h1>
  <div class="box"></div>
  <style>
  .box {
    width: 100px;
    height: 100px;
    background-color: tomato;
    border: 2px solid #000;
    transition-duration: 1s;
    transition-property: transform; /* all 모든 속성(기본값) */
    transition-delay: 0s; /* 지연시간 */
    transition-timing-function: ease-in;
  }
  .box:hover {
    background-color: greenyellow;
    /* width: 200px; */
    /* height: 200px; */
    transform: translate(200%, 0);
  }
  </style>

  <h2>Card</h2>
  <div class="tile">
    <h1>Hello World</h1>
    <h2 class="text-transition">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
    <p class="text-transition">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aliquid rerum possimus vero minus nulla praesentium. Aliquam facilis accusantium non laboriosam, praesentium officiis, provident nulla perferendis eum neque pariatur enim!</p>
  </div>
  <style>
  .tile {
    width: 380px;
    height: 380px;
    margin: 10px;
    padding: 30px;
    background-color: #99aeff;
    cursor: pointer; /* 손가락 모양 */
    box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, .4);
    color: white;
    overflow: hidden;
  }
  .tile h1 {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
  }
  .tile h2 {
    font-weight: 100;
    font-style: italic;
    transform: translateX(-380px);
  }
  .tile p {
    line-height: 27px;
    transform: translateX(380px);
    opacity: .7;
    transition-delay: .15s;
  }
  .text-transition {
    transition: all 0.6s;
  }
  .tile:hover .text-transition {
    transform: translateX(0);
    opacity: 1;
  }
  </style>

  <div class="wrapper">
    <img src="../sample/image/hyunta.jpg" alt="">
  </div>
  <style>
  .wrapper {
    border: 1px solid gray;
    width: 300px;
    height: 280px;
    overflow: hidden;
  }
  .wrapper img {
    width: 100%;
    transition: .3s;
  }
  .wrapper:hover img {
    transform: scale(1.1);
  }
  </style>


  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

 

@CSS - 16.animation

*animation-name

<!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>animation</title>
</head>
<body>
  <h1>animation</h1>
  <div class="box"></div>
  <hr>
  <img class="dog-img" src="../sample/image/hyunta.jpg" alt="">
  <style>
  .dog-img {
    width: 100px;
    border-radius: 50%;
    /* animation-name: myframes;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-delay: 3s; */
    animation: myframes 1s 3s infinite alternate;
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    border: 1px solid #000;
    margin: 100px;
  }

  body:hover .box {
    animation-name: myframes;
    animation-duration: 2s;
    animation-direction: alternate;
    /* animation-iteration-count: infinite; */
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  /* translate 시작점 대비 상대위치로 작성할 것 */
  @keyframes myframes {
    25% {
      transform: translate(100px, 0);
    }
    50% {
      transform: translate(100px, 100px);
    }
    75% {
      transform: translate(0, 100px);
    }
    100% {
      transform: translate(0, 200px);
    }
  }
  </style>





  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

@CSS - 17.html5_semantic_tag

*semantic  : 의미가 있는

  • html5의 시맨틱 태그는 태그명을보고 해당 내용을 유추할 수 있도록 하는 표준

*header

  • 페이지 전체 헤더 또는 article 태그의 헤더

*nav

  • 네비게이션링크 정보
  • 위치가 자유롭다
  • header안, aside안, footer, 단독사용이 가능하다

*main

  • 본문영역
  • 주요컨텐츠
  • 한 페이지에 한번만 사용할 것

*article

  • 실제내용
  • 독립적인 단위로 작성
  • 포스트, 잡지/기사내용 블로그 글
  • 내부에 header/footer를 가질 수 있다

*section

  • 내용상 연관된 컨텐츠를 그룹핑
  • 여러 article 그룹핑, article하위에 여러 section태그 또한 가능
  • div는 css/javascript 처리를 위한 그룹핑일때 사용할 것

*aside

  • 부가정보
  • 광고,페이지목록,날씨,달력,nav를 포함

*footer

  • 페이지 하단부
  • 저작권정보,nav(사이트맵),주소,연락처

 

 

@CSS - 17.layout_html4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div             { padding:10px;}
#container        { background-color:#F0F0F0; width:960px; margin:0 auto; padding:10px; }
#header            { background-color:#908886; height:100px; }
#content        { background-color:#F5F5F5; float:left; width:640px; height:400px; }
#sideinfo        { background-color:#DCDAD9; float:right; width:280px; height:400px; }
#footer            { background-color:#555555; clear:both; height:100px; }
</style>
<title>html5이전 페이지 레이아웃</title>
</head>
    <body>
        <div id="container">
            <div id="header">Header</div>
            <div id="content">Content</div>
            <div id="sideinfo">SideInfo</div>
            <div id="footer">Footer</div>
        </div>
    </body>
</html>

'학원 > 강의' 카테고리의 다른 글

*55일차  (0) 2022.04.14
*54일차 (Javascript)  (0) 2022.04.13
*52일차 (CSS - 6~9.box_model ~ display)  (0) 2022.04.11
*52일차 (CSS - 2~5.selector_priority ~align)  (0) 2022.04.11
*51일차 (CSS -1.selector)  (0) 2022.04.07
'학원/강의' Related Articles more