css - sohot423/project_study GitHub Wiki

문법

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css</title>
        <link rel="stylesheet" href="external.css">
        <style>
            span {border:1px #F00 solid;}
            p{border: 1px red solid; width:100px; height: 100px;}
            .blue{background-color:blue}
        </style>
    </head>
    <body>
        <p class="blue">hello world</p>
        <!-- External 방식 -->
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p style="border:1px blue solid;">hello world</p>
        <!-- inline 방식스타일링 
        <div style="border:1px red solid;">text</div>
        <span style="border:1px red solid;">text</span>
        <span style="border:1px red solid;">text</span> -->
    </body>
</html>

boxmodel

 div{
       border:1px #F00 solid;
       width: auto; : auto: 나의 부모만큼
       height: auto; : 나의 컨텐츠만큼
       *margin/ padding 쓸때 width: 100%랑 auto랑 구분해야함. (근거값에 따라서 커짐)
      }

<style>
    .상자{
       border: 1px #f00 solid;
       min-width: 1000px;
       max-width: 1000px;
       min-height: 1000px;  }
</style>
  • min - 1000px이하로는 줄어들지 않음
  • max - 1000px이상으로는 커지지않음
  • min-height: 1000px 컨텐츠가 없어도 1000px은 유지 (홈페이지 하단 위치 유지할때)
  • max-height: 1000px이상은 늘어나지 않음
⚠️ **GitHub.com Fallback** ⚠️