<meta>
에 적어줘야하는 내용들이다.<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) 색, 링크없음 등등...
대문자는 쓰지 말것.
section {
width: 100%;
background-color: #fff;
position: relative;
}
css selecteor {
width : 100%
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
css selecteor {
list-style: none;
padding: 0;
margin: 0;
}
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>