딱딱한놈 꽃단장 시켜주자고
이번시간에는 우리의 딱딱한 친구 html 을 좀 더 예쁘게 화장시켜줄 수 있는 CSS에 대해
정리해보려한다.
레츠고!
지난 시간에 배웠던 html 에 이어서 오늘은 진짜 간단하게 css 라는 친구에 대해 정리하려한다
주로 html의 head 부분에 style 태그로 작성된다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
width: 100%;
font-family: sans-serif;
}
header{
height: 200px;
background-color: aqua;
}
section{
height: 1500px;
background-color: gray;
}
footer{
height: 400px;
background-color: blueviolet;
}
#converse {
max-height: 400px;
border-radius: 15px;
position: relative;
margin: auto;
display: block; /*너비가 100% 가 아닐때만 사용가능*/
}
form.login {
width: 300px;
height: 300px;
background-color: brown;
}
div.box {
background-color: pink;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<header>
<h1>헤더입니다</h1>
</header>
<section>
<h1>섹션입니다</h1>
<a href="http://naver.com">네이버 바로가기</a>
<img src="C:\Users\dlgks\Desktop\컨버스_빈티지.png" alt="이미지가 없습니다" id="converse">
<form action="" class="login">
<input type="text">
<input type="password">
<input type="submit" value="제출하기">
<div class="box">
<h2><a href="http://naver.com" style="color: black;"><span>안녕 나는 div야</span></a></h2>
</div>
</form>
</section>
<footer>
<h1>푸터입니다</h1>
</footer>
</body>
</html>이렇게 각 부분 header, section, footer 을 지정해 꾸며줄 수 있고 #=id 값을 이용하거나 특정 구역 .class 로 지정해 줄 수도 있다.
페이지 내에서 최대 크기, 너비등을 지정해주고, 배경컬러, 여백, 페이지내에서의 위치 등 여러가지를 꾸밀 수 있다.
그리고 이렇게 작성하게 될 경우 style 태그가 너무 길어지고 복잡해질수 있기에 css 파일을 따로 만들어 불러올 수도 있다.
<!DOCTYPE html>
<html>
<head>
<!-- css 분리해 파일로 불러오기 -->
<link rel="stylesheet" href="C:\Users\dlgks\Desktop\basic2_style.css">
</head>
<body>
<header>
<h1>헤더입니다</h1>
</header>
<section>
<h1>섹션입니다</h1>
<a href="http://naver.com">네이버 바로가기</a>
<img src="C:\Users\dlgks\Desktop\컨버스_빈티지.png" alt="이미지가 없습니다" id="converse">
<form action="" class="login">
<input type="text">
<input type="password">
<input type="submit" value="제출하기">
<div class="box">
<h2><a href="http://naver.com" style="color: black;"><span>안녕 나는 div야</span></a></h2>
</div>
</form>
</section>
<footer>
<h1>푸터입니다</h1>
</footer>
</body>
</html><분리한 css 파일>
body{
width: 100%;
font-family: sans-serif;
}
header{
height: 200px;
background-color: aqua;
}
section{
height: 1500px;
background-color: gray;
}
footer{
height: 400px;
background-color: blueviolet;
}
#converse {
max-height: 400px;
border-radius: 15px;
position: relative;
margin: auto;
display: block; /*너비가 100% 가 아닐때만 사용가능*/
}
form.login {
width: 300px;
height: 300px;
background-color: brown;
}
div.box {
background-color: pink;
width: 150px;
height: 150px;
}이제 페이지를 꾸밀 수 있는 친구 css 에 대해서도 알아봤다.
그럼 이런 꾸미기 툴을 모아둔 곳이 있다면 얼마나 좋을까?
그런 사람들을 위한 천국이 있는데 바로 bootstrap 이란 사이트 이다.
해당 사이트에선 이미 만들어져있는 기본 css 틀을 가져올 수 있으며 조금씩 수정해서 내가 원하는 스타일을 만들 수 있다
단 가져오기 위해 임포트 비슷하게 해줘야하는데
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
</body>
</html>요렇게 사이트 내에서 알려준 대로 두 줄만 붙여넣어 주면 된다.
그 이후에는 docs 에서 원하는거 서칭해서 가져오면 끝!
마무리
이번시간에 배운 css, 그리고 해당 css가 방대하게 쌓여있는 부트스트랩이란 사이트를 활용하면서
평소 어디서 많이 봤다 싶은 것들을 내가 만들 수 있다는것에 새삼 놀랐다.
오늘 배운것만 잘 활용해도 내가 만들고 싶은 소규모의 사이트는 만들 수 있을듯?!
