'FE/CSS' 카테고리의 글 목록

FE/CSS

[CSS] CSS 기초2 2024.03.21
[CSS] CSS 기초 2024.03.20

[CSS] CSS 기초2

저녕호 2024. 3. 21. 13:27

2024. 3. 21. 13:27

CSS

margin : 바깥 쪽으로 밀어냄

padding : 안쪽으로 밀어냄

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background: yellow;
        width: 300px;
        border: 15px solid navy;
        /* min-height: 200px; */
        /* 최소 높이 설정 */

        padding: 25px 0 0 0;
        margin: 25px;
      }
    </style>
  </head>
  <body>
    <div>
      css3 박스 모델은 content, padding, border, margin으로 구성되어 있다
    </div>
    <footer style="background: maroon">footer 지역입니다</footer>
  </body>
</html>

노란색 안쪽 여백 : padding , 바깥쪽 위, 오른쪽, 아래, 왼쪽 여백 : margin

그림자 옵션

글씨 그림자 : text-shadow

이미지 그림자 : box-shadow

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        text-shadow: 10px 10px 15px black;
        font-size: 70pt;
      }
      img {
        padding: 20px;
        margin: 20px;
        width: 200px;
        height: 100px;
      }
      .shadow1 {
        box-shadow: 5px 5px 10px black;
      }
      .shadow2 {
        box-shadow: -5px -5px 10px black;
      }
    </style>
  </head>
  <body>
    <h1 class="title">내용이 들어옵니다~~~</h1>
    <img src="download.jpg" class="shadow1" />
    <img src="download.jpg" class="shadow2" />
  </body>
</html>

배치하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #wrap {
        width: 50%;
        height: 200px;
        border: 4px solid black;
        margin: auto;
        text-align: center;
        display: flex;
        /* 가로 배치 */
      }
      #wrap div {
        width: 33.333%;
        /* 메인 div 하위의 div 태그들의 위치를 1/3 로 균일하게 */
        /* 적용한다 */
      }
      #wrap div:first-child {
        order: 3;
        /* display:flex 를 적용하면 order 태그로 순서를 적용할 수 있음 */
        /* 첫번째 자식 클래스이지만 순서를 세번째로 */
        background: red;
      }
      #wrap div:nth-child(2) {
        order: 2;
        /* display:flex 를 적용하면 order 태그로 순서를 적용할 수 있음 */
        /* 두번째 자식 클래스이며 순서를 두번째로 */
        background: green;
      }
      #wrap div:nth-child(3) {
        order: 1;
        /* display:flex 를 적용하면 order 태그로 순서를 적용할 수 있음 */
        /* 세번째 자식 클래스이지만 순서를 첫번째로 */
        background: aqua;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div><h1>1</h1></div>
      <div><h1>2</h1></div>
      <div><h1>3</h1></div>
    </div>
  </body>
</html>

배치하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #wrap {
        width: 50%;
        height: 200px;
        border: 4px solid black;
        margin: auto;
        text-align: center;
        display: flex;
        /* 가로 배치 */
      }
      #wrap div {
        width: 33.333%;
        /* 메인 div 하위의 div 태그들의 위치를 1/3 로 균일하게 */
        /* 적용한다 */
      }
      .cl01 {
        order: 3;
        /* display:flex 를 적용하면 order 태그로 순서를 적용할 수 있음 */
        /* 첫번째 자식 클래스이지만 순서를 세번째로 */
        background: red;
      }
      .cl02 {
        order: 2;
        /* display:flex 를 적용하면 order 태그로 순서를 적용할 수 있음 */
        /* 두번째 자식 클래스이며 순서를 두번째로 */
        background: green;
        display: flex;
        /* cl02 의 자식 클래스들도 가로 배치로 변경 */
      }
      .cl03 {
        order: 1;
        /* display:flex 를 적용하면 order 태그로 순서를 적용할 수 있음 */
        /* 세번째 자식 클래스이지만 순서를 첫번째로 */
        background: aqua;
      }
      .h01 {
        background: lightblue;
        width: 100%;
      }
      .h02 {
        background: lightcoral;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div class="cl01"><h1>1</h1></div>
      <div class="cl02">
        <h1 class="h01">첫번째</h1>
        <h1 class="h02">두번째</h1>
      </div>
      <div class="cl03"><h1>3</h1></div>
    </div>
  </body>
</html>

첫번째, 두번째 내용을 가진 div 가 처음 생성 시에는 세로로 배치되어 있는데 부모 클래스인 cl02 클래스에 display:flex 를 설정하여 자식 클래스를 가로로 배치

position

- static : 고정, 변경 불가

- relative : static 상태에서 top, right, bottom, left 값으로 위치를 변경 가능

- absolute : 웹 페이지를 기준으로 top, right, bottom, left 값으로 절대 위치를 설정

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-weight: bold;
        font-size: 12pt;
        background: gray;
      }
      .span1 {
        background: yellow;
        position: absolute;
        top: 5px;
      }
      .span2 {
        background: red;
        position: absolute;
        bottom: 5px;
      }
      .span3 {
        background: pink;
        position: absolute;
        top: -5px;
      }
      div {
        background: skyblue;
      }
    </style>
  </head>
  <body>
    <div style="background: green">position</div>
    <span class="span1">span1</span>
    <span class="span2">span2</span>
    <span class="span3">span3</span>
    <div>기본 값은 static 입니다</div>
  </body>
