2020. 4. 1. 23:46ㆍ생활코딩/생활코딩웹
개요
저번에 배운 css를 사용하여 실습하여본다
실습 1
첫 번째로 할 것은 float를 사용하여 화면을 분할하여 표현하는 것을 실습해볼 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
header
{
border-bottom: 1px solid gray;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1><a href="http://localhost/">Javascript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/javascript.html">자바스크립트란?</a></li>
<li><a href="http://localhost/varandcon.html">변수와 상수</a></li>
<li><a href="http://localhost/operator.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
</ul>
상수란
<ul>
<li>변하지 않는 값</li>
<li>x=10일 때 오른쪽 항인 10이 상수가 된다</li>
</ul>
</article>
</body>
</html>
저번 실습에서 style을 추가하여 header부분을 디자인해봅니다 처음에는 border-bottom를 사용하여 상단과 하단을 구분해주는 선을 긋어주고 폭을 20px 늘려준다
이렇게 상단이 구분되고 다음에는 메뉴를 만들어볼 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
header
{
border-bottom: 1px solid gray;
padding: 20px;
}
nav
{
border-right: 1px solid gray;
width: 200px;
height: 600px;
float: left;
}
</style>
</head>
<body>
<header>
<h1><a href="http://localhost/">Javascript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/javascript.html">자바스크립트란?</a></li>
<li><a href="http://localhost/varandcon.html">변수와 상수</a></li>
<li><a href="http://localhost/operator.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
</ul>
상수란
<ul>
<li>변하지 않는 값</li>
<li>x=10일 때 오른쪽 항인 10이 상수가 된다</li>
</ul>
</article>
</body>
</html>
이번에는 지정한 nav를 디자인해볼 것인데 border-right를 사용하여 오른쪽에 선이 나오도록 하며 width와 height를 사용하여 높이와 길이를 넓혀준다 그리고 float를 사용하여 왼쪽에 배치해줍니다
그리고 이제 마지막으로 어색한 article를 디자인하고 메뉴에 숫자를 지워볼 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
header
{
border-bottom: 1px solid gray;
padding: 20px;
}
nav
{
border-right: 1px solid gray;
width: 200px;
height: 600px;
float: left;
}
nav ol
{
list-style: none;
}
article
{
float: left;
border-left: 1px solid gray;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1><a href="http://localhost/">Javascript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/javascript.html">자바스크립트란?</a></li>
<li><a href="http://localhost/varandcon.html">변수와 상수</a></li>
<li><a href="http://localhost/operator.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
</ul>
상수란
<ul>
<li>변하지 않는 값</li>
<li>x=10일 때 오른쪽 항인 10이 상수가 된다</li>
</ul>
</article>
</body>
</html>위의 코딩을 보면 nav ol {}을 사용하는데 이것은 nav안에 ol태그를 디자인하겠다는 선언입니다 그리고 그 안에
list-style을 사용하여 숫자를 어떻게 바꿀지 지정하고 none을 사용하여 숫자를 지운다 그 후article를 사용하여 디자인을 정해주며 float를 left를 사용하여 화면 왼쪽에 배치한다 그리고 왼쪽으로 선으로 구분하기 위해서 border-left를 사용하며 화면의 폭을 20px로 늘려준다.
완성!
실습 2
이번 마지막 실습은 실습 1의 내용들을 다른 곳에서도 모두 적용하는 것을 만들 것입니다.
이번에는 새로 파일을 만드는데 style.css라는 css파일을 만들어줍니다
header{
border-bottom:1px solid gray;
padding:20px;
}
nav {
border-right:1px solid gray;
width:200px;
height:600px;
float:left;
}
nav ol{
list-style:none;
}
article{
float:left;
padding:20px;
}
h2{
font-size:50px;
}이렇게 css파일을 만들고 이것을 제작한 html에 적용할 것인데요 head안에 코드를 넣어주면 됩니다.
<link rel="stylesheet" type = "text/css" href="http://localhost/style.css">그러면 모든 화면에 적용되는 것을 볼 수 있습니다.
위의 사진처럼 동일하게 적용된 것을 볼 수 있습니다.
참고한 수업 링크