클로그, 좋은 것만 기록해요(Clean Log)

flex

Flexible box, Flex Box라고 부른다. 레이아웃 배치 전용으로 사용된다.

flex HTML 구조

- 부모 div.container는 flex container로 불리는데 flex의 영향을 받는 전체 공간을 의미한다.
- 자식 div.item는 flex item이라 불린다.

<div class="container">
 <div class="item">item1</div>
 <div class="item">item2</div>
 <div class="item">item3</div>
</div>

flex 부모속성

display : flex

-

//부모에 적용하는 속성
.container{  display: flex;  //혹은 display : inline-flex;}

display : flex; // 자식요소들이 가로방향으로 배치
display : block; // 자식요소들이 세로방향으로 배치

flex-direction

- 줄바꿈을 결정한다.

.container {
	flex-direction: row; // 아이템을 가로로 정렬
	flex-direction: column; //아이템을 역순으로 가로 정렬
	flex-direction: row-reverse; // 아이템을 세로 방향
	flex-direction: column-reverse; // 아이템들을 역순 세로로 배치
}

flex-wrap

- 컨테이너에 여유가 없을시 아이템 줄바꿈을 설정한다.

.container {
	flex-wrap: nowrap; // 줄바꿈을 하지 않는다.
	flex-wrap: wrap; // 줄바꿈을 한다.
	flex-wrap: wrap-reverse; // 줄바꿈하면서 역순으로 배치한다, 빠져나온 아이템을 앞부분으로 정렬
    	flex-flow: row wrap; //flex-direction, flex-wrap을 한꺼번에 지정할 수 있다.
}

justifiy-content

- 메인축(가로) 방향을 정렬한다.

.container {
	justify-content: flex-start; // row시 왼쪽, column시 위쪽
	jutify-content: flex-end; // // row시 오른쪽 , column시 아래쪽
	justify-content: center; 
	justify-content: space-between; //아이템들 사이를 균등하게 조절한다.
	justify-content: space-around; // 아이템의 둘레를 균등하게 조절한다. 각 왼쪽, 오른쪽
	justify-content: space-evenly; // 아이템의 양끝을 균등하게 조절한다.
}

align-items

- 수직축 아이템을 정렬한다.

container {
	align-items: stretch; // 수직까지 끝까지 늘린다. (스테레칭)
	align-items: flex-start; // row시 위, cloumn시 왼쪽
	align-items: flex-end; // row시 아래, cloumn시 오른쪽
	align-items: center; 
	align-items: baseline; // 텍스트 기준라인으로 정렬한다.
}

* 아이템 가운데 정렬

.container {
	justify-content: center;
	align-item: center;
}

flex 자식속성

flex-basis

- 아이템의 기본 크기를 설정한다.
flex-direction이 row일 시 너비, column일 시 높이를 의미한다.

.item {
	flex-basis: auto; // 
    	flex-basis: 100px; // 100px이 안되는 아이템은 늘어나고, 100px를 넘는 아이템은 변동없다.
}

flex-grow

- 아이템이 flex-basis의 값보다 커질 수 있는지 설정한다.
- 0, 늘어나지 않음 / 1, 늘어난다.

.item {
	flex-grow: 1; // 혹은 0
}

flex

- flex-grow, flex-shrink, flex-basis를 축약해서 사용가능

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 300px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 300px; */
}

​선택자

class

CSS문을 사용하기 위함이며, 페이지에서 여러 개의 요소에 지정가능하다.

- 한 영역에서 여러개 정의하며 재사용이 가능하다.

//제이쿼리 문법
$('.class 값');

//여러개 재사용
<div class="wrap"> <!--전체 길이 조정을 위함-->
 <div class="wrap fluid"> <!--wrap 너비를 유연하기 변경-->
 
 </div>
</div>

name

CSS로 사용불가하며 HTML에서 여러개의 요소에서 지정가능하다.

- form 전송 이벤트 발생시, 서버로 데이터를 전송하며 자바스크립트에서 요소를 탐색하기 위해 주로 사용한다. 

//제이쿼리 문법시
$('[name="값"]');

//form와 자바스크립트
<form>
 <div class='select'>
  <label for='info'></label>
  <select name='info' id='info'>
   <option>뉴스</option>
   <option>연예</option>
   <option selected>만화</option>
   <option>요리</option>
  </select>
 </div>
</form>

const form = document.querySelector('form');
const formDate = new FormData(form);

formData.get('info'); // info의 정보값 추출, 요리

id

HTML에서 교유하게 식별하기 위해 사용하며 페이지에서 하나의 요소만 지정가능하다.

- input태그와 label을 연결하기 위한 식별자

- 표와 표의 설명을 연결하귀 위한 식별자

//제이쿼리 문법
$('#id 값');

//input과 label
<div class="form">
 <label for="id">아이디</label>
 <input type="text" id="id"/>
</div>

//표의 설명
<p hidden id="table-descrition"></p>

<table aria-decribedby="table-descrition">
</table>