</html>

style 태그의 각 span 클래스의 코드를 static, relative, absolute 로 설정했을 때 출력물 ↓

position : absolute, fixed

absolute 와 fixed 의 차이점 : fixed 는 스크롤을 내려도 창의 고정 위치에 따라 같이 따라옴

z-index 옵션을 사용하면 위치가 겹쳤을 경우 위에 표시될 것을 index 번호를 부여하여 설정 가능

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .sp {
        position: static;
        left: 30px;
        background: cyan;
        width: 400px;
        height: 50px;
      }
      .rp1 {
        position: fixed;
        right: 30px;
        top: 10px;
        background: orange;
        width: 400px;
        height: 50px;
        z-index: 1;
        /* 겹쳤을때 위에 더 위에 표시될 것 순서 */
      }
      .rp2 {
        position: absolute;
        right: 60px;
        top: 30px;
        background: lightblue;
        width: 400px;
        height: 50px;
        z-index: 0;
        /* 겹쳤을때 위에 더 위에 표시될 것 순서 */
      }
    </style>
  </head>
  <body>
    <p class="sp">정적 위치 설정</p>

    <p class="rp1">고정 위치(fixed)</p>
    <p class="rp2">절대 위치 설정(absolute)</p>
    <p class="sp">정적 위치 설정</p>
    <p class="sp">정적 위치 설정</p>
  </body>
</html>

로그인 창 연습

( 통일성은 없음 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #wrap {
        height: 200px;
        width: 200px;
        margin: auto;
        border: 1px solid lightgray;
        padding: 10px;
        border-radius: 5px;
      }
      .id {
        width: 200px;
        height: 20px;
        font-size: 20px;
        border: none;
        border-bottom: 2px solid darkgray;
        margin: 10px 0;
      }
      .id:focus {
        outline: none;
      }
      .id::-webkit-input-placeholder {
        text-align: center;
        letter-spacing: 5px;
      }
      .pwd {
        border-radius: 5px;
        height: 20px;
        margin-bottom: 10px;
      }
      .btn {
        border-radius: 5px;
        width: 200px;
        height: 30px;
        background: lemonchiffon;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <h3 style="text-align: center; border-bottom: 1px solid">
        로그인 페이지
      </h3>
      <form><input class="id" type="text" placeholder="input id" /></form>
      <form>
        <input class="pwd" type="text" placeholder="input password" />
      </form>
      <form><input class="btn" type="submit" value="LOGIN" /></form>
    </div>
  </body>
</html>

실습 예제

실습 풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 70%;
        border: 2px solid;
        background: red;
        text-align: center;
        font-weight: bold;
        font-size: 30px;
        padding: 40px 0;
      }
      div {
        position: absolute;
        left: 0;
        right: 0;

        bottom: 15%;
        top: 30%;
        display: flex;
      }
      nav {
        border: 1px solid;
        width: 15%;
        text-align: center;
        padding: 20px 0;
        font-weight: bold;
        background: yellow;
      }
      section {
        border: 1px solid;
        width: 85%;
        text-align: center;
        padding: 20px 0;
        font-weight: bold;
        background: green;
      }
      footer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        top: 85%;
        border: 1px solid;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        background: pink;
        padding: 20px 0;
      }
    </style>
  </head>
  <body>
    <header>&lt;header&gt;</header>
    <div>
      <nav>&lt;nav&gt;</nav>
      <section>&lt;section&gt;</section>
    </div>
    <footer>&lt;footer&gt;</footer>
  </body>
