전편에 이어 나머지 css속성과 사용방법등에 대해 정리하겠다.
box-sizing 요소의 너비와 높이를 계산하는 방법을 지정하는데 기본값은 content-box이며 margin계산을 뺀 border-box 속성도 있다.
display : 요소를 블록과 인 라인 요소 중 어느 쪽으로 처리 할 지와 함께, 자식 요소를 배치할 때 사용할 레이아웃을 설정 이에 대한 속성중에는
inline-block : 요소를 한 줄에 배치하면서 블록 요소 처럼 width, height, margin과 padding등을 지정
block : 특성을 가지는 요소(block 레벨 요소)로 지정
이런 요소들이 있다 또한
vertical-align : inline, inline-block 또는 table-cell box에서의 수직 정렬을 지정
resize : 요소의 크기를 조정할 수 있는지 여부와 방향을 결정
opacity : 오패서티는 요소의 불투명도를 설정. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도 등의 속성을 공부했었다.
또한 마진 상쇄에 대해서도 알아봤는데 한쪽의 마진이 큰 경우 다른 한쪽의 마진과 겹치는 현상을 뜻한다. 인접한 두 박스가 블럭 속성일떄만 나타나며 이를 해결하기 위해서는 padding의 지정이나 inline속성을 부여해서 해결할 수 있다.
더 나아가 기존에 블럭 요소들을 옆으로 붙이려면 float을 이용해 붙여야했는데 flex를 이용하면 더 간단하게 해결할 수 있다.
다만 이때는 무조건 그 사용하는 클래스에 display옵션을 flex로 주어야한다.
.row{flex-direction:row;}
.row-reverse{flex-direction: row-reverse;}
.column{flex-direction: column;}
.column-reverse{flex-direction: column-reverse;}
이러한 속성들이 있으며 이를 이용해 박스들을 더 효과적으로 배치할 수 있다.
또한 align-items: center; /수직 가운데 flex에서만 가능/
justify-content: center; /주축의 가운데 flex에서만 가능/ 의 방법으로 가운데로 정렬할 수있다.
게시판
- 번호
- 제목
- 작성자
- 작성일
- 조회수
<ul>
<li class="num">3</li>
<li class="subject"><a href="#">HTML 강좌입니다.</a></li>
<li class="name">프론트</li>
<li class="date">2022-03-21</li>
<li class="hit">5</li>
</ul>
<ul>
<li class="num">2</li>
<li class="subject"><a href="#">CSS 강좌입니다.</a></li>
<li class="name">디자인</li>
<li class="date">2022-03-21</li>
<li class="hit">5</li>
</ul>
<ul>
<li class="num">1</li>
<li class="subject"><a href="#">자바스크립트 강좌 입니다.</a></li>
<li class="name">다자바</li>
<li class="date">2022-03-21</li>
<li class="hit">5</li>
</ul>
</div>
<div class="page-navigation">
<div class="paginate">
<span>1</span>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
<div class="board-footer">
<div class="left-footer">
<button type="button" class="btn">새로고침</button>
</div>
<div class="center-footer">
<form action="">
<select name="condition" class="form-select">
<option value="all">제목+내용</option>
<option value="name">작성자</option>
<option value="subject">제목</option>
<option value="content">내용</option>
<option value="reg_date">등록일</option>
</select>
<input type="text" name="keyword" class="form-control">
<button type="button" class="btn">검색</button>
</form>
</div>
<div class="right-footer">
<button type="button" class="btn">등록하기</button>
</div>
</div>다음과 같은 레이아웃을 짜는 방법에는 또한 grid라는 방법이 있는데
grid-template-rows/grid-template-columns 를 이용하면 된다
flex와 마찬가지로 display는 grid로 선언되어야하고 사이의 간격을 조절하고 싶을때는 gap을 이용해서 여백을 주면 된다
display: grid;
grid-template:repeat(3,auto)/repeat(2,auto);
gap:10px;}
.item {
font-weight: 900;
font-size: 25px;
border: 1px solid #333;
border-radius: 3px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.item1 { background : rgb(255, 100, 70); }
.item2 { background : rgb(255, 165, 0); }
.item3 { background : rgb(50, 205, 50); }
.item4 { background : rgb(255, 105, 180); }
.item5 { background : rgb(30, 145, 255); }
.item6 { background : rgb(170, 170, 170); }
Grid Layout
grid-template : grid-template-rows, grid-template-columns, grid-template-areas의 단축 속성
gap : 그리드 라인(행/열) 사이 간격(Gutter)을 조정
등장순서를 표기하는 order 행,열을 다루는 span을 이용해 다양한 효과를 낼 수 있다.
마지막으로 반응형 웹을 위한 미디어 태그까지 정리하며 css는 마무리 했는데 코드첨부로 마치겠다.
반응형 웹을 위해서는 미디어 쿼리를 사용하여야 하는데 이는
미디어 쿼리 : 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만드는 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-size: 14px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}
.container{
width: 1200px; margin: 20px auto 10px;
border: 3px solid black;
}
.header{
width: 100%; background: #e4f7ba;
padding: 20px;
text-align: center;
}
.body-main:after{
content: ''; clear: both; display: block;
}
.article{
float: left; width: 75%; height: 500px; background: #eee; padding: 15px;
}
.side{
float: left; width: 25%; height: 500px; background: yellow;
padding: 15px;
}
.footer{
width: 100%; background: gray;
padding: 20px; text-align: center;
}
/*max width 가장 큰화면 사이즈의 레이아웃을 기본으로 점차 축소하는 형태로 css작성*/
@media(max-width:1200px){
.container{width: 95%;border: 3px solid red;}
}
@media(max-width:768px){
.container{width: 100%;border: 3px solid red;}
}
@media(max-width:468px){
.container{width: 100%;border: 3px solid red;}
.header{height: 300px;}
.article{float: none;width: 100%;height: 300px;}
.side{float: none;width: 100%; height: 300px;}
}
@media(max-width:320px){
.container{width: 100%; border: 3px solid tomato;}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>헤더입니다.</h1>
</div>
<div class="body-main">
<div class="article">
메인입니다.
</div>
<div class="side">
사이드입니다.
</div>
</div>
<div class="footer">
<h3>푸터입니다.</h3>
</div>
</div>
</body>
</html>이렇게 사용하며 페이지의 크기에 따라 화면이 바뀌는 것을 볼 수 있다.
무언가 너무 대충적지는 않았나 많이 생략했나 싶은데 어디까지나 가장 기본적인 부분에 대해서 배우기도 했고 전문적으로 프론트를 공부하지는 않을 것이기에 이정도 태그 속성에 대해 이해하고 필요할때 찾아쓸 수 있는 찾아서 이해할 수 있도록 정리하며 복습하겠다. 이만!
