[DAY - 3] 외부스타일css, class, margin, padding, border, width, height

• .css 외부 스타일
• class
• margin
• padding
• border
• width
• height

1) .css 외부 스타일

head 부분에 직접 css를 코딩할 수 있지만, 자주 사용하는 css파일을 따로 만들어서 head에서 링크를 걸 수 있다.

div {background-color: aqua;}
div h2 {font-size: 50px; background-color: coral;}
div h2 ul {}
div h2 ul li {background-color: cornflowerblue;}
div+p{background-color: chartreuse;}
p {background-color: navajowhite;}

파일 이름을 style.css로 저장 한 후 html에서 링크하면 똑같이 적용이 된다.

    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

마찬가지로 초기화 css 먼저 링크 건 후 사용할 외부 스타일 css를 링크 걸면 된다.

 

2) class

외부 css를 사용하지 않고 html에서 직접 css를 코딩할 수도 있다.

    <div class="con-box">
        <ul>
            <li class="a">list1</li>
            <li class="b">list2</li>
            <li class="c">list3</li>
            <li class="d">list4</li>
            <li class="e">list5</li>
            <li class="f">list6</li>
        </ul>
    </div>

클래스 명은 con-box, a~f로 지정하였다.

        div.con-box {}
        div.con-box ul li.a {background-color: pink;}
        /* 1+10+1+1+10=23점 */
        div.con-box ul .a {background-color: teal}
        div.con-box ul li.b {background-color: antiquewhite;}
        /* 1+10+1+10=22점 */
        .con-box ul .c {background-color: cornflowerblue;}
        .con-box ul .d {background-color: blue;}
        .con-box ul .e {background-color: darkgrey;}
        .con-box ul .f {background-color: green;}

*a에 대한 background-color는 pink가 1점이 더 높음으로 pink만 적용이 되는 듯하다.

class

3) margin, padding, border

margin:테두리와 박스 사이 여백

padding:콘텐츠와 테두리 사이 여백

border:박스 테두리 두께

박스 모델을 구성하는 요소들이다.

이미지 혹은 텍스트들을 보다 보기 편하고 원하는 위치, 크기등을 정할 때 사용한다.

박스 모델

            margin-top: 20px;
            margin-right: 50px;
            margin-bottom: 40px;
            margin-left: 30px;
            
            margin : 20px 50px 40px 30px

사진처럼 -top, -right, -bottom, -left를 사용하여 일일이 적용할 수 있지만, 한 줄로 간편하게 작성할 수도 있다.

    <style>
        div {
            width: 200px;
            height: 100px;
            margin: 20px;
            padding: 10px;
            background-color: aquamarine;
        }
        .box1 {
            border-top: 2px solid red;
            border-right: 5px dotted pink;
            border-bottom: 8px dashed teal;
            /* padding, border : 박스크기에 영향을 준다 */
            box-sizing: border-box;
        }
        .box2 {
            border: 2px solid royalblue;
        }
        .box3 {
            border-top: 3px solid rebeccapurple;
            border-right: 3px solid rebeccapurple;
            border-left: 3px solid rebeccapurple;
            /* 하나씩 넣는게 정석 */
        }
        .box4 {
            border: 5px solid khaki;
            border-bottom: none;
        }
    </style>

border

border : 크기 스타일 색;

 

4) width, height

width:너비

height:높이

        .box1 {
            background-color: aquamarine;
            width: 300px;
            height: 250px;
            padding: 15px;
            margin: 20px;
            box-sizing: border-box;
        }

 

5) text-align, font-size, font-weight

text-align:텍스트 정렬

font-size"폰트 크기

font-weight:폰트 두께

        .box1 {text-align: left;}
        .box2 {text-align: center;}
        .box3 {text-align: right;}

text-align

            .box1{font-weight: 100; font-size: 20px;}
            .box2{font-weight: 200; font-size: 30px;}
            .box3{font-weight: 300; font-size: 40px;}
            .box4{font-weight: 400; font-size: 50px;}

font