새로 알게된 것 (= 잊어버렸던 것들)
1. <meta name="viewport" content="width=device-width">
디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미
해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보인다.
2. <span> vs <p>
주로 텍스트를 넣어주는 태그이다.
- span은 element가 있는 딱 그 부분만 차지한다.
- p는 문단 전체를 차지하여 태그를 추가할 때마다 줄이 바뀐다.
3. a target 속성에 "_blank" 값
클릭하면 새창으로 뜨게 한다.
4. id / class
id는 중복사용 불가. class는 중복사용 가능
5. Font familly: Georgia, "Times New Roman", Times, serif
사용자가 어떤 브라우저를 사용할지 모르기 때문에 최대한 여러 폰트를 나열한 것이다.
- serif: 모든 브라우저에서 지원하는 폰트로, 앞의 폰트들을 모두 지원하지 않을 경우 적용된다.
- 'Times New Roman" 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야 한다.
6. blockquote
인용구문을 넣을 때 사용하는 태그로, 브라우저에서 태그 적용 시 양쪽 여백이 기본스타일로 제공된다.
7.
스페이스를 의미하는 코드
8. box-sizing: border-box
width에는 padding이 포함되기 때문에 전체 가로 사이즈를 계산하는 것이 불편하다.
border-box를 사이즈로 지정하고 안에 패딩을 주는 것이 효율적!!
9. 중복 시 우선순위
tag <<<<< class <<<< id <<<<<< inline css
10. block 요소의 크기
- div태그는 자식태그나 div태그 내부에 있는 내용의 세로크기가 곧 div태그의 세로크기가 된다.
- div태그의 가로크기는 div태그의 내부에 뭔가가 있기만 하면 화면 전체의 너비가 곧 자기의 가로크기가 된다.
- div의 사이즈를 css에서 지정해 주지 않으면 html에 있는 텍스트 사이즈로 지정된다.
11. background-size: 100%
그때그때 공부한 내용과 생각을 기록하는 블로그입니다.