[CSS] 생활코딩 8~11 _ 박스모델, 그리드
안녕하세요~ 보라해바라기입니다.
비가 추적추적 와서 그런지.. 오늘따라 정말 귀차니즘이 도졌지만..
막상 강의를 들으니까 또 재미있더군요 ㅎㅎ
웹페이지를 만드는 것은 결과가 바로바로 눈에 보이니까
금방 흥미를 되찾게 되는 것 같아요~
오늘도 배운 내용을 정리하고 저의 웹페이지를 공개하도록 하겠습니다~ 렛츠 기릿!
참고로 HTML에서는 <!-- 문장 --> 으로 주석 처리를 했다면
CSS에서는 C언어와 마찬가지로 /* 문장 */ 이렇게 주석처리를 하면 된답니다!
1. 박스 모델
- block level element : 화면 전체를 쓰는 태그
- inline element : 자기 자신의 부피, 콘텐츠 크기만큼 부피 갖는 태그 (부분)
- <style> h1, a { border: 5px solid red; } </style>
- 콤마(,)와 border의 요소들을 한 번에 기술함으로써 중복을 제거. border 안에서 순서는 중요하지 않음.
- display : inline ; => 부분으로 표현.
- display: block ; => 전체로 표현
- display: none ; => 화면에서 사라짐.
또한 박스 모델을 활용할 떄 중요한 개념들이 있답니다!
- content : 내용
- padding : 컨텐츠와 테두리 사이의 간격
- border : 경계
- margin : 테두리 사이의 간격
- width : 폭
각 요소들의 값을 조정해 디자인적으로 보기 좋아보이게 만들어 주는 거랍니다!
실행화면을 보여주는 웹 페이지에서 마우스의 오른쪽을 누르면 검사라는 항목이 있는데요.
이를 누르면 자신이 만든 각 요소들의 padding, border, margin이
얼만큼의 부피를 차지하고 있는지와 그 값을 알 수 있답니다~
다음은 box.html을 새로 생성하여 박스모델을 활용해본 소스코드와 실행 결과입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
border:5px solid red;
padding:20px;
margin:20px;
display:block;
width:100px;
}
</style>
</head>
<body>
<h1>CSS</h1>
<h1>CSS</h1>
</body>
</html>
2. 그리드
h1와 같이 어떤 의미를 포함하는 태그뿐만 아니라
디자인을 위해 아무런 의미가 없는 태그를 사용해야 하는 경우가 생긴답니다?
그럴 때 <div>와 <span> 태그를 사용할 수 있어요 ㅎㅎ
- div는 block level element로 자동 줄바꿈이 됨.
- span은 inline element로 자동 줄바꿈이 되지 않음.
그리드를 이용해 2개 이상의 내용을 한 줄에 동시에 나타낼 수 있게 된답니다!
2가지 내용을 한 줄에 나타내기 위해 클래스를 사용하여야 하는데
<div id="grid"> 내용 </div> 이런식으로 말이죠.
다음은 그리드를 활용한 소스코드와 실행결과입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid purple;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
박스모델과 그리드를 제 웹페이지에 적용시켜보니
이전보다 훨씬 근사한 페이지가 만들어졌어요!!!
한 페이지에서 여러 내용을 선 하나로 구분하는 것에도 생각보다 많은 노력을 기울여야 함을 느꼈네요 ㅎㅎ
저의 웹페이지 중 일부의 소스코드와 실행 결과를 보여드리고 오늘 글 마무리 하도록 하겠습니다!
<!doctype html>
<html>
<head>
<title>보해의 인생_Present</title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
#active {
color: red;
}
.saw {
color:gray;
}
a {
color:purple;
text-decoration: none;
}
h1 {
font-size:45px;
text-align:center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
h2 {
text-align: center;
}
ol {
border-right: 1px solid gray;
width: 150px;
margin: 0;
}
h4{
margin:0;
padding:20px;
}
#grid{
display:grid;
grid-template-columns: 200px 1fr;
}
#grid ol{
padding-left: 30px
}
#grid #article{
padding-left: 20px;
}
</style>
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<div id="grid">
<ol>
<h4>목차</h4>
<li><a href="1.html" class="saw"> 과거</a></li>
<li><a href="2.html" class="saw" id="active"> 현재</a></li>
<li><a href="3.html"> 미래</a></li>
</ol>
<div id="article">
<h2>보라해바라기의 현재</h2>
<p>나는 현재 <a href="http://www.knu.ac.kr/wbbs/" target="_blank" title="KNU">대학교</a> 3학년에 재학 중이다.
나의 꿈은 <strong><u>웹개발자</u></strong>이다. <u>3학년 여름방학</u> 전까지는 막연하게 개발자가 되어야겠다고 생각했다.
<br>하지만 여러 영상을 찾아보며 내가 입문하기 가장 쉽고 흥미를 느낄 수 있는 개발자 분야가 웹개발자라는 것을 차츰 알게 되었다.</p>
<img src="coding.jpg" width="450">
<p style="margin-top:25px;">웹 프로그래머가 되기 위해서는 HTML, CSS, JavaScript를 필수로 알아야한다. 나는 현재 생활코딩님의 영상을 보며 HTML을 아주 얕게나마 배우고 있다.
<iframe width="560" height="315" src="https://www.youtube.com/embed/tZooW6PritE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</div>
</div>
</body>
</html>