</html>

1번 풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 70%;
        border: 2px solid;
        background: red;
        text-align: center;
        font-weight: bold;
        font-size: 30px;
        padding: 40px 0;
      }
      div {
        position: absolute;
        left: 0;
        right: 0;

        bottom: 15%;
        top: 30%;
        display: flex;
      }
      nav {
        border: 1px solid;
        width: 15%;
        text-align: center;
        padding: 20px 0;
        font-weight: bold;
        background: yellow;
      }
      section {
        border: 1px solid;
        width: 60%;
        text-align: center;
        padding: 20px 0;
        font-weight: bold;
        background: green;
      }
      aside {
        width: 25%;
        border: 1px solid;
        text-align: center;
        padding: 20px 0;
        font-weight: bold;
        background-color: yellow;
      }
      footer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        top: 85%;
        border: 1px solid;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        background: pink;
        padding: 20px 0;
      }
    </style>
  </head>
  <body>
    <header>&lt;header&gt;</header>
    <div>
      <nav>&lt;nav&gt;</nav>
      <section>&lt;section&gt;</section>
      <aside>aside</aside>
    </div>
    <footer>&lt;footer&gt;</footer>
  </body>
</html>

2번 풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 70%;
        border: 2px solid;
        background: red;
        text-align: center;
        font-weight: bold;
        font-size: 30px;
        padding: 40px 0;
      }
      div {
        position: absolute;
        left: 0;
        right: 0;

        bottom: 15%;
        top: 30%;
        display: flex;
      }
      nav {
        border: 1px solid;
        width: 15%;
        text-align: center;
        padding: 20px 0;
        font-weight: bold;
        background: yellow;
      }
      section {
        border: 1px solid;
        width: 60%;
        text-align: center;
        padding: 20px 0;
        font-weight: bold;
        background: green;
      }
      aside {
        width: 25%;
        border: 1px solid;
        text-align: center;
        padding: 20px 0;
        font-weight: bold;
        background-color: yellow;
      }
      footer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        top: 85%;
        border: 1px solid;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        background: pink;
        padding: 20px 0;
      }
      section div {
        position: static;
        display: block;
      }
      section > div > header {
        position: relative;
        margin: 5% 10px;
        padding: 0;
        height: 30px;
        font-weight: 100;
        font-size: large;
        background-color: skyblue;
      }
      section > div > article {
        border: 2px solid;
        position: relative;
        margin: 5% 10px;
        padding: 0;
        height: 30px;
        font-weight: 100;
        font-size: large;
        background-color: yellow;
      }
      section > div > footer {
        border: 2px solid;
        position: relative;
        margin: 5% 10px;
        padding: 0;
        height: 30px;
        font-weight: 100;
        font-size: large;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <header>&lt;header&gt;</header>
    <div>
      <nav>&lt;nav&gt;</nav>
      <section>
        &lt;section&gt;
        <div>
          <header>header</header>
          <article>article</article>
          <footer>footer</footer>
        </div>
      </section>
      <aside>aside</aside>
    </div>
    <footer>&lt;footer&gt;</footer>
  </body>
</html>

3번 풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .mainheader {
        position: relative;
        border-top: 2px solid;
        border-left: 2px solid;
        border-right: 2px solid;
        background: red;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        height: 70px;
        padding-top: 23px;
      }
      .mainnav {
        position: relative;
        background: yellow;
        border-left: 2px solid;
        border-right: 2px solid;
        text-align: center;
        font-size: 20px;
        height: 50px;
        padding-top: 17px;
        font-weight: bold;
      }
      .maindiv {
        display: flex;
      }
      .section1 {
        position: relative;
        width: 80%;
        text-align: center;
        font-weight: bold;
        background: green;
        height: 250px;
        border-left: 2px solid;
      }
      aside {
        position: relative;
        background: skyblue;
        width: 20%;
        text-align: center;
        border-right: 2px solid;
      }
      .section1 header {
        background: pink;
        padding: 5px 0;
        width: 90%;
        margin: auto;
        margin-bottom: 10px;
        border: 3px solid;
      }
      .section1 article {
        background: pink;
        padding: 5px 0;
        width: 90%;
        margin: auto;
        margin-bottom: 10px;
        border: 3px solid;
      }
      .section1 footer {
        background: pink;
        padding: 5px 0;
        width: 90%;
        margin: auto;
        margin-bottom: 10px;
        border: 3px solid;
      }
      .mainfooter {
        text-align: center;
        width: 100%;
        height: 50px;
        padding-top: 17px;
        background: pink;
        font-weight: bold;
        border-right: 2px solid;
        border-left: 2px solid;
        border-bottom: 2px solid;
      }
    </style>
  </head>
  <body>
    <header class="mainheader">&lt; header &gt;</header>
    <nav class="mainnav">&lt; nav &gt;</nav>
    <div class="maindiv">
      <section class="section1">
        <h3>&lt; section1 &gt;</h3>
        <header>&lt; header &gt;</header>
        <article>&lt; article &gt;</article>
        <footer>&lt; footer &gt;</footer>
      </section>
      <aside><h3>&lt; aside &gt;</h3></aside>
    </div>
    <footer class="mainfooter">&lt; footer &gt;</footer>
  </body>
</html>

4번 풀이

728x90

'FE > CSS' 카테고리의 다른 글

[CSS] CSS 기초 (0)	2024.03.20

[CSS] CSS 기초

저녕호 2024. 3. 20. 14:58

2024. 3. 20. 14:58

CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 전체 선택자 */
      * {
        color: red;
        background: yellow;
      }

      /* 태그 선택자 */
      b {
        font-size: 30px;
      }

      /* id 선택자 */
      #id_txt {
        background: gray;
      }

      /* class 선택자 */
      .class_txt {
        color: black;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt><b>css</b></dt>
      <dd id="id_txt">스타일 시트 표준안</dd>
      <dd class="class_txt">
        웹 문서에 글꼴, 색상, 정렬과 각 태그의 배치 방법 등 디자인 적용
      </dd>

      <dt><b>css구성</b></dt>
      <dd>선택자(selector) : 디자인을 적용할 대상 지정</dd>
      <dd>속성 : 어떤 디자인을 설정할지</dd>
      <dd>속성 값 : 속성에서 선택한 디자인을 어떻게 반영할지</dd>
    </dl>
  </body>
</html>

선택자

id 선택자와 class 선택자의 차이

- id 선택자는 id 선택자를 여러개 중첩하여 사용할 수 없다.

- class 선택자는 여러 class 를 중첩하여 사용할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      #id01 {
        color: red;
      }
      #id02 {
        background: aqua;
      }
      .class01 {
        color: blue;
      }
      .class02 {
        background: aqua;
      }
    </style>
  </head>
  <body>
    <div id="id01" class="class02">
      <!-- id 선택자는 동시에 여러개 적용 불가 -->
      <!-- id 선택자와 class 선택자는 동시에 적용 가능 -->
      id를 부여할 경우 문서 내의 유일한 값으로 사용<br />
      문서내에서 동일한 id를 부여하면 안된다
    </div>
    <div class="class01 class02">
      <!-- class 선택자는 동시에 여러 클래스를 적용할 수 있음 -->
      class는 다른 태그에서 사용해도 된다<br />
      여러개를 동시에 부여할 수 있다
    </div>
  </body>
