레이아웃3 HTML & CSS : Flex box로 웹사이트 레이아웃 구성해보기 실습 css파일 @charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Noto+Sans+KR:wght@100&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 100%; } header { width: 99%; height: 100px; margin: 5px; border: 3px solid #ccc; font-family: 'Do Hyeon', sans-serif; text-ali.. 2022. 12. 19. HTML & CSS #16 : Flex Box Layout 플렉스 박스 레이아웃 (Flex Box Layout) Grid Layout을 기본으로, Flex Box를 원하는 위치에 배치하는 것 display 속성 배치되는 요소들을 감싸는 부모요소를 플렉스 컨테이너로 지정 display: flex | inline-flex 속성값은 flex(플렉스 박스를 박스 레벨 요소로 정의), inline-flex(플렉스 박스를 인라인 레벨 요소로 정의) flex-direction 속성 플렉스 항목 배치 방향을 지정 flex-direction: row | row-inverse | column | column-inverse flex-direction: column; 으로 지정하면 세로방향을 쌓인다. (위->아래) flex-wrap 속성 플렉스 항목을 한 줄 또는 여러 줄로 배치하는.. 2022. 12. 19. HTML & CSS #09 : CSS Layout CSS 포지셔닝 웹 문서 요소를 적절히 배치하는 것 box-sizing 속성 박스 모델 너비 값의 기준을 지정한다. content-box, border-box float 속성 요소를 왼쪽이나 오른쪽으로 floating 하게 만드는 것. left, right, none clear 속성 float 속성을 무효화 시키는 속성 none, left, right, both both 많이 사용 position 속성 웹 문서 안에 요소들을 배치하기 위한 속성 static, relative, absolute, fixed static : 요소를 문서에 흐름에 맞춰 배치 relative : 이전 요소에 연결해 배치. 위치 지정 가능. (left나 top으로 요소 이동 가능) absolute : 원하는 위치에 배치. 부모 요.. 2022. 12. 13. 이전 1 다음
