무작정 따라하기/패스트캠프(프론트)

[깃허브 예제] BEM 작명 규칙/ body 태그처럼 사용할 코드

자바칩 프라푸치노 2021. 4. 21. 08:16 
<body>
    <!-- body태그 대신 사용할 코드/ 전체 영역 -->
    <!-- body에 왜 __를 두번썼나? -->
<div class="body__container">

</div>
</body>

body부분에 css를 기본적으로 적용을 하고 싶은데

body부분에 스타일이 많이 들어가있으면 좋지 않다.

그렇기에 body태그처럼 사용할 body__container 태그를 써준다

body__container{
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400px; 
    color: #333;
}

 

 

 

BEM 작명 규칙

-: 그냥 이름

__ : ~의 일부분이다

--: ~의 상태를 의미하는 것

ex) body__container: body의 일부분이다.

 

btn--success 

btn--danger

btn--warning 

btn의 상태를 의미

 

그냥 이름

toggle-btn

 

 

전체코드↓

더보기 
body__container{
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400px; 
    color: #333;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GitHub</title>

    <meta name="author" content="javachip">
    <meta name="description" content="GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
    
    <!-- og:Open Graph 다른 사이트에 여기에 대한 정보를 제공한다. -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="GitHub">
    <meta property="og:title" content="Build software better, together">
    <meta property="og:description" content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
    <meta property="og:image" content="img/logo__github.png">
    <meta property="og:url" content="https://github.com">

    <!-- twitter card  -->
    <meta property="twitter:card" content="summary">
    <meta property="twitter:site" content="GitHub">
    <meta property="twitter:title" content="Build software better, together">
    <meta property="twitter:description" content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
    <meta property="twitter:image" content="img/logo__github.png">
    <meta property="twitter:url" content="https://github.com">

    <!-- root환경에 아이콘이 있으면 저절로 파비콘이 설정된다. 생략가능-->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" href="./favicon.png">
    <!-- 스마트폰에 사용되는 파비콘 -->
    <link rel="apple-touch-icon" href="favicon.png">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <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.css" integrity="sha512-IJEbgDEF7OeKJRa0MY2PApnyJHRIsgzCveek4ec8VWQ+7KG3ZSKVNYa5xP/Gh0hVP0Mwb+gBsk+GwR3JQGhQNg==" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <!-- body태그 대신 사용할 코드/ 전체 영역 -->
    <!-- body에 왜 __를 두번썼나? -->
<div class="body__container">

</div>
</body>
</html>
728x90
저작자표시 비영리 변경금지

'무작정 따라하기 > 패스트캠프(프론트)' 카테고리의 다른 글

[깃허브 예제] header에 왼쪽 menu부분 만들기  (0) 2021.04.21
[깃허브 예제] input text Vendor Prefix / webkit/ ms / moz / textbox에 미리써져있는 글씨  (0) 2021.04.21
[깃허브 예제] reset.css / css 초기화 하기t.css / css 초기화 하기  (0) 2021.04.21
[깃허브 예제] 폰트 설정하기 / 구글 폰트  (0) 2021.04.21
[깃허브 예제] 파비콘 설정하기 / 스마트폰에 사용되는 파비콘  (0) 2021.04.21

'무작정 따라하기/패스트캠프(프론트)'의 다른글

  • 현재글[깃허브 예제] BEM 작명 규칙/ body 태그처럼 사용할 코드

관련글

티스토리툴바