</html>

id 선택자와 class 선택자의 차이

하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자

- 하위 선택자 : 특정 선택자 하위의 모든 요소를 말한다

- 자식 선택자 : 직속 자식 요소를 말한다

- 인접 선택자 : 바로 뒤에 나오는 하나의 요소

- 형제 선택자 : 같은 계층에 있는 요소에 적용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box p {
        color: lime;
      } /* 하위 선택자 */
      .box > p {
        color: orange;
      } /* 자식 선택자 */
      .box + div {
        background: gray;
      } /* 인접 선택자 */
      .box ~ p {
        background: green;
      } /* 형제 선택자 */
    </style>
  </head>
  <body>
    <div class="box">
      <p>1. 하위 선택자는 특정 선택자 하위의 모든 요소를 말한다</p>
      <div>
        <p>2. 자식 선택자는 직속 자식 요소를 말한다</p>
      </div>
      <p>3. 다음 내용</p>
    </div>
    <div>1. 인접 선택자는 바로 뒤에 나오는 하나의 요소</div>
    <div>2. 인접 선택자는 바로 뒤에 나오는 하나의 요소</div>
    <p>형제 선택자는 같은 계층에 있는 요소에 적용 된다</p>
  </body>
</html>

하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자

가상 선택자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      div {
        width: 200px;
        height: 100px;
        color: blue;
        background: green;
        opacity: 0.9;
      }
      div:hover {
        width: 400px;
        height: 50px;
        color: red;
        background: yellow;
        opacity: 0.3;
        transition: all 1.5s linear 0.5s;
        /*  all : 모든 내용을
            1.5s : 1.5초 동안 구현하세요
            
            linear : 선형 그라데이션 효과
            0.5s : 0.5초 동안 마우스가 위에 있으면
        */
      }
    </style>
  </head>
  <body>
    <h2>가상 선택자</h2>
    <div>가상 클래스를 이용한 애니메이션 효과</div>
  </body>
