HTML CSS : display, flex

HTML CSS

-display:inline or inline-block : 요소를 가로로 정렬한다. 만약, ul태그안 li태그에 inline or inline-block를 적용하면 세로로 정렬된 태그들이 가로로 정렬된다. 더불어, inline 속성이 적용되면 li태그에 태그 기호도 사라지게 된다. 여기서, inline 요소는 같은 줄에 포함되는 것을 의미한다.

-display:none/block/inline/inline-block: none 설정시 화면에서 보이지 않음. block 설정시 블록으로 설정. inline 설정시 인라인 박스로 설정. inline-block 설정시 블록과 인라인 박스의 중간 형태로 설정.

이때, block은 기본적인 div가 갖게 되는 값으로, 설정하면 width:100%으로 설정되어 가로 한 줄을 모두 차지하게 된다.

-display:flex : display에 flex가 적용되면 flex 컨테이너가 기본적으로 생성된다. flex 설정시 부모 요소의 자식 요소들은 부모 요소 안 컨테이너에 포함되어 가로로 inline처럼 가로 정렬된다. 또한, 자식 요소들은 자동적으로 내용물의 width만큼 자리를 차지하게 된다. 또한, height는 컨테이너의 높이 만큼 차지한다.

-아이템들이 배치되는 방향을 '메인축'이라고 하고 메인축과 수직이 되는 축을 '수직측' 또는 '교차축'이라고 한다.

-flex-direction:아이템들이 배치되는 축의 방향을 결정하는 속성이다. flex-direction이 row면 아이템들이 가로로 배치, colum이면 세로로, row-reverse면 역순으로 가로 배치, colum-reverse면 역순으로 세로 배치가 된다.

-flex-wrap:컨테이너가 더 이상 아이템들을 한 줄에 담을 수 없을 때 아이템들의 줄바꿈을 어떻게 할지 설정하는 옵션이다. nowrap이면 컨테이너 밖으로 삐져나가 줄바꿈 하지 않고, wrap이면 줄바꿈하여 float나 inline-block처럼 작동하고, wrap-reverse면 줄바꿈을 하는데 삐져나간 아이템들은 해당 줄 위로 배치된다.

-justify-content:메인축 방향 정렬을 정의한다. space-between이면 아이템들 간에 균일한 간격을 생성한다. flex-start는 아이템을 시작점으로 정렬하며 기본값이다. flex-end면 아이템을 끝에서 정렬한다. center면 아이템들을 중앙으로 정렬한다. space-around면 아이템들의 둘레에 균일한 간격을 생성한다. space-evenly면 아이템들간의 간격과 양 끝에 균일한 간격을 생성한다.

-align-items:수직축 방향으로 아이템을 정렬을 정의한다. 컨테이너 안의 아이템들을 박스 내 세로로 정렬하는 옵션이다. center면 아이템을 가로로 정렬한다.

-flex:flex 속성을 한번에 사용할 수 있는 옵션이다.

​

출처: https://studiomeal.com/archives/197 

​

-nav태그:다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용한다. 웹 페이지간(문서간) 이동을 할 때 nav태그를 활용하여 정의하면 된다. 일반적으로, 메뉴, 목차, 인덱스가 이에 해당한다.

-tabindex 요소:tabindex는 스크린 리더를 사용하는 사용자에게 Tab을 눌렀을 때 포커스의 이동 순서를 임의로 조정할 수 있게 하는 요소이다.

​

-fieldset 태그:<form> 요소에서 연관된 요소들을 하나로 묶을 때 사용하는 태그이다. 사용자의 입력을 입력받아 서버로 전송할 때 하나의 태그로 묶어 사용한다.

​