header .logo a{
background: url("../img/logo.svg");
width: 32px;
height: 32px;
display: block;
text-indent: -9999px;
}
이렇게 로고의 a태그에 작성한 GitHub라는 글자가 겹쳐져서 보인다.
하지만 이것을 지우는게 좋은가?
지우지 않는 것이 좋다.
그럼 어떻게 없애냐!
text-indent로 화면 저 밖으로 밀어낸다
-9999 는 어떤 명시적인 것이므로 다른 것을 쓰지 않고 9999를 쓰도록 한다.
전체 코드↓
더보기
<!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">
<!-- header -->
<header class="section">
<div class="inner">
<div class="menu-group">
<div class="logo">
<a href="#">GitHub</a>
</div>
<ul class="main-menu">
<li><a href="#">Personal</a></li>
<li><a href="#">Open source</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Explore</a></li>
</ul>
</div>
</div>
</header>
</div>
</body>
</html>
/* COMMON */
body__container{
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: 400px;
color: #333;
}
/* BTN */
.btn{
height: 34px;
background: #eee linear-gradient(to bottom, #fcfcfc , #eee);
border: 1px solid #d5d5d5;
border-radius: 4px;
display: inline-flex;
align-items: center;
padding: 0 12px;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
cursor: pointer;
box-sizing: border-bod;
position: relative;
}
.btn:hover::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0 0.7);
}
.btn.btn--primary{
border: 1px solid #65b836;
color: #fff;
background: #55a532 linear-gradient(#91dd70, #55ae2e);
}
/* input text */
.input--text{
height: 34px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
outline: none;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
font-size: 16px;
}
.input--text:focus{
border-color: #51a7e8;
/* 안쪽 그림자는 유지하면서 바깥 그림자도 적용하는 법 */
box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),
0 0 5px rgba(81, 167,232,0.5);
}
/* Vendor Prefix */
.input--text::-webkit-input-placeholder{color: #cacaca;}
.input--text::-ms-input-placeholder{color: #cacaca;}
.input--text::-moz-input-placeholder{color: #cacaca;}
/* header */
header{
border-bottom: 1px solid rgba(0,0,0,0.075);
box-shadow: 0 0 5px rgba(0,0,0,0.75);
background: #fff;
}
header .inner{
max-width: 980px;
height: 78px;
margin: 0 auto;
}
header .menu-group{
display: flex;
align-items: center;
height: 100%;
/* inner의 영향을 받아 78px을 사용함 */
}
header .logo{
margin-right: 10px;
}
header .logo a{
background: url("../img/logo.svg");
width: 32px;
height: 32px;
display: block;
text-indent: -9999px;
}
header .logo a:hover{
background: url("../img/logo_on.svg");
}
header .main-menu{
display: flex;
}
header .main-menu li a{
/* padding을 주면 크기가 늘어난다. */
/* margin을 주면 글씨(버튼)이 너무 작기 때문임 */
/* 그런데 a 태그는 inline이라서 패딩을 사용할 수 없음 */
display: block;
padding: 10px;
color: #3c4146;
}
728x90
'무작정 따라하기 > 패스트캠프(프론트)' 카테고리의 다른 글
| [깃허브 예제] order을 통해서 요소의 순서 바꾸기/ submit버튼 안보이게 하기 (0) | 2021.04.21 |
|---|---|
| [깃허브 예제] header 오른쪽 상단 메뉴 만들기/ 만드는 순서? / 왼쪽과 오른쪽으로 나누기 header 오른쪽 상단 메뉴 만들기/ 만드는 순서? / 왼쪽과 오른쪽으로 나누기 float / clearfix (0) | 2021.04.21 |
| [깃허브 예제] header에 왼쪽 menu부분 만들기 (0) | 2021.04.21 |
| [깃허브 예제] input text Vendor Prefix / webkit/ ms / moz / textbox에 미리써져있는 글씨 (0) | 2021.04.21 |
| [깃허브 예제] BEM 작명 규칙/ body 태그처럼 사용할 코드 (0) | 2021.04.21 |