CSS 기초 및 속성 2

금송·2024년 8월 14일
CSS이론
0

이론

목록 보기
5/17
post-thumbnail

CSS Box Model: 웹 레이아웃의 기초

CSS Box Model은 웹 페이지 레이아웃의 근가을 이루는 중요한 개념

모든 요소는 하나의 박스로 취급,

요소 : 텍스트, 사진 등 보여줄 대상

패딩 : 요소 주변 영역을 감쌈, 단축 속성으로 네 방향의 값을 한번에 지정 가능

테두리 : 요소와 패딩을 감싸는 테두리

마진 : 테두리 밖의 영역을 감쌈, 단축 속성으로 네 방향의 값을 한번에 지정 가능

.box1 {
  width: 100px;
  height: 100px;
  background: aqua;
}
.box2 {
  background-color: blue;
  /* 상 우 하 좌, 시계방향, padding은 테두리 안쪽의 여백 */
  padding: 10px 10px 10px 10px;
  /* 상 좌우 하 */
  padding: 10px 10px 10px;
  /* 상하 좌우 */
  padding: 10px 10px;
  /* 상하좌우 여백값이 같을때 한번에 작성*/
  padding: 50px;
  /* top right left bottom 각각 따로 지정 가능 */

  /* 상 우 하 좌, 시계방향, margin은 테두리 바깥쪽의 여백 */
  margin: 30px 30px 30px 30px;
  /* 상 좌우 하 */
  margin: 30px 30px 30px;
  /* 상하 좌우 */
  margin: 30px 30px;
  /* 상하좌우 여백값이 같을때 한번에 작성*/
  margin: 30px;
}

.box3 {
  height: 100px;
  background-color: antiquewhite;
}
.box3 p {
  width: 200px;
  background-color: aqua;
  /* 가운데 배치 */
  /*margin: auto;*/
  /* 오른쪽 배치 */
  margin-left: auto;
}

.border1,.border2,.border3 {
  display: inline-block;
  padding: 15px 25px;
}
.border1 {
  /* 중간은 보더의 스타일 지정 */
  border: 5px solid black;
}
.border2 {
  border: 5px dashed black;
}
.border3 {
  border: 5px dotted black;
}

box-sizing

기본값 content-box

border-box로 설정하면 테두리와 패딩을 포함한 요소의 총 너비와 높이를 계산

div {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    margin-bottom: 20px;
}

.box1, .box3 {
    padding: 20px;
    border: 10px solid navy;
}
.box1 {
    /* 테두리와 여백 포함한 넓이 길이가 div에 설정한 너비,높이 */
    box-sizing: border-box;
}
.box3 {
    /* div에 설정한 너비,높이 + 여백, 테두리 */
    box-sizing: content-box;
}