</html>

가상 선택자

마우스가 올라가면 0.5초 간 대기 후에 1.5초 동안에 div:hover 가 구현됨

실습 예제

실습 풀이

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .main_back {
        background: lightgray;
        height: 300px;
        width: 190px;
      }
      .hover:hover ~ div > h2 {
        color: aqua;
      }
      .main_back > ul > li > h3:hover {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <h1 class="hover">오늘의 할 일</h1>
    <div class="main_back">
      <h2>12월 31일 할 일</h2>
      <ul>
        <li>
          <h3>오전 10시</h3>
          <p>아침밥 먹기</p>
        </li>

        <li>
          <h3>낮 12시</h3>
          <p>광합성</p>
        </li>

        <li>
          <h3>오후 4시</h3>
          <p>집 나가기</p>
        </li>
      </ul>
    </div>
  </body>
</html>

코드 실행

a 태그 가상 선택자

1. link : 방문한적 없는 링크

2. visited : 방문한 적 있는 링크

3. hover : 마우스가 올라갔을 경우

4. active : 클릭이 되는 순간

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a:link {
        color: pink;
        text-decoration: none;
      }
      a:visited {
        color: red;
      }
      a:hover {
        text-decoration: overline;
        color: black;
      }
      a:active {
        background: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">test</a> &nbsp;
    <a href="https://www.naver.com">naver</a>
    <hr />
    link : 웹 문서에서 사용자가 방문하지 않았던 곳<br />
    visited : 웹 문서에서 사용자가 방문한 곳<br />
    hover : 포인터가 올라갔을 경우<br />
    active : 클릭이 되는 순간
  </body>
</html>

시크릿 모드로 창을 열어놓은 상태라 방문한 사이트로 인식하지 않음

overflow: hidden

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .div01 {
        overflow: hidden;
        background: blue;
        height: 100px;
      }
      .div01 div {
        background: red;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="div01">
      hello
      <div>css</div>
    </div>
    <h1>다음 내용</h1>
  </body>
</html>

overflow: auto

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .div01 {
        overflow: hidden;
        background: blue;
        height: 100px;
      }
      .div01 div {
        background: red;
        width: 200px;
        height: 200px;
      }
      .txt {
        overflow: auto;
        height: 100px;
        width: 100px;
        background: aqua;
      }
    </style>
  </head>
  <body>
    <div class="div01">
      hello
      <div>css</div>
    </div>
    <h1>다음 내용</h1>
    <div class="txt">
      제230조<br />
      회원이 지켜야할 내용이 있다면 지켜주세요<br />
      더 이상 내용은 없음<br />
      그래 반갑다<br />
      즐거운 하루 되세요~^^
    </div>
  </body>
</html>

일반적인 글은 overflow 가 발생했을때 hidden 을 사용하게 되면 글자가 사라져 버린다, 이때 auto 옵션을 사용하면 스크롤 바 형식으로 텍스트가 형식에 맞춰서 보존된다

Hover Effect

1. transform: scale(배수); : 마우스가 올라가면 크기가 배수만큼 커짐

2. transition: all 시간초s; : 마우스가 올라가면 작동할 모든 기능을 설정한 시간초동안 실행

실습 예제

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background: red;
        text-align: center;
        height: 40px;
        width: 180px;
        color: white;
        padding-top: 20px;
        font-weight: bold;
      }
      div:hover {
        background: gray;
      }
    </style>
  </head>
  <body>
    <div
      style="
        background: pink;
        height: 400px;
        width: 900px;
        padding-top: 10px;
        padding-left: 10px;
      "
    >
      <div>Home</div>
      <div>Profile</div>
      <div>Board</div>
      <div>Contact</div>
    </div>
  </body>
</html>

코드 실행

link

외부 파일로 생성한 css 파일을 불러오는 태그인 link 태그

.px {font-size: 24px;}
.pt {font-size: 24pt;}
.per {font-size: 150%;}
.em {font-size: 1.5em;}

css 파일 내부 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="test09.css" />
  </head>
  <body>
    기본 글자 크기는 16px <br />
    글자 크기 단위<br />
    - px : 해상도에 따라 상대적으로 달라지는 단위<br />
    - pt : 무조건 고정 크기<br />
    - % : 부모 요소의 크기를 100% 기준으로 계산<br />
    - em : 부모 크기를 100% 기준으로 100분의 1단위

    <hr />

    <a href="https://pxtoem.au" target="_blank">단위 변환 사이트</a>
    <div class="px">내용</div>
    <div class="pt">내용</div>
    <hr />
    <div>기본 크기 16px 크기</div>
    <div class="per">부모가 없는 기본 16px 의 150% 크기</div>
    <div class="em">부모가 없는 기본 16px 의 1.5em 크기</div>
    <div class="px">
      부모 크기 24px
      <div class="px">자식 24px</div>
      <div class="per">자식 150%</div>
      <div class="em">자식 1.5em</div>
    </div>
  </body>
</html>

html 코드에 link 태그를 사용하여 css 파일을 불러와서 사용

inline, block

display 태그에서 inline 태그를 block 으로 변경할 수도 있고 block 태그를 inline 으로 변경할 수도 있다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background: skyblue;
        display: inline-block;
        width: 200px;
        text-align: center;
      }
      span {
        background: olive;
        display: block;
      }
      .visible:hover ~ .none {
        display: inline;
      }
      .none {
        display: none;
        background: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div>div-01</div>
    <div>div-02</div>
    <span>span-01</span>
    <span>span-02</span>
    <h1 class="visible">마우스를 올려주세요</h1>
    <h1 class="none">내용</h1>
    즐거운 날~~~~
  </body>
</html>

코드 실행

텍스트 가운데 정렬

한 줄 가운데 정렬 : height 의 값과 line-height 값을 일치시키면 줄의 가운데로 이동한 뒤 text-align: center 를 사용하여 중앙에 위치

여러줄 가운데 정렬 : display: table-cell 지정 후 vertical-align: middle 설정

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .in-block {
        display: inline-block;
        background: orange;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        text-decoration: none;
      }
      div {
        background: aqua;
        width: 300px;
        height: 300px;
        display: table-cell;
        vertical-align: middle;
      }
      label {
        width: 100px;
        height: 30px;
        background: red;
        display: inline-block;
        line-height: 30px;
        text-align: center;
      }
      input {
        width: 300px;
        height: 30px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <a href="#" class="in-block">홈으로 이동1</a>
    <a href="#" class="in-block">홈으로 이동2</a>
    <a href="#" class="in-block">홈으로 이동3</a>
    <div>
      여러줄<br />
      가운데<br />
      정렬<br />
      되나요
    </div>
    <label>아이디 입력</label><input />
  </body>
</html>

728x90

'FE > CSS' 카테고리의 다른 글

[CSS] CSS 기초2 (0)	2024.03.21

PREV 이전 1 NEXT 다음

저녕호의 개발 블로그

FE/CSS

[CSS] CSS 기초2

CSS

그림자 옵션

배치하기

배치하기

position

position : absolute, fixed

실습 예제

'FE > CSS' 카테고리의 다른 글

[CSS] CSS 기초

CSS

id 선택자와 class 선택자의 차이

하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자

가상 선택자

실습 예제

a 태그 가상 선택자

overflow: hidden

Hover Effect

실습 예제

link

inline, block

텍스트 가운데 정렬

'FE > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바