CSS 는 Cascading Style Sheets 로 문서를 디자인할 때 사용한다.
CSS 가 없다면 흰 배경에 검은 글자만 있는 형태로 출력이 된다. 따라서 CSS를 잘 활용해야 멋진 웹사이트를 만들 수 있다.
배경 색, 글자 크기
<head>
<style>
div {
width: 50px;
height: 50px;
background-color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>가</div>
</body>
</html><body> 에 <div> 태그를 설정했다. <div> 는 블록으로 좌우 전체 칸을 차지한다.
<div> 태그는 <head> 의 <style> 태그를 통해 값을 설정할 수 있다.
background-color 는 블록의 배경색, font-size 는 글자 크기를 설정할 수 있다.
블록의 크기를 확인해보면, 세로 길이는 지정한 값이지만 가로값은 설정할 수 없다.
인라인(inline) , 인블록-블록(inline-block)
웹사이트 디자인에서 중요한 것은 원하는 사이즈 크기에 내용을 넣는 것이다. 그렇게 하지 않으면 모니터 크기에 따라 웹사이트 디스플레이가 달라지기 때문이다.
<head>
<style>
div {
width: 50px;
height: 50px;
background-color: red;
font-size: 20px;
display: inline;
}
</style>
</head>
<body>
<div>가나다라</div>
<div>가나다라</div>
<div>가나다라</div>
<div>가나다라</div>
</body>
<head> 의 <style> 에 display: inline 를 추가하였다. 이렇게 되면 <div> 는 블록이지만 인라인처럼 사용할 수 있다. 하지만 가로 세로 길이가 50px 임에도 내용물의 크기 만큼 표시된다.
이때 inline-block 을 사용하면 된다.
div {
width: 50px;
height: 50px;
background-color: red;
font-size: 20px;
display: inline-block;
}
</style>
inline-block 을 사용하면 div 크기 내에서 표시된다.
Share article