html Livivg Standard
📌 HTML
시맨틱한 마크업으로 코딩?
유지보수 목적으로, 다른 사람이나 기계(특히 검색엔진)가 해당 마크업을 읽고 그 의도를 알 수 있는 코드로 작성하는 것
* h1~h6는 익명 영역을 생성 > article이나 section에 넣기 권고
* Open Fraph Protocol(facebook...)
* https://ogp.me/
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
* https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
* Entity Code
* https://entitycode.com/
📌 CSS 기초
1. 구성 selector {property : value;}
2. 역할
html로 뼈대를 만들고, 예쁘고 꾸며주는 코드
3. 정확한 명칭
CSS background and Borders Module Level3
- 이전 css level1과 css level2는 개발하는 데 9년이라는 너무 긴 시간이 걸림
- 그래서 지금은 'Module'(css 기능을 작은 단위 개발하고 먼저 업데이트하는 방식)
- 이제는 단순하게 'CSS'라고 통일되게 지칭하자
4. 선택자 우선 순위
5. CSS 적용 방법
1) 인라인 방식
html 태그 안에 직접 설정
2) 내부 스타일 시트
html 부분에 <style> </style>로 작성
3) 외부 스타일 시트
따로 CSS 파일을 만들어 <link>로 연결
<head>
<link rel="stylesheet" href="css/foo.css">
</head>
4) 다중 스타일 시트
css파일 안에 다른 css파일 불러오는 방법
5) @ (at-rule) 문법
@import
다른 스타일 시트 불러오기(@charset 바로 다음 선언)
@font-face
디바이스에 없는 폰트 다운받아 적용할 떄 사용
@keyframes
애니메이션 제작 때 사용
@supports
특정 css 속성을 브라우저가 지원하는지 확인하고 스타일을 선언하고자 할 떄
** 실제 사용은 다른 실습 수업 시간에 진행
📌 RESET CSS
브라우저에 설정된 기본 CSS 속성들을 초기화하는 극단적이지만 필수적인 과정
왜? 브라우저마다 너무 다른 기본 CSS 디자인 때문에 개발자가 통일된 디자인 화면을 구현하기가 어려움. 그래서 아예 초기화를 시켜서 모든 브라우저에 통일되게 보이도록 디자인을 하기 위해 초기화
/* reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
