open Graph Protocol
- open graph protocol은 다른 사이트에서 웹페이지 링크 주소를 걸었을 때 눈으로 보이는 형태의 정보를 적고 그것을 변환해주는 기술이다.
- 다음은
<meta>에 적어줘야하는 내용들이다.
- 타입
- 제목
- 간략정보
- 대표이미지
- url
- 사이트 이름
favicon
- favorite + icon의 준말로 파비콘사이트에서 정말 다양한 사이즈의 사진들을 zip file로 다운받을 수 있다.
modern web을 만들기 위한 boiler <head>
<head>
<meta charset="UTF-8">
<title>제목 작성</title>
<meta name="description" content="강정우 홈페이지">
<meta name="keywords" content="강정우, 자소서">
<meta name="author" content="KangJeongWoo">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Open Graph (Facebook, Linkedin) -->
<meta property="og:type" content="website">
<meta property="og:title" content="유도부">
<meta property="og:description" content="유튜브이 짝뚱 아류작 유도부!">
<meta property="og:image" content="./img/youtube.png">
<meta property="og:url" content="https://www.youtube.com/">
<meta property="og:site_name" content="유튜브">
<!-- twitter card(Twitter) -->
<meta name="twitter:card" content="summary">
<!-- card 종류 : summary, photo, player -->
<meta name="twitter:title" content="유도부">
<meta name="twitter:description" content="유튜브이 짝뚱 아류작 유도부!">
<meta name="twitter:image" content="./img/youtube.png">
<meta name="twitter:url" content="https://www.youtube.com/">
<meta name="twitter:creater" content="강정우">
<!-- favicon 설정 -->
<link rel="icon" href="./img/favicon-16x16.png">
<link rel="apple-touch-icon" href="./img/favicon-16x16.png">
<link rel="short icon" type="image/x-icon" href="./img/favicon-16x16.png">
<!-- CSS reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/81385b77d5.js" crossorigin="anonymous"></script>
<!-- generic font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
</head>-
이때 CSS 설정은 초기화 부터! 순서를 안 지키면 다 설정해놓고 초기화가 되어버릴 수 있다!
-
CSS 작명 규칙 (BEM : Block Element Modifier)
절대적인것은 아니며 그냥 참고용이다.
단어와 단어 사이는 (-) ~의 하위요소일 때는 (__)
~의 상태를 나타낼 땐 (--) ex) 색, 링크없음 등등...
대문자는 쓰지 말것.
background
section {
width: 100%;
background-color: #fff;
position: relative;
}- 여기서 position을 relative를 주는 이유가 여기 화면 위에 통상 어떠한 요소를 absolute로 갖다 쓰기 때문에 편의상 바로 relative를 줌.
box-shadow
말줄임표 css set
css selecteor {
width : 100%
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}li로 div 표시할 때 set
css selecteor {
list-style: none;
padding: 0;
margin: 0;
}- 이때 왜 padding고 margin값도 주느냐? li를 style을 제거하여 쓸 때 단순히 점은 사라지지만 li가 갖고있는 고유의 padding과 margin값들은 사라지지않는다. 따라서 둘다 초기화를 해주어야한다.
반응형으로 글자 짧게하기
css selector {
display :visible;
}
@media only screen and (max-width : 980px){
css selector{
display : none;
}
}호환성 및 기타 도움이 되는 사이트
-
기능을 검색해볼 때 참조하면 도움이 되는 사이트
모질라 web API tab -
IE11까지 JS(ES6) 문법 호환해보기
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="js/mains.js"></script>
智(지)! 德(덕)! 體(체)!