.radius {
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
    /* 각 모서리에서 해당 값만큼 깎아주는 속성 */
    border-radius: 30px;
}
  • 실습 001 border-radius
    실습 001
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: mediumpurple;
        }
        .box + .box {
            margin-left: 20px;
        }
        .box.n1 {
            border-radius: 50%;
            /*border-radius: 50px;*/
        }
        .box.n2 {
            border-radius: 10px;
        }
        .box.n3 {
            border-radius: 100% 0 0 0;
        }
        .box.n4 {
            border-radius: 100% 0 100% 0;
            /*border-radius: 100% 0;*/
        }
        .box.n5 {
            border-radius: 0 50% 0 50%;
            /*border-radius: 0 50%;*/
        }
        .box.n6 {
            height: 50px;
            border-radius: 50px 50px 0 0;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div class="box n1"></div>
    <div class="box n2"></div>
    <div class="box n3"></div>
    <div class="box n4"></div>
    <div class="box n5"></div>
    <div class="box n6"></div>
</body>
</html>
  • 실습 002 border-radius
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 60px;
        box-sizing: border-box;
      }
      .n1 {
        color: #fff;
        background-color: #353f51;
        border-top: 5px solid #4a5368;
        border-left: 5px solid #4a5368;
        outline-color: black;
        outline-style: solid;
        outline-width: 5px
      }
      .n2 {
        color: #fff;
        background-image: linear-gradient(90deg, rgba(128,116,255,1) 0%, rgba(49,98,255,1) 100%);
        background-clip: padding-box;
        border: 5px dashed #e9d7ff;
        border-radius: 50px;
      }
      .n3 {
        border: 5px solid #f0f0f0;
        border-radius: 0 30px 30px 30px;
        box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
      }
      /*  선생님 풀이 */
      .box {
        display: inline-block;
        padding: 15px 25px;
      }
      .n1 {
        background-color: #343f50;
        color: #fff;
        border:5px solid black;
        box-shadow: inset 5px 5px 0 0 #4a5568;
      }
      .n2 {
        background:linear-gradient(90deg, #834df6 0%, #336df2 100%);
        color: #fff;
        border-radius: 50px;
        border: 5px solid #e6d6ff;
        background-clip: padding-box;
      }
      .n3 {
        border-radius: 0 50px 50px 50px;
        border: 2px solid #ddd;
        box-shadow: 5px 5px 5px 0 #eee;
      }
    </style>
</head>
<body>
    <p class="box n1">Hello🙌</p>
    <p class="box n2">Hello🙌</p>
    <p class="box n3">Hello🙌</p>
</body>
</html>

display

CSS에서 레이아웃을 결정짓는 가장 중요한 속성 중 하나

block : 요소 전후에 줄 바꿈 생성

inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소

inline-block : 인라인처럼 텍스트 흐름에 따라 배치되지만 설정값 설정 가능

flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정

gird : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해(2차원적) 설정

none : 접근성 트리에서 해당 요소 제거

CSS 속성으로 시각적인 부분이 바뀌었을 뿐 태그 자체의 요소가 블록 레벨로 바뀐 것은 아님

/* p태그는 블록레벨 요소, 전체 너비를 차지, 줄바꿈 */
p {
  background-color: aqua;
  display: inline;
}
/* span 태그는 인라인레벨 요소 */
span {
  background-color: blueviolet;
  /* 인라인 레벨 요소는 width, height, 상하 margin이 적용되지 않음 */
  display: block;
  width: 300px;
  height: 100px;
  margin: 30px;
}

/* em 태그는 인라인레벨 요소 */
em {
  background-color: coral;
  width: 100px;
  /*줄바꿈은 일어나지 않고, width, height, 상하 margin이 모두 적용 가능*/
  display: inline-block;
}

overflow

요소의 컨텐츠가 그 요소의 크기를 초과할때 어떻게 처리할지 지정

div {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  margin-bottom: 300px;
}
.visible {
  /*
    overflow 기본값
    overflow는 overflow-x, overflow-y로 각각 제어 가능
  */
  overflow: visible;
}
.hidden {
  /* 컨텐츠 영역 외부로 나오는 내용을 숨김 처리 */
  overflow: hidden;
}
.scroll {
  overflow: scroll;
}
.auto {
  /* 컨텐츠 영역 외부로 내용이 넘칠때에만 스크롤 생성 */
  overflow: auto;
}

background

.background {
  width: 500px;
  height: 300px;

  background-color: aquamarine;
  /* 배경에 이미지 적용 */
  background-image: url("https://images.khan.co.kr/article/2024/01/04/news-p.v1.20240104.e6a9b3f30bec4331a02e5856197a069b_P1.jpg");
  /* 배경 이미지 크기 조정 */
  /*background-size: 200px 100px;*/
  /* 이미지 비율을 유지하면서 여백 있게 최대한 꽉차게 수정 */
  background-size: contain;
  /* 이미지 비율을 유지하면서 여백 없게 꽉차게 수정 */
  /*background-size: cover;*/
  /* 이미지를 반복할지 안할지 */
  background-repeat: no-repeat;
  /*background-position: 100px 200px;*/
  background-position: center;
  /*background-position: top;*/
  /*background-position: left;*/
}
.gradient {
  width: 500px;
  height: 300px;

  background: linear-gradient(145deg, #c581fe, #f49eff, #ded9f7);
}

CSS 초기화

브라우저마다 최대한 동일하게 보이기 위해서 CSS 속성들을 초기화 시킴

  • 에릭 마이어의 reset CSS
    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

 a {
     color: inherit;
     text-decoration: none;
 }
 button {
     border: none;
     padding: 0;
     background: none;
 }
button:hover {
    cursor: pointer;
}

CSS 배치

css position

static - 포지션의 기본값

relative - 자신이 있어야 하는 위치에 상대적인 위치, 다른 컨텐츠들의 위치에 영향을 주지 않음

absolute - 가장 가까운 조상 요소 중 position 속성이 static이 아닌 값을 가진 요소를 기준으로 위치를 잡고 아니면 body의 기준으로 위치를 잡음

fixed - 화면의 특정 위치에 붙어서 움직이지 않고 고정, 뷰포트 기준으로 위치를 잡음

sticky - 최근에 추가된 속성, 스크롤을 할때 적용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:not([class="parent"]) {
            width: 100px;
            height: 100px;
            background-color: aqua;
            opacity: .7;
        }
        .absolute {
            background-color: antiquewhite !important;
            position: absolute;
            top: 0;
            left: 0;
        }
        .parent {
            position: relative;
            margin: 50px;
        }
        .fixed {
            position: fixed;
            top: 30px;
            right: 30px;
        }
        .sticky {
            position: sticky;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="static">static</div>
        <div class="static">static</div>
        <div class="static">static</div>
        <div class="static">static</div>
        <div class="static">static</div>
        <div class="absolute">absolute</div>
        <div class="fixed">fixed</div>
    </div>

    <div class="absolute">absolute</div>
    <div class="sticky">sticky</div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi consequuntur delectus, doloribus inventore ipsa ipsum itaque laborum nam nulla odio quaerat, quia, quibusdam quod reiciendis saepe sed totam voluptates?
</body>
</html>

요소 쌓임 맥락

요소를 겹칠때는 3차원 적인 고려가 필요

z-index

스테틱을 제외한 포지션 속성값이 적용된 요소의 z축 순서를 결정할 수 있으며 더 요소가 큰 값이 위로 작은 값이 아래로 간다.

포지션이 없으면 만들어진 순서대로 z-index가 부여되고 부모의 z-index 값은 auto

자식이 z-index가 있고 부모가 auto 일땐 독립적

자식이 z-index가 있고 부모가 z-index가 있을땐 부모에 맞춤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:not([class="parent"]) {
          width: 100px;
          height: 100px;
          background-color: blue;
          opacity: .5;
        }
        .parent {
          z-index: 3;
        }
        .box1 {
          position: absolute;
          top: 30px;
          left: 30px;
        }
        .box4 {
          position: absolute;
          top: 20px;
          left: 20px;
          z-index: 1;
          background-color: crimson !important;
        }
    </style>
</head>
<body>
    <div class="parent">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>

    <div class="box4"></div>
</body>
</html>

flex

현대 웹 디자인에서 가장 많이 사용하고 강력한 레이아웃 도구 중 하나

무조건 부모요소와 자식요소를 가지고 있어야함

부모 - flex-container

자식 - flex-item

flex-direction : 주축의 방향을 설정 row 가 기본값

.container {
  background-color: #eee;
  height: 500px;
  padding: 10px;
  display: flex;
  /* 세로정렬 */
  flex-direction: row;
  /* 세로반대정렬 */
  /*flex-direction: row-reverse;*/
  /* 가로정렬 */
  /*flex-direction: column;*/
  /* 가로반대정렬 */
  /*flex-direction: column-reverse;*/
  /* 중앙정렬 */
  justify-content: center;
  /* 왼쪽정렬 */
  justify-content: flex-start;
  /* 오른쪽정렬 */
  justify-content: flex-end;
  /* 아이템 사이 동일한 간격 정렬 */
  justify-content: space-between;
  /* 아이템 좌우에 동일한 간격 정렬, 양쪽 여백 x 2 = 아이템 사이*/
  justify-content: space-around;
  /* 아이템 좌우에 동일한 간격 정렬, 양쪽 여백 = 아이템 사이*/
  justify-content: space-evenly;

  /* 아이템 높이 설정 x, 부모 요소 높이에 맞춰서 늘어남 */
  align-items: stretch;
  /* 아이템 상단 위치 */
  align-items: flex-start;
  /* 아이템 하단 위치 */
  align-items: flex-end;
  /* 아이템 중간 위치 */
  align-items: center;

  gap: 30px;
  flex-wrap: nowrap;
  flex-wrap: wrap;
  flex-wrap: wrap-reverse;
}
.item {
  width: 100px;
  /*height: 100px;*/
  background-color: aquamarine;
  border:1px solid #000;

  text-align: center;
  line-height: 100px;
  font-size: 32px;
}
  • 실습 003 flex
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .wrap {
        background-color: gainsboro;
        width: 240px;
        height: 240px;

        display: flex;
        /*justify-content: flex-end;*/
        /*align-items: center;*/
      }

      .wrap > div {
        color: white;
        line-height: 70px;
        text-align: center;
        font-size: 20px;
        width: 70px;
        height: 70px;
      }

      .blue {
        background-color: #4967d8;
      }
      .red {
          background-color: red;
          flex: 1;
      }
      .green {
          background-color: greenyellow;
          flex: 2;
      }
    </style>
</head>
<body>
  <div class="wrap">
    <div class="blue">A</div>
    <div class="red"></div>
    <div class="green"></div>
  </div>
</body>
</html>
  • 실습 004 flex 구획나누기
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Layout</title>
  <style>
    * {
      box-sizing: border-box;
      color: white;
    }
    .container {
      width: 700px;
      font-size: 20px;
    }
    header,
    footer {
      height: 120px;
      border: 15px solid #466ca6;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    header {
      background-color: #98c8f4;
      border-bottom: 0;
    }
    footer {
      background-color: #f7776b;
      border-top: 0;
    }
    .main {
      height: 400px;
      display: flex;
    }
    section,
    aside {
      border: 15px solid #466ca6;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    section {
      background-color: #495375;
      flex: 2;
      border-right: 0;
    }
    aside {
      color: #495375;
      background-color: #c7f445;
      flex: 1;
    }
    /* 선생님 풀이 */
    /* .container {
      width: 500px;
      height: 400px;
      background-color: #000;
      padding: 10px;

      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    header {
      background-color: skyblue;
    }
    section {
      background-color: aquamarine;
    }
    aside {
      background-color: yellowgreen;
    }
    footer {
      background-color: hotpink;
    }
    header,
    section,
    aside,
    footer {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    .main {
      flex: 1;
      display: flex;
      gap: 10px;
    }
    section {
      flex:2;
    }
    aside {
      flex: 1;
      color: black;
    } */
  </style>
</head>
<body>
<div class="container">
  <header>header</header>
  <div class="main">
    <section>section > article</section>
    <aside>aside</aside>
  </div>
  <footer>footer</footer>
</div>
</body>
</html>
  • 실습 005 로그인 페이지
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인</title>
    <link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="./reset.css">
    <style>
        .icon { max-width: 16px; }
        .login_box {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
        }
        .inner_box {
            width: 350px;
            border: 1px solid #DBDBDB;
            border-radius: 5px;
            padding: 20px 16px;
        }
        .inner_box p, .inner_box a,
        .inner_box .b_box {
            font-size: 12px;
            font-weight: 400;
            margin: 0;
        }
        .inner_box > a {
            background-color: #711BFF;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
            padding: 10px 0;
            margin-top: 16px;
            color: #fff;
            border-radius: 4px;
            font-weight: 500;
        }
        .inner_box > a > img { max-width: 64px }
        .inner_box .b_box {
            display: flex;
            justify-content: space-between;
            margin-top: 16px;
            color: #767676;
        }
        .inner_box .b_box *:not(a+a) {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
        }
        .inner_box .b_box .l_box { gap: 12px; }
        .inner_box .b_box .l_box a + a {
            position: relative;
        }
        .inner_box .b_box .l_box a + a:before {
            content: '';
            width: 1px;
            height: 15px;
            background: #767676;
            position: absolute;
            left: -6px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* 선생님 코드*/
        body {
            font-family: "Spoqa Han Sans Neo", "sans-serif";
        }

        .login-wrap {
            width: 350px;
            height: 140px;
            border-radius: 5px;
            border: 1px solid #dbdbdb;
            padding: 19px 16px 18px;
            font-size: 12px;
            box-sizing: border-box;
        }

        .btn-login {
            margin: 16px 0;
            background-color: #711bff;
            border-radius: 4px;
            height: 40px;
            display: block;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn-login img {
            width: 64px;
            margin-right: 4px;
        }

        .login-link {
            color: #767676;
            display: flex;
            justify-content: space-between;
        }

        .login-link > div {
            display: flex;
            align-items: center;
        }

        .login-link > div > a {
            display: flex;
            align-items: center;
        }

        .login-link img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            /* vertical-align: middle; */
        }

        .login-link span {
            margin: 0 4px;
        }

        .join {
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="login_box">
        <div class="inner_box">
            <p>더 편리해진 위니브에 오신 것을 환영합니다.</p>
            <a href="javascript:void(0)"><img src="./img/weniv-logo.png" alt="위니브 로고">로그인</a>
            <div class="b_box">
                <div class="l_box">
                    <a href="javascript:void(0)"><img src="./img/icon-lock.png" alt="아이디 찾기" class="icon">아이디</a>
                    <a href="javascript:void(0)">비밀번호 찾기</a>
                </div>
                <a href="javascript:void(0)"><img src="./img/icon-user.png" alt="회원가입" class="icon">회원가입</a>
            </div>
        </div>
    </div>

    <!--선생님 코드-->
    <section class="login-wrap">
        <!-- ir 기법을 사용해서 헤딩태그 숨기기 -->
        <!-- <h2>로그인</h2> -->
        <p>더 편리해진 위니브에 오신 것을 환영합니다.</p>
        <a href="#" class="btn-login">
            <img src="./img/weniv-logo.png" alt="weniv" />
            로그인
        </a>
        <div class="login-link">
            <div>
                <a href="#">
                    <img src="./img/icon-lock.png" alt="아이디 찾기" />
                    아이디
                </a>
                <span>|</span>
                <a href="#">비밀번호찾기</a>
            </div>
            <a href="#" class="join">
                <img src="./img/icon-user.png" alt="" />
<!--             아이디 찾기 alt에는 아이디 찾기를 적었지만 회원가입엔 안적은 이유는 회원가입 텍스트를 스크린 리더기가 2번 읽기 때문에 회원가입은 alt 생략-->
                회원가입
            </a>
        </div>
    </section>
</body>
</html>
profile
금송
goldsong
이전 포스트

CSS 기초 및 속성

다음 포스트

Javascript 기초 1

0개의 댓글