'웹(클라이언트)'에 해당되는 글 13건

  1. 2021.09.27 float연습
  2. 2021.09.27 flex 사용하기
  3. 2021.09.27 border padding 지정하기
  4. 2021.09.27 border size 설정하기
  5. 2021.09.27 BackGround(배경)지정
웹(클라이언트)/CSS2021. 9. 27. 16:07

float연습

소스코드1

<!DOCTYPE html>
<html lang="en" dir="ltr">
<style media="screen">
  img{
    width:300px;
    float:right; /*방향*/
    margin-left:20px;
    margin-bottom: 10px;
  }
  p{
    border:1px solid gray;
  }
</style>

  <head>
    <meta charset="utf-8">
    <title>Float</title>
  </head>
    <body>
      <img src="coding.jpg" alt="">
      <p>
        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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p style="clear:left;">/*float효과가 같은 방향일때 무시한다*/
        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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </body>

</html>

결과값1

 

소스코드2

<!doctype html>
<html>
<head>
  <style>
    *{
      box-sizing:border-box;
    }
    .container{
      width:540px;
      border:1px solid gray;
      margin:auto;
    }
    header{
      border-bottom: 1px solid gray;
    }
    nav{
      float:left;
      width:120px;
      border-right:1px solid gray;
    }
    article{
      float:left;
      width:300px;
      border-left:1px solid gray;
      border-right:1px solid gray;
      margin-left:-1px;
    }
    aside{
      float:left;
      width:120px;
      border-left:1px solid gray;
      margin-left:-1px;
    }
    footer{
      clear:both;
      border-top:1px solid gray;
      text-align: center;
      padding:20px;
    }
  </style>
</head>
<body>
 <div class="container">
    <header>
    <h1>
      CSS
    </h1>
    </header>
    <nav>
      <ul>
        <li>position</li>
        <li>float</li>
        <li>flex</li>
      </ul>
    </nav>
    <article>
      <h2>float</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quae earum enim ab distinctio corrupti eius reprehenderit non, rerum ut nisi autem cum sint perferendis eum id velit, molestias nesciunt. Ullam dignissimos consequuntur explicabo id voluptas vel deleniti nesciunt veritatis iusto commodi, laudantium cumque vero deserunt laboriosam. Ea, quia est?
    </article>
    <aside>
      ad
    </aside>
    <footer>
      copyleft
    </footer>
 </div>

</body>
</html>

결과값2

'웹(클라이언트) > CSS' 카테고리의 다른 글

Tag의 font속성과 사이즈 지정  (0) 2021.09.27
font Color지정방법 3가지(rgb, hex, name)  (0) 2021.09.27
flex 사용하기  (0) 2021.09.27
border padding 지정하기  (0) 2021.09.27
border size 설정하기  (0) 2021.09.27
Posted by 여동동
웹(클라이언트)/CSS2021. 9. 27. 16:03

flex 사용하기

소스코드

<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;
          /*  flex-grow:1;*//*모든 아이템이 길이를 무시하고 여백을 공평하게 나누기
          숫자가 클수록 배율만큼 가져감*/
        }
        .item:nth-child(1){
            flex-basis: 150px; /*인터넷창(컨테이너)크기가 작아지면 작아지지만 그전에는 고정값.*/
            flex-shrink: 1; /*0을 주면 컨테이너가 작아져도 안작아지게 0*/
        }
        .item:nth-child(2){
            flex-basis: 150px;
            flex-shrink: 2; /*값을 준만큼 줄어드는 비율을 가져감*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

결과값

'웹(클라이언트) > CSS' 카테고리의 다른 글

font Color지정방법 3가지(rgb, hex, name)  (0) 2021.09.27
float연습  (0) 2021.09.27
border padding 지정하기  (0) 2021.09.27
border size 설정하기  (0) 2021.09.27
BackGround(배경)지정  (0) 2021.09.27
Posted by 여동동
웹(클라이언트)/CSS2021. 9. 27. 16:02

border padding 지정하기

소스코드

<!DOCTYPE html>
<html lang="en" dir="ltr">
<style media="screen">
  p,a{
    /*border-width:10px;
    border-style:solid;
    border-color;red;*/
    border:10px solid red;
    padding:20px; /*박스와 글자사이 간격*/
    margin:60px;
    width:600px;
  }
</style>

  <head>
    <meta charset="utf-8">
    <title>Box Model</title>
  </head>
    <body>
<p>
   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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
   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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
  안녕하세요. <a href="https://a.com">생활코딩 </a> 입니다. <br>
  //inline 방식의 테그에서는 width값과 height값이 무시된다.
    </body>

</html>

결과물

'웹(클라이언트) > CSS' 카테고리의 다른 글

font Color지정방법 3가지(rgb, hex, name)  (0) 2021.09.27
float연습  (0) 2021.09.27
flex 사용하기  (0) 2021.09.27
border size 설정하기  (0) 2021.09.27
BackGround(배경)지정  (0) 2021.09.27
Posted by 여동동
웹(클라이언트)/CSS2021. 9. 27. 15:59

border size 설정하기

소스코드

<!DOCTYPE html>
<html lang="en" dir="ltr">
<style media="screen">
  div{
    margin:10px;
    width:150px;
    box-sizing:border-box;
    /*border의 크기가 달라도 결과적인 박스의 크기를 같게 만든다.*/
  }
  #small{
      border:10px solid black;
  }
  #large{
      border:30px solid black;
  }
</style>

  <head>
    <meta charset="utf-8">
    <title>Box Model</title>
  </head>
    <body>
      <div id="small">Hello</div>
      <div id="large">Hello</div>
    </body>

</html>

 

결과값

'웹(클라이언트) > CSS' 카테고리의 다른 글

font Color지정방법 3가지(rgb, hex, name)  (0) 2021.09.27
float연습  (0) 2021.09.27
flex 사용하기  (0) 2021.09.27
border padding 지정하기  (0) 2021.09.27
BackGround(배경)지정  (0) 2021.09.27
Posted by 여동동
웹(클라이언트)/CSS2021. 9. 27. 15:57

BackGround(배경)지정

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<style media="screen">
  div{
    font-size:100px;
    height:500px;
    border:5px solid gray;
    background-color: tomato;
    background-image:url('coding.jpg');
    background-repeat:no-repeat;
  }
</style>

  <head>
    <meta charset="utf-8">
    <title>Background</title>
  </head>
    <body>
<div class="">
  Hello world
</div>
    </body>

</html>

결과물

그림검정색이라 검은 그림이 올라옴.

'웹(클라이언트) > CSS' 카테고리의 다른 글

font Color지정방법 3가지(rgb, hex, name)  (0) 2021.09.27
float연습  (0) 2021.09.27
flex 사용하기  (0) 2021.09.27
border padding 지정하기  (0) 2021.09.27
border size 설정하기  (0) 2021.09.27
Posted by 여동동

티스토리툴바