CSS (1)

khxxjxx·2021년 4월 9일
CSS생활코딩
0

생활코딩

목록 보기
4/14

강좌 : 유튜브 생활코딩

2. WEB2-CSS

✍박스모델

태그에 테두리 두르기

<style>
    /* 주석 */	
    /*
    block level element
    */
    h1{
        border-width:5px;
        border-color:red;
        border-style:solid;
    }
    /*
    inline element
    */
    a{
        border-width:5px;
        border-color:red;
        border-style:solid;
    }
</style>
++ display: 사용시 block lever, inline 기본값 변경가능
+++ display : none 사용시 화면에서 사라짐

중복제거 후

<style>
    h1, a{
        border : 5px solid red;
    }
</style>
++ 순서는 상관없다

여백주기

padding: 콘텐츠와 테두리 사이에 여백주기
margin: 테두리와 테두리 사이에 여백주기

<style>
    h1{
        border : 5px solid red;
        padding: 20px;
        margin: 20px;
        display:block;
        width: 100px;
    }
</style>
++ 웹페이지에서 오른쪽마우스 → 검사항목에 들어가면 확인할 수 있다

✍그리드

  • div, span : 아무런 의미가 없고 디자인의 용도로만 쓰는 태그
  • 1fr; 화면전체를 쓰게 자동으로 조정되는 단위
  • display:grid; 사용시 내용이 늘어남에 따라 자동으로 커지고 같이 감싸고 있는 태그 역시도 같이 커진다
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #grid{
                border:5px solid pink;
                display:grid;
                grid-template-columns:150px 1fr;
            }
            div{
                border:5px solid red;
            }
        </style>
    </head>
    <body>
        <div id="grid">
            <div>NAVIGATION</div>
            <div>ARTICLE</div>
        </div>
    </body>
</html>
++ div : 블럭레벨 태그
+++ span : 인라인 태그
profile
khxxjxx
코린이
이전 포스트

CSS

다음 포스트

CSS (2)

0개의 댓글