css로 그리드 속성 살펴보기!

 저번시간에 배웠던 레이아웃을 그리드로 손쉽게 표현하는 방법이 있다

display: grid; 라는 스타일을 주면 되는데 일단 줘봐도 아무런 변화가 없다

 

먼저 코딩 용어에 대해 짚어보고 넘어가자

코딩에서 가로는 row / 세로는 culumn이라고 부른다

 

그리드의 크기들은 grid-auto-rows: 100px;로 가로 값을 줄 수 있고

세로값은 위에 grid-template-columns: 40% 40% 20%; 로 줄 수 있다 퍼센트를 조절해서 줘보자

grid-template-columns: 1fr 1fr 1fr을 써주면 동일한 면적을 차지하는 그리드를 만들 수 있다

사실 ft 단위가 가장 간편하다 쉽게 숫자로 비율을 조절 할 수 있다

 

그리드 사이의 간격을 표현 하는 것 또한 매우 간편하다

grid-gap: 24px; 명령과 사이간격을 입력해주면 매우 손쉽게 가능하다

 

그리드와 갭사이에 row 혹은 column을 써서 가로나 세로간격만 따로 조절이 가능하다

 

 grid-auto-rows: minmax(100px, auto);그리고 그리드 안의 글자의 양이 박스보다 클때 민맥스 입력을 통해서 

이렇게 늘려줄 수 있다 늘어난 그리드는 글자양과 비례하며 같은 줄의 그리드 또한 같이 늘어난다

 

이제 속성을 살펴 봤으면 직접 적용을 통해서 손에 익숙해 지도록 해보자!

 

서치바 부분에 왼쪽 돋보기 모양을 추가하는 방법을 배울 것이다 :)

<form> << 버튼 등을 추가 할때 form으로 감싸줘야한다

 <header class="search">

      <input placeholder="Search" type="text" />

<button>확인</button> << 버튼을 넣어주고 싶을때

      <img src="img/search.svg">

</header> 

</form>

서치바 코드에서 헤더 태그 사이 인붙 플레이스 홀더 사이에 이미지 파일 경로를 입력해준다

 

인풋 박스안에 타입 설정을 통해 여러 유형의 인풋 박스를 만들 수 있다

<input placeholder="Search" type="text" /> 

<img class="search-id"

src="img/search.svg">

 

text대신에 number, password 등의 코드를 통해 여러가지 유형을 만들 수 있음

tyep= 이라고 입력시 date 뭐 등등 많은 옵션들이 나오니 용도에 맞게 선택해서 사용하면 된다

 

돋보기 아이콘이 오른쪽으로 옮겨 졌는데 이유를 당최 모르겠다 anzi님이 하신 html 과 비교해봐도 다른 점을 하나도 모르겠다... 그냥이대로 들어야지 그리고 다음시간에 애니메이션 효과를 배울 것 같다 집중해서 내껄로 만드려고 노력해야겠다