<Head>에 존재하는 <h1>과 <a>에 대한 property인 border-width, border-color, border-style을 통해 얼마나 많은 박스를 차지하고 있는지를 알 수 있다.
<h1>은 제목이므로 한 줄을 차지하는 block level element이고 <a>는 주어진 공간만 차지하는 inline level element임을 을 알 수 있다.
그러나 이것은 default값일 뿐이지, <h1>에 대해서도 display:inline; 또는 width=100px;과 같은 코드를 넣으면 <a>처럼 주어진 공간만 차지하도록 바꿀 수 있다.
만약 요소를 잠시 안보이게 하기 위해서는 display:none; 을 사용하면 된다.
Pading, Border, Margin이 헷갈린다면 위 그림을 참고하자.
border-width:5px; border-color:red; border-style: solid와 같이 따로따로 쓸 수도 있지만 효율을 위해 border: 5px solid red; 와 같이 써주면 더 깔끔하다. 이 때 5px, solid, red 등 value의 순서는 상관없다.
Content와 본문 사이 내용을 떨어트리기 위해서 h1 selector 내에 padding 관련 인자를 넣을 수 있다.
Border 바깥쪽으로도 간격이 기본적으로 존재하는데 이를 조절하기 위해 margin=20px; 와 같이 사용할 수 있다. (없애기 위해서 margin=0;을 사용할 수도 있음)
웹페이지에서 오른쪽 마우스를 클릭하고 검사라는 항목을 클릭하게 되면 CSS적 요소인 margin, border, padding, width 등에 대한 설정을 알 수 있다.
만약 제목과 본문을 나누기 위해 제목 밑쪽에 선을 그리고 싶다면?
<h1>에 대해 border-bottom=solid 1px gray; 와 같이 지정하면 된다.
목차를 왼쪽에 둔다고 가정하고, 본문과의 구분을 위해 오른쪽에 선을 긋고 싶다면?
border-right=solid 1px gray;와 같이 설정한다.
이렇게 설정한 경우 제목 밑에 그은 라인과 서로 떨어져있는데, 이것은 margin이 있기 때문임을 검사를 통해 확인할 수 있었다.
margin=0;로 설정해주고 선이 리스트 텍스트와 너무 붙어있으므로 padding=20px;로 조정한다.
그리드
아무런 의미도 없는 태그 <div>, <span>
division의 약자로 기본적으로 block level element이므로 여러 내용들이 줄 단위로 나오게 된다.
<span> 역시 의미는 없으며, 기본적으로 inline level element이므로 여러 내용들이 한 줄에 이어서 나오게 됨
어떤 요소들을 나란히 두고 싶다면?
<div></div> 안에 자식 <div></div> 여러 개를 나란히 두면 됨.
만약 부모 <div>에 id=”grid”라는 값을 부여한 후 <head>의 <style>에서 #grid {} selector 안에 display:grid; grid-template-columns: 150px, 1fr로 설정하게 되면, 자식 <div>중 위에 있는 것은 너비가 150px로 고정되고, 아래 쪽에 있는 <div>는 창이 커짐에 따라 크기가 자연스럽게 늘어나게 된다.
참고로 fr은 화면 전체를 기준으로 했을 때 비율을 뜻하는 것으로, 만약에 grid-template-columns: 1fr 1fr 이면 두개의 div가 같은 비율을 차지하게 되고 2fr 1fr이면 2:1의 비율로 나뉘게 된다.
이러한 grid 기능은 모든 웹브라우저에서 허용하는 것은 아니다.
어떤 브라우저에서 허용되는지 알고 싶으면 caniuse 라는 사이트를 이용하여 검색창에 grid라고 쓰게 되면 브라우저마다 사용 가능한 버전을 알려준다.
caniuse.com에서 grid 요소를 쓸 수 있는 브라우저에 대해 검색해본 결과
반응형 디자인
반응형 디자인이란, 화면의 크기에 반응하여 웹페이지의 요소가 동작하는 것이다.
만약 화면 크기를 알고 싶다면?
오른쪽 마우스 클릭 → 검사 선택하여, 오른쪽 경계의 화면 조절하는 커서 나왔을 때 클릭하여 조절하다 보면 우측 상단에 (width) px * (height) px 이라는 정보가 나온다.
만약 화면의 크기가 800px 보다 커질 때 display를 none으로 하고 싶으면?
<head> 부분에 @media(min-width:800px){ div {display:none;} } 이라는 코드를 사용하면 된다. 이러한 코드를 미디어 쿼리라고 한다.
정리하며
매 파일마다 <head>와 <body>에 <style>을 짜야할까?
<style>과 관련된 부분을 css파일로 저장해두고 <head>에서 <link>를 이용해 import하면 된다.
이렇게 하면 여러 개의 파일에서 같은 <style>을 적용할 수 있고, css 파일만 수정하면 여러 문서의 형식이 동시에 바뀌는 파격적인 효과가 발생한다.
Cash : 한번 다운받았던 것을 미리 저장해둠으로써 나중에 로딩할 때 중복 다운로드를 막고 데이터 측면에서의 경제성을 높이는 기능으로, css 파일도 cash에 많이 포함된다.
