이 글은 패스트 캠퍼스 HTML/CSS, Javascript 수업 내용을 바탕으로 하여 작성되었습니다.
1. META tag
- 웹페이지에 대한 정보를 검색엔진이나 브라우저에 제공
<meta charset="UTF-8" /> //표준화 된 인코딩 방식
<meta name="author" content="TIA HWANG" /> //사이트 제작자 이름
<meta name="description" content="This is the BEST!" /> //사이트에 대한 설명
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
// user-scalable = no 사용자가 디바이스를 사용할때 확대 방지
(레이아웃 무너지지 않게 하기 위한 장치)
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
//익스플로러에서 렌더링되는 방식을 설정2. block vs. inline
2-1. block element: div, h1 ,p
- 사용가능한 최대 넓이(max-width)를 사용
- 크기 지정 가능
- (width:100%; height:0;)
- 수직으로 쌓임
- margin, padding 위/아래/좌/우 사용가능
- 레이아웃 잡는 용도
2-2. inline element: span, img
- 필요한 만큼의 너비를 사용
- 크지 지정 불가(가로값/세로값을 가질 수 없다)
- (width:0; height:0;)
- 수평으로 쌓임
- margin, padding 위/아래 사용불가
- 텍스트 작업 용도
3. 전역속성(Global Attributes)
3-1. data-
- 사용자가 데이터 속성을 정의할 수 있음
- Javascript에서 사용할 데이터를 HTML에 저장
<div id="me" data-my-name="tia">TIA</div>const me = document.getElementById("me");
console.log(me.dataset.myName); //"tia"3-2. draggable
Drag and Drop API사용 가능여부 지정
4. Font
4-1. font-variant
- 영어 소문자를 작은 대문자로 만들어 줌
<body>
<p style="font-variant: small-caps">Tia Hwang</p>
</body>
프론트엔드 개발자로 취업하기