[DAY - 2] reset.css, color, background-color, font-size

• reset.css
• background-color
• color
• font-siza

1) reset.css

우선 reset.css 코드를 적용시켜 태그들이 갖고 있는 기본 설정을 초기화시킨 뒤 원하는 대로 수정을 한다.

css 폴더를 만든 뒤 reset.css 파일을 넣는다.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.5;
    font-size:15px; 
    color:#333;
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* body의 내용은 개인 취향대로 수정을 하였다.

head 부분에 링크를 걸어준뒤 body에 내용을 적으면 기본 설정이 초기화된 것을 볼 수 있다.

    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <p>안녕하세요</p>
    <dl>
        <dt>용어정의</dt>
        <dd>용어설정</dd>
    </dl>

2) background-color

background-color : 배경색

    <style>
        h1 {background-color:yellow; }
        h2 {background-color:orangered; }
        h3 {background-color:aqua; }
        p {background-color:magenta; }
        dt {background-color: darksalmon; }
        dd {background-color: pink;}
    </style>

 

background-color

3) color

color : 글자색

    <style>
        h1 {color:yellow; }
        h2 {color:orangered; }
        h3 {color:aqua; }
        p {color:magenta; }
        dt {color: darksalmon; }
        dd {color: pink;}
    </style>

color

`

4) font-size

font-size : 폰트 크기

    <style>
        h1 {color:yellow; font-size: 20px;}
        h2 {color:orangered; font-size: 30px; }
        h3 {color:aqua; font-size: 40px;}
        p {color:magenta; font-size: 50px;}
        dt {color: darksalmon; font-size: 60px;}
        dd {color: pink;font-size: 70px;}
    </style>

font-size

 

*color,font-size, background-color 등 여러 조건을 사용하려면 사이마다 세미콜론 ( ; )을 넣어주어야 하고 마지막엔 넣지 않아도 된다고 한다.

        h1, h2, h3, h4, p {background-color: pink;}


        h1 { background-color: pink;}
        h2 { background-color: pink;}
        h3 { background-color: pink;}
        h4 { background-color: pink;}
        p { background-color: pink;}

 

위와 같이 한줄로 그룹선택이 가능하다.

 

    <div>
        <article>
            <h2>제목2</h2>
            <p>연습입니다</p>
        </article>
        
        <section>
            <h2>제목2</h2>
            <p>연습입니다</p>
        </section>
    </div>

위와 같이 h2 태그와 p 태그가 여러 가지인 경우 특정 하위 태그만 지정해서 적용이 가능하다.

        div {}
        div article {}
        div article h2 {}
        div article p {}

        div section {}
        div section h2 {}
        div section p {}

하위(자식) 선택을 하려면 공백을 넣어서 컴퓨터 폴더 찾아가듯이 하면 된다.

 

* 같은 태그에 대해 여러 가지 스타일 조건이 있다면 점수를 매겨 높은 점수의 조건만 적용된다.

그래서 밑으로 내려갈 수록 점수가 커지는 코딩을 해야 한다고 배웠다.

 

 

위의 점수 조건을 적용하여 계산한 예시

 

#wrap : 100

#wrap #header : 100+100=200

.gnb li : 10+1

.gnb li a : 10+1+1

ul li a : 1+1+1

a:hover : 1+10