이제 오른쪽 메뉴를 만들어보자
그런데 서브메뉴/ 검색/ 버튼 순서대로 이다.
이 순서로 만들어야하나?
그렇지 않다.
개발자 도구로 들어가본다
이렇게 나오는데 햄버거 버튼 안에 메뉴가 들어가있다.
이렇게 메뉴/ 버튼/ 검색 메뉴가 된다.
이렇게 기본적으로 위에서부터 아래로 쌓이는 개념을 먼저 작업해주어야한다
a태그 밑줄 없애기
a{
text-decoration: none;
} <div class="sign-group">
<div class="btn-group">
<a href="#" class="btn sign-in">Sign in</a>
<a href="#" class="btn btn--primary sign-up">Sign up</a>
</div>
<form id="search-form" method="POST" action="">
<!-- 이것은 고유해야하기 때문에 id를 정해준다 -->
<input type="text" id="search" class="input--text" placeholder="Search GitHub">
<input type="submit" value="Submit">
</form>
<ul class="sub-menu">
<li><a href="#">Pricing</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>어떻게 요소들을 좌 우로 나누어야하나?
지금 이렇게 세로로 되어있는데 저
sign in 버튼 부터 pricing까지가 오른쪽 상단으로 가야한다
그것은 float을 사용하면 된다.
2021.04.17 - [WEB/html,CSS] - [html][css] float 속성에 대해 / 수평 수직 정렬/ float해제 / clearfix
[html][css] float 속성에 대해 / 수평 수직 정렬/ float해제 / clearfix
■float 요소에 float속성을 적용하면 적용된 요소 주변으로 text가 흐르게 된다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard d..
sso-feeling.tistory.com
<div class="container clearfix">
<div class="item"></div>
<div class="item"></div>
</div>.container{
border: 4px solid red;
}
.item{
width:100px;
height: 100px;
}
.item:nth-child(1){
background:orange;
float:left;
}
.item:nth-child(2){
background:blue;
float:right;
}
.clearfix::after{
content:"";
clear: both;
display:block;
}
clearfix를 하지 않으면 요소가 붕 뜬 상태이기 때문에 부모 요소에는 아무것도 없는 상태가 되어 부모 요소가 쪼그라든다.
그래서 부모 요소에 clearfix를 해주어야함
/* float clearfix */
.clearfix::after{
content:"";
clear: both;
display: block;
}
.float--left{
float: left;
}
.float--right{
float: right;
}공통적으로 사용할 수 있게 이렇게 정의해준다
그리고 해당 요소에 클래스명만 부여해주면 된다.
전체코드보기
더보기
<!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 clearfix ">
<div class="menu-group float--left">
<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 class="sign-group float--right">
<div class="btn-group">
<a href="#" class="btn sign-in">Sign in</a>
<a href="#" class="btn btn--primary sign-up">Sign up</a>
</div>
<form id="search-form" method="POST" action="">
<!-- 이것은 고유해야하기 때문에 id를 정해준다 -->
<input type="text" id="search" class="input--text" placeholder="Search GitHub">
<input type="submit" value="Submit">
</form>
<ul class="sub-menu">
<li><a href="#">Pricing</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support</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;
}
a{
text-decoration: none;
}
/* 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-box;
position: relative;
color: #333;
}
.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;}
/* float clearfix */
.clearfix::after{
content:"";
clear: both;
display: block;
}
.float--left{
float: left;
}
.float--right{
float: right;
}
/* 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;
}
header .main-menu li a:hover{
color:#4078c0;
}
header .sign-group{
display: flex;
}728x90
'무작정 따라하기 > 패스트캠프(프론트)' 카테고리의 다른 글
| [깃허브 예제] 중간부분 visual section만들기 / section의 공통 css정의 (0) | 2021.04.21 |
|---|---|
| [깃허브 예제] order을 통해서 요소의 순서 바꾸기/ submit버튼 안보이게 하기 (0) | 2021.04.21 |
| [깃허브 예제] text - indent 화면에 글자 안보이게 하기 / 상단 좌 메뉴 만들기 / 로고 이미지 hover (0) | 2021.04.21 |
| [깃허브 예제] header에 왼쪽 menu부분 만들기 (0) | 2021.04.21 |
| [깃허브 예제] input text Vendor Prefix / webkit/ ms / moz / textbox에 미리써져있는 글씨 (0) | 2021.04.21 |