본문 바로가기
달밤에 코딩하기/HTML CSS Tip!

미리 작성하면 좋은 코드 정리

Rosa.Kim 2021. 8. 20. 23:47

HTML Head

Head 영역 한눈에 보기

<head>
    <meta charset="UTF-8">
    <title>제목</title>
    <meta name="author" content="제작자 이름">
    <meta name="Description" contents="홈페이지 설명">
    
    <!--VIEWPORT-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
    
    <!--익스플로러 문서 모드-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    
    <!--오픈 그래프-->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="사이트 이름">
    <meta property="og:title" content="페이지 제목">
    <meta property="og:description" content="설명">
    <meta property="og:image" content="img/썸네일_이미지.png">
    <meta property="og:url" content="https://url.com">
    <!--트위터 카드-->
    <meta property="twitter:card" content="summary">
    <meta property="twitter:site" content="사이트 이름">
    <meta property="twitter:title" content="페이지 제목">
    <meta property="twitter:description" content="설명">
    <meta property="twitter:image" content="img/썸네일_이미지.png">
    <meta property="twitter:url" content="https://url.com">


    <!--파비콘-->
    <link rel="icon" href="favicon.ico">
    <!--익스플로러 파비콘-->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <!--스마트폰 파비콘-->
    <link rel="apple-touch-icon" href="favicon.png">


    <!--구글 폰트-->
    <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=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    
    
    <!--리셋 css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <!--개인 css 링크-->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" media="(max-width:1024px)" href="css/main_medium.css">
    <link rel="stylesheet" media="(max-width:768px)" href="css/main_small.css">
    
    
    <!--개인 js 링크-->
    <script defer src="./main.js"></script>
</head>

 

 

 

상세 설명

Viewport

viewport로 디바이스 표시 영역에 대한 정의가 가능하다.

 

  1. width : 화면에 표시 될 가로사이즈를 정의할 수 있다. device-width는 "기기의 가로 값을 사용하겠다."라는 의미다.
  2. initial-scale : 초기 화면 배율 설정이다. 1일 경우 "화면의 사이즈를 원본 사이즈(1)로 사용 하겠다."라는 의미다.
  3. user-scale : 사용자가 확대 및 축소를 허용하는가 여부를 정의할 수 있다.
  4. maximum-scale : 최대 확대 비율 설정이다. 1을 설정할 경우 확대 되지 않는다.
  5. minimum-scale : 최소 축소 비율 설정이다. 1을 설정할 경우 축소 되지 않는다.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">

오픈 그래프와 트위터 카드

오픈 그래프와 트위터 카드는 해당 사이트가 공유될 때, 정보를 표시하기 위해 정의하는 것이다.

 

<!--오픈 그래프-->
<meta property="og:type" content="website">
<meta property="og:site_name" content="사이트 이름">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="설명">
<meta property="og:image" content="img/썸네일_이미지.png">
<meta property="og:url" content="https://url.com">

<!--트위터 카드-->
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="사이트 이름">
<meta property="twitter:title" content="페이지 제목">
<meta property="twitter:description" content="설명">
<meta property="twitter:image" content="img/썸네일_이미지.png">
<meta property="twitter:url" content="https://url.com">

파비콘

파비콘은 익스플로러 / 스마트폰 / 그외 브라우저를 고려하여 아래와 같은 코드가 작성되어야 한다.

 

<!--파비콘-->
<link rel="icon" href="favicon.ico">
<!--익스플로러 파비콘-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!--스마트폰 파비콘-->
<link rel="apple-touch-icon" href="favicon.png">

 

 

 

 

 

 

 

CSS

한눈에 보기

/*COMMON*/
.body__container{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
}
a{
    text-decoration: none;
}
/* FLOAT CLEARFIX */
.clearfix::after{
    content: "";
    clear: both;
    display: block;
}
.float--right{
    float: right;
}
.float--left{
    float: left;
}
/* SECTION & INNER */
.section{
    position:relative;
}
.section .inner{
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}

 

 

 

상세 설명

Common

  1. body__container : 전체적으로 적용되어야 하는 사항을 body__container class에 정의한다.
  2. a : 전체 a태그의 밑줄 스타일을 제거한다.
/*COMMON*/
.body__container{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
}
a{
    text-decoration: none;
}

Float

  1. clearfix::after : float을 제거하는 class style이다. float을 적용한 부모에 적용해야 동작한다.
  2. float--right : float right를 적용하는 class style이다.
  3. float--left : float left를 적용하는 class style이다.
/* FLOAT CLEARFIX */
.clearfix::after{
    content: "";
    clear: both;
    display: block;
}
.float--right{
    float: right;
}
.float--left{
    float: left;
}

Section과 inner

구역을 구분하는 section과 중앙 정렬에 필요한 inner는 코드상 큰 틀에 해당한다. 이 큰틀 position relative를 주어 자식 요소가 position absolute를 가질 경우 영역 밖으로 벗어나지 않도록 안전장치를 해주는 것이 좋다.

 

/* SECTION & INNER */
.section{
    position:relative;
}
.section .inner{
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}

 

'달밤에 코딩하기 > HTML CSS Tip!' 카테고리의 다른 글

헥사(HEX) 투명도(%) 적용하기  (0) 2023.01.11
CSS 이름 작명 규칙 (BEM)  (0) 2021.08.16
Placeholder 스타일 적용하기  (0) 2021.08.15
float 부모 높이 값 문제 해결하기  (0) 2021.08.15

'달밤에 코딩하기/HTML CSS Tip!' Related Articles

티스토리툴바