html 콤보박스, 그리드 레이아웃

 

 

html 콤보박스 

 

html 콤보박스는 위 사진에 보이는것처럼 사용자에게 선택입력을 받을 수 있는 것입니다. 

 

 

<form>
	<select name = "place">
		<option value = "none">!선택!</option>
		<option value = "seoul">서울</option>
		<option value = "busan">부산</option>
		<option value = "dan">대전</option>
		<option value = "incheon">인천</option>
	</select>
</form>

 

 

• select name을 정할 수도 있습니다. 
• option value를 정할수도 있습니다. 

 

 

 

CSS 그리드 레이아웃 

 

그리드는 디자인을 레이아웃하는 방법입니다. 

 

텍스트, 이미지, 그래픽 요소를 계층구조로 구성하는 일관된 프레임워크를 보장합니다. 

 

그리드는 격자구조를 만드는 행, 열, 모듈로 구성되어있습니다. 

 

flex는  한 방향의 레이아웃 시스템이며, grid 는 두 방향(가로-세로) 레이아웃 시스템이다

 

=> 그러기에 더욱 복합적인 레이아웃 표현이 가능하다 

 

 

 

 

grid 레이아웃 만드는 방법

 

 

1. html-> 컨테이너와 아이템 

 

<div class = "container">
	<div class = "item">A</div>
    <div class = "item">B</div>
    <div class = "item">C</div>
    <div class = "item">D</div>
</div>

 

부모요소가 => 그리드 컨테이너

자식 요소가 => 그리드 아이템 

 

.container{
	display:grid;
 }

 

 

 

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

참고했습니다.