ex01_gnb.html

gnb(global nevigation bar)

-> UL(Ul tag 목록태그)

-> 링크 밑에 a태그 이동할 수 있어야 해서

-> void(0) : 아무연결없는상태

-> 필요없음(앞에 여백 40px 불필요한 여백 생김)

초기화 : 구글링해서 가져다쓰기

-> 공통 : '블록 요소' 다 적음

-> 주지 x

내용물까지가 박스크기?

테두리까지가 박스크기?

-> 테두리까지가 box의 크기임

-> a 태그 색깔 파란색, 보라색(밑줄도 가있음)

-> CSS 초기화 마무리

-> 여백이 없어짐에 의해서 글머리표가 사라짐
(진짜로 없어진 건 아니고 화면에 출력이 안됨)

-> 화면 밖으로 나가서 안보이는 상황
-> 화면 위치 옮기면 다시 보이는 상황

-> 전부 block 요소(끝까지 영역 차지)

-> 수평 배치

(1) Float, clear(수평배치하는애들이 다 형제관계일때 쓰는것)

-> float과 clear이용하는 방법은 좋지 않음

(2) Float, overflow

★★★(3) display (쉬운방법)

-> 3가지 중 한가지 선택하기!

고전적 방법 : float + overflow 속성

1. 박스를 만들고 박스를 수평으로 배치

-> 전부 띄우면 오른쪽으로 배치하는 수평 레이아웃이 됨




-> a는 인라인 요소라서 너비, 높이가 안되서
a를 키울것임


-> 각 메뉴가 조금 커짐

-> 대충 가져다 대도 찍힘

-> 정확하게 글자 위에 갖다대야 찍힘(이유: a태그의 영역이 인라인요소이기 때문에)

-> 클릭이 되는대가 빨간 영역밖에 안됌(메뉴의 나머지영역도 클릭할 수 있는 대상에 포함시키고 싶음)

★★★많이하는작업

-> 글자가 아닌 녀석을 클릭할수 있게 만들어야함

-> width : 80px 만큼

-> 여백도 클릭가능

-> 높이 40px = line-height 40px 로 맞춰줘야 '글자 세로 가운데 정렬' 효과를 줌

영역 봐가면서 하는것이 좋음

-> ul의 내부 여백

-> 마우스를 덮었을때 효과 보려면 추가작업 해야함
-> 마우스를 선택했을때 글자 색깔 바꾸기

-> 마우스를 가져다 대면 글자 색깔이 변함

미션)

display 방법을 활용하는 방법

-> 부모의 ul태그의 display : flex 보면서

-> 유연한 형태로 좌,우 형태로 배치가능(작업이 금방 끝남)

-> 수평 layout은 끝남

->크기지정

-> 예상함

세로 가운데 : line-height : 40px(높이 맞춰주기)
가로 가운데 : text-align : center

-> 위 ,아래 공통선으로 테두리 만들기

justify-content : center(

-> 바꿔주는 메뉴

-> 다 가운데로 옴

hover

-> 아래쪽 테두리 : border-bottom

-> 대각선 방향 ; 둥글게 되어있음

-> 왼쪽, 오른쪽 쪼개는 박스

-> action 도 #으로 해놓고 나중에 채우기

-> form 태그: block(form 태그 요소 : 인라인)
-> block안에 block들어감

->양옆으로 배치하기 위한 두개 묶어줄 부모가 필요함(쉽게 배치가 안됨)

수평으로 배치하고 싶다-> 부모를 만들기 !

1. 
   -> 입력상자 테두리를 둥글게 다듬을 수 없음

2. 원래 이렇게 만듦(input만 혼자두지 않음)
   
   -> box가 있고 안에 일부만 input으로 채우는것

-> input이 아니라 box안에 들어있는 input임(테두리가 안보일뿐)

아이콘 넣기

-> fontawesome은 cdn으로 제공함(주소를 알아낼 수 있게)
-> 주소를 link로 포함, import로 포함시킴
-> 아이콘 선택 메뉴 2개

-> icon을 받을 수 있는 주소

-> 아이콘과 입력상자 연결을 위해서 아이콘을 label 태그로 묶어주기

-> 왼쪽, 오른쪽 아이를 묶어주는것

-> log_wrap 이랑 left_wrap 과 right_wrap이 부모-자식 관계가 될 수 있도록 만들기


-> 부모 기준 : 450px의 70%
-> 박스 사이에 간격 주고 싶어서 2%남김

-> 중간으로

space-between : 왼쪽 박스와 오른쪽 박스가 조금 떨어지게 만들기

-> icon과 input이 같은줄로 옴

450*0.7 = 315px

450*0.28 = 126px

-> 275px (반응형 작업 x -> 고정값 자격)

clac 함수 쓰는 방법도 있음

-> 40px로 높이 맞춰도 됨

-> 테두리 없애고 함

-> icon-input_wrap에 테두리 있어야함

-> 값을 3개 주는 방법

-> 11시 5시만 5px 주기

-> 바깥쪽은 둥근데 안쪽이 뾰족하게 튀어나온것

-> 부모, 자식에서 같은값 주면 원래 맞지 x : 비슷한 값을 주고 조금씩 맞추기

-> 왼쪽에 여백을 주기

-> input 주면 삐져나감






-> 34px

★tip) F12 누르고 하면 좋음

-> 미리보기 가능

-> 선택할 때 보이기는 하지만 없앨 수 있음

-> 입력상자 선택 : focus해도 테두리가 보이지 않음

-> 뒷부분 input_wrap 을 하얀색으로 주면 됨

-> 복사해서

-> 끝에 잘린 이유? 안쪽 상자가 네모난데 뾰족한거 뚫고 나와서








-> 테두리 사라짐