mordern web boiler method

강정우·2022년 12월 21일
0

HTML, CSS

목록 보기
20/27
post-thumbnail

open Graph Protocol

  • open graph protocol은 다른 사이트에서 웹페이지 링크 주소를 걸었을 때 눈으로 보이는 형태의 정보를 적고 그것을 변환해주는 기술이다.
  • 다음은 <meta>에 적어줘야하는 내용들이다.
  1. 타입
  2. 제목
  3. 간략정보
  4. 대표이미지
  5. url
  6. 사이트 이름

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>
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글