개발자의 여정에 열정을 더하다.

Class/css

[ CSS변환 / Transfrom 1-1]

열정코딩 2022. 3. 30.

 1. 박스 생성하기 

 

 

🟣 박스 생성

<div class="box-container" >

 

🟣 여러 박스 생성 

<div class="box-container" >
   <div class="box">A</div>
   <div class="box">B</div>
   <div class="box">C</div>
   <div class="box">D</div>
   <div class="box">E</div>
 </div>
 
🟣 박스에 스타일 삽입하기
 
.box {
          width: 100px;
          height: 100px;
          border:2px solid black;
          background: rgba(255, 255, 0, 0.7);
          }
 

🟣 소스코드 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <Link rel="stylesheet" herf="css/reset.css">
  <style>
      .box-container {
          display: flex;
      }
      .box {
          width: 100px;
          height: 100px;
          border:2px solid black;
          background: rgba(255, 255, 0, 0.7);
            }
          
  </style>
</head>
<body>
  <h1>CSS Transform</h1>
   <p>
      Lorem ipsum doctypelor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Duis aute irure dolor in reprehenderit in voluptate velit es
    se cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       </p>
 <div class="box-container" >
   <div class="box">A</div>
   <div class="box">B</div>
   <div class="box">C</div>
   <div class="box">D</div>
   <div class="box">E</div>
 </div>
 <P>
   Lorem ipsum doctypelor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
   ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit es
   se cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
   aliqua.
 </P>
</html>

 

🟣 결과 

 
Document

CSS Transform

Lorem ipsum doctypelor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit es se cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

A
B
C
D
E

Lorem ipsum doctypelor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit es se cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

[ CSS애니메이션 / Animation1-1 ]  (0) 2022.04.04
[ CSS변환 / Transfrom 1-2 ]  (0) 2022.03.30

댓글

티스토리툴바