😇 HTML, CSS에 대해 몰랐던 것들!
!DOCTYPE
- HTML 파일이라면 제일 첫 줄에 위치해야 하는 선언문.
- 이 파일이 이 html파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 한다.
- 가장 최신이자 많이 쓰이는 버전은 HTML5이다.
- 우리가 배우고 앞으로 사용할 버전도 HTML5라고 알고있으면 됨.
meta charset="uft-8"
- 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 한다.
meta name="viewport" content="width=device-width"
- 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보. 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타난다.
CSS 파일 분리 태그
<link href="index.css" rel="stylesheet" type="text/css" />
- link — link태그로 사용할 css파일을 링크해줍니다.
- href — href 속성에 css 파일 경로를 작성합니다.
- type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다. 여기서 css file을 연결하므로 type값은 항상 "text/css"입니다.
- rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성입니다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해줍니다.
box-sizing: border-box;
- 박스의 크기를 화면에 표시하는 방식을 변경하는 속성
- width와 height가 엘리먼트 컨텐츠의 크기를 지정하나, 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다.
- box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 용이하다 !
