html52 HTML5 CSS3 홈페이지 스타일링 3 - 레이아웃속성 플렉스 flex display: flex; //화면 전체 너비를 기준으로 하여 비율에 맞춰 플렉스 아이템들을 배분합니다. flex 속성을 사용한 레이아웃 모델을 플렉스 박스 레이아웃이라고 합니다. box1 box2 box3 유연하게 배치할 요소의 부모 요소(플렉스 컨테이너)에 display 값을 flex로 정합니다. 자식 요소는 플렉스 아이템이라고 합니다. display: inline-flex; // 플렉스 아이템의 크기를 지정하지 않은 경우 플렉스 아이템의 내용 만큼 너비가 지정됩니다. 정렬 기준 속성은 flex-direction으로 flex-direction: row; // 가로축으로 정렬 flex-direction : column; //세로축으로 정렬 flex-direction: row-reverse; //가.. 2024. 6. 27. HTML5 CSS3 홈페이지 스타일링 2 - 포지션 position positionposition 속성은 html 요소를 좌표값(top,bottom,left,right)를 이용하여 원하는 위치에 배치하는 속성입니다.속성의 종류에는-정적인 static-절대적인 absolute-상대적인 relative-고정적인 fixed등이 있습니다. position:static; //속성의 기본값으로 앞에 문서의 흐름을 받는 것을 끊을 때 주로 사용합니다.position:absolute; //절대적인 위치값으로 좌표값 적힌 그대로 위치를 표시합니다.부모의 포지션 속성을 relative로 작성한 후 자식의 포지션을 absolute로 할 경우 부모 위치 기준에서 절대적인 위치로 잡힙니다.position:relative; //상대적인 위치 값position:fixed; //부모요소와 관계가 없.. 2024. 6. 19. 이전 1 다음