1-1 HTML / CSS (basic)

주요 키워드 CSS BOX MODEL / DISPLAY / BOX-SIZING / FLEXBOX / PARENT-CHILD 관계 / POSITION

 

> HTML :  모든 요소는 사각형 박스 / 웹페이지의 구조를 표현하는 언어

> CSS :  박스의 색과 위치 선정 / HTML이 어디에 어떻게 보일지를 정하는 규칙이다.

 

• CONTENT : 이미지, 텍스트 입력 공간
• PADDING : 배경색은 padding까지 포함
• BORDER : 박스를 감싸는 경계선
• MARGIN : 레이아웃 간격 조절의 핵심

--> 실제 박스 크기(width) = content + padding + border

 

> display 속성 : 박스의 행동 규칙과 그 안의 배치 규칙을 동시에 정한다. ->기본흐름을 정하는 속성

• display : block > 한줄을 통째로 차지하는 박스 / 세로흐름
• display : inline > 텍스트 흐름 안에 들어가는 박스 / 박스지만 글자의 일부로 취급
• display : inline-block > 줄을 새로 만들지 않음 / width, height 가능 / margin-top, margin-bottom 가능

> flexbox  부모가 배치를 통제한다. 줄방향을 내가 정한다. 부모-자식 관계 : div는 부모, p는 자식

<div class="parent">
 <p class="child">Hello</P>
</div>

.container {
    display: flex;
}

<div class="container">
   <div class="item"></div>
   <div class="item"></div>
</div>

*/ flex container: display:flex 가 적용된 부모
flex item : 컨테이너의 직계 자식 */

 기타 FLEX BOX 속성 다루기.

.container {
   display: flex;
   flex-direction: row;  /* 기본값, cloumn 시 주축-세로 */
   justify-content: flex-start /* 기본값, 아이템을 주축의 시작점에 모음. center/space-between */
   align-items: stretch /* 교차 방향 정렬. center: 교차축 중앙에 맞춤 / flex-setart, flex-end */
   gap: 16px /* flexbox 의 간격 도구 */
   position: relative /* 기준점 만들기. 자기자신이 기준점이 됨. */
   position: absolute /* 기준점 기준으로 붙이기 가장 가까운 부모 기준 없으면 body 기준*/
}