📍 태그 div / span
🔎 div
div = division
div 태그는 block level eliment이기 때문에 화면 전체를 사용한다. 따라서 두 개의 태그가 있을 때 각각 다른 줄로 나타난다.
🔎 span
span 태그는 div와 반대인 inline eliment이다. 각각 용도에 맞게 선택하여 사용하면 된다.
📍 Grid
grid 는 페이지를 다양한 영역으로 나눌 때 사용한다. style 태그 내 Declaratoin에 입력해주면 된다.
display: grid;
grid-template-columns: 150px 1fr;columns는 세로 열을 기준으로 정렬하는 것이며, rows는 가로 행을 기준으로 정렬한다. 예시의 경우, 2개의 열을 사용하며 첫 번째 열은 150px, 두 번째 열은 1fr이다.
fr이란, fraction 분수라는 뜻으로 그리드 컨테이너 내의 공간을 비율화한 것이다. 150px에서 남은 공간을 모두 차지한다. 각각 1fr 1fr인 경우, 2개이므로 1:1 비율로 위치한다.
📍 반응형 웹(Responsive Web)
화면의 크기에 따라 웹페이지의 요소들이 반응하여 최적화되어 변경된다.
@media 를 사용하여 효과를 줄 수 있다.
<style>
div {
border: 10px solid green;
font-size: 60px;
}
@media(min-width:800px){
div {
display:none;
}
}
</style>최소(min)일 때의 길이이므로 screen width > 800px 일 경우를 말한다.
반응형 웹 디자인을 통해 특정한 너비 혹은 길이 등에 따라 CSS를 다르게 줄 수 있다.
📍 재사용성
같은 css 내용을 여러 파일에 적용할 때 일일이 style 태그에서 입력하면 불필요한 중복이 발생한다. 또한 여러 파일을 관리할 때에도 그 번거로움은 배가 된다.
따라서 css 파일을 만들고 이 하나의 파일에서 모두 관리할 수 있다.
<link rel="stylesheet" href="style.css">적용할 여러 파일에 link 태그로 css 파일을 적용할 수 있다.
생활코딩 WEB2-CSS 강의 수강 후 정리한 글입니다.
