html&css 과제를 하기 전 완벽히 알지 못했던 것들 혹은 이렇게 되는 것 같았는데,,,하고 넘어갔던 것들을 아래와 같이 써보면서 정리하고자 한다. 다음주부터는 자바스크립트에 들어가니 오늘 안으로 정리를 좀 해두면 좋을 것 같기도 하고 아직 어느 분야로 갈지는 명확히 정하진 않았지만 어떤 분야이든 html과 css를 해석은 할 줄 알아야 할 것 같아서 공부하고 있다. 따라서 혼자 이것저것 만져보고 궁금했던 것들은 검색해서 정리하였으므로 틀린 점이 있을 수 있다.
inline요소 & block요소
HTML 태그는 크게 inline요소와 block요소로 이루어져 있다.
- inline 요소
- width, height를 지정할 수 없다.
- content의 길이만큼을 너비로 가진다.
- 인라인요소 다음에 오는 인라인요소는 줄바꿈이되지 않고 우측으로 붙어서 나열된다.
- line-hight : 줄의 높낮이 설정
- text-align : 요소 배치위치 설정(left, right, center)
- 종류 : br, button, strong, span 등
- div { display: block } : block요소로 변경
- div { display: inline-block }
- 영역은 인라인요소로 변경되지만 내용은 블럭요소로 지정되어 width, height속성을 지정가능
- block 요소
- width, height로 너비, 높이 설정 가능하다.
- padding, margin 등으로 요소 간 및 요소 내 여백 설정이 가능하다.
- 화면의 가로길이 전체를 너비로 가진다.
- 블록요소 다음에는 자동으로 줄바꿈이 된다.
- line-height, text-align 사용 불가능
- 종류: div, p, pre, footer, form, h1, h2, h3, h4, h5, h6, header
display: flex; flex-wrap, align-items
- display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, flex처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정.
- flex-wrap: nowrap; --> 기본, 무조건 한 줄에 배치
flex-wrap: wrap; --> 원래 크기 지키면서 flex-direction에 맞게 화면에 나타내줌 
- align-items: flex-start;
- 맨 위부터 나타나게 해준다.
- flex-end, center등이 있다.
position: relative / absolute
position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.
top, right, bottom, left속성이 요소를 배치할 최종 위치를 결정
- static : 기본값으로 일반적인 문서 흐름에 따라 배치한다. top, bottom, right, left 속성에 영향을 받지 않는다.
- relative : 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다.
- absolute : 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다. 최종 위치는 top, right, bottom, left 값이 지정한다.
부모 요소 중 relative가 없는 경우 html기준으로 배치한다. - fixed : 일반적인 문서 흐름에서 제거하고, 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 한다. 최종 위치는 top, right, bottom, left 값이 지정한다.
inline요소에서 이 속성으로 지정해주면 display속성이 block이 되어서 width와 height 적용이 가능하다.
참고 및 출처
1. https://junistory.blogspot.com/2017/07/html5.html
2. https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox