자식요소 : flex item (부모요소에 맞춰 쪼그라들음)
- display: flex
부모요소에 display속성을 flex로 주면 자식 요소들이 가로정렬 됨
<부모요소 : flex container>
- flex-wrap: wrap
wrap : 자식요소 너비가 부모보다 커지면 밀려서 다음줄에 표현됨(자식요소의 크기는 유지)
- justify-content: center
flex item들을 중앙에 배치
- justify-content: flex-start
justify-content 가로축 기준 정렬
왼쪽부터 start 오른쪽 end
- align-items: center
align-items 세로축 기준 정렬
<자식요소 : flex item>
- flex-grow: 1
자식요소들이 부모 너비에 맞추기 위해 일정한 간격으로 너비를 늘림 - 1 : 1 : 1의 비율
- flex-shrink: 0
자기 너비를 유지함 (찌그러짐 방지)
<bootstrap 적용>
- flex 적용 : class="container d-flex align-items-center py-3"
- py-3 : 패딩을 y축으로 위아래 3px씩
- 백터이미지 : 용량적고 깨짐없음
- input
<style>
input {
display: block;
}
#input1 {
width: 100%;
color: rgb(77, 77, 77);
background-color: #fff;
border: 1px solid #ced4da;
}
</style>
</head>
<body>
<input type="text" id="input1">
<input type="text" class="form-control" placeholder="입력하세요">포트폴리오 메뉴 영역 만들기
- header : semantic tag 영역 구분만을 위해 넣음
d-flex flex적용
py-3 : 패딩을 y축으로 위아래 3px씩
ms-3 : magin start 3
1일 1커밋 1일 1벨로그!