잡동사니에도 사랑을

[21.09.15] exam01(01_css) - 본문

JAVA_EE/CSS

[21.09.15] exam01(01_css) -

luvforjunk 2021. 9. 15. 18:39
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

html, body{ html태그, body태그에 스타일을 부여하겠습니다 ~ 라는 식으로 써도 좋고,

        margin: 500; /* 바깥쪽 여백*/

        padding: 100px; /* 안쪽 여백*/

        height: 90%;

}

.header { 클래스 속성으로 부여해도 좋다

        width: 100%;

    height: 15%;

    background: darksalmon;

}

 

.nav{

        width: 15%;

        height: 70%;

        float: left;

        background: mistyrose;

}

 

.section{

        width: 70%;

        height: 70%;

        float: left;

        background: indianred;

}

 

.aside{

        width: 15%;

        height: 70%;

        float: left;

        background: mistyrose;

}

 

.footer{

        width: 100%;

        height: 15%;

        /* clear: both; */

        display: flex;

        background: tan;

}

 

</style>

</head>

<body>

        <header class="header">header</header>

        <nav class="nav">nav</nav>

        <section class="section">aside</section>

        <aside class="aside">aside</aside>

        <footer class="footer">footer</footer>

</body>

</html>

 

id=""  => 단 한개의 값을 가져올 때는 '아이디 속성'을 부여한다

class="" => 체크 박스 같이 여러 개의 값이 동시에 들어올 때는 '클래스 속성'을 부여한다.

하지만, id속성 부여할 곳에 class속성을 부여하거나, class속성을 부여할 곳에 id를 부여한다고 해서 에러가 나는 것은 아니다.

일반적인 기준일 뿐이다.

 

<body>에서 id 속성을 잡게 되면, <style>에서 #header ~ 라고 해주면 되고,

class속성을 잡게 되면, .header ~ 라고 해주면 된다.

 

 

728x90
반응형

'JAVA_EE > CSS' 카테고리의 다른 글

[21.09.15] exam06(01_css) -  (0) 2021.09.15
[21.09.15] exam05(01_css) -  (0) 2021.09.15
[21.09.15] exam04(01_css) -  (0) 2021.09.15
[21.09.15] exam03(01_css) -  (0) 2021.09.15
[21.09.15] exam02(01_css) -  (0) 2021.09.15