패스트 캠퍼스의 온라인 강의 중 Heropy님의 Github 따라 만들기 예제 실습 내용을 정리한 것입니다. 사이트 제작의 전체적인 흐름을 정리하고 나중에 토픽 하나하나씩 정리해볼게요.

header__inner

실제 섹션을 묶는 역할 container/inner/wrapper 등의 div 자주 이용
header tag html5shiv?

header의 이너에 높이값을 주는 이유
header의 높이 기본값 height:auto; 자식요소에 영향을 받기 때문에 inner에 높이값을 넣으면 1번만 정의해도 됨.

<style>
header .inner {
	margin:0 auto;
}
/*margin:0 auto 를 이용한 가운데 정렬은 가로 크기가 정해져야 사용가능*/
</style>

.inner는 구조상 그리드를 가운데 위치시키기 위한 요소이므로 매번 작성하지 않는 게 관리에 더 용이

.inner 자식 내용을 float로 정렬
클리어픽스 전역 스타일 생성

<style>
/*common style에 정의*/
.clearfix::after {
	content:"";
	clear:both;
	display:block;
}
.float--left {}
.float--right {}

/*float 클래스를 전역변수로 정의*/
</style>

flaot 해당요소에 float--left 전역 스타일 사용
float 부모요소에 clearfix 전역 스타일 사용

menu-group

header .menu-group {
	display:flex;
	align-items:center;
	height:100%;
}

logo

<a href="#">로고 이름</a>

<style>
header .logo a {
	background:url("../img/logo.svg");
	/*화면상에서 사라지게 하지만 구조적으로 남아있게 해서 대체텍스트 역할을 하게 함*/
	text-indent:-9999px; /*-9999px 대체 텍스트 역할이라고 약속된 부분*/
}
</style>

a 태그 안에 있는 로고 이름은 지우면 안됨
img 태그의 로 삽입하면 alt 처럼 대체 텍스트 삽입을 위해서
css 배경으로 이미지를 넣을 경우 대체 텍스트 역할을 하게 하려면 구조적으로 텍스트를 남겨놓고 화면상에서 보이지 않게

<style>
header .logo a:hover{
	background:url("../img/logo_on.svg");    
    }
</style>

main-menu

클릭 영역 확대를 위한 실질적인 링크 클릭 영역은 a태그로 정의됨.
a태그는 inline 요소이기 때문에 padding 사용 불가능 -> display:block; 버튼 영역 확보

sign-group

위에서부터 아래로 쌓이도록 구조를 만들어야함
예제의 경우에는 버튼 - 검색 - 서브메뉴

<style>
header .sign-group {
	display:flex;
}
</style>

수평 구조로 만들기 위해 flex 추가
자식요소에 order 추가하여 순서 제어

btn-group(sign-in sign-up)

a 태그에 전역스타일로 미리 정의했던 .btn.btn--primary적용

<style>
  header .sub-menu {
  display:inline-flex;
  }
</style>

inline 요소는 줄바꿈을 띄어쓰기 하나로 인식하므로 제어하기 힘든 공백이 생김 이런 경우 inline을 block 요소로 변경

#search-form(form input)

<form id="search-form" method="post" action="">
	<input id="search" class="input--text" type="text" placeholder="Search">
	<input type="submit">
</form>

form 및 input에 id 추가 (데이터 입력은 고유한 것이기 때문)
id는 부모요소 선택자 사용하지 말기(비효율적)
input 전역스타일로 미리 정의했던 .input--text 적용 placeholder
input type="submit" 필요하지만 화면상에 나타나지 않게 숨겨야 함

method="post" 추후 변경 가능 메소드..뭘까...

<style>
  /* 형제 선택자 + 타입 선택자*/
  #search + [type="submit"] {
  	display:none;
  }
  </style>

sub-menu