홈페이지 스타일링3 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. HTML5 CSS3 홈페이지 스타일링 1 - 박스모델 Box-model 홈페이지를 디자인하다보면 사진과 버튼, 박스 등에 둥근 모서리를 많이 사용하게 됩니다. border-radius 속성으로 어떻게 스타일링 하는지 간단한 코드로 알아봅시다.또 패딩과 마진을 사용하다보면 내가 원한 가로 세로값과 달라지는 경우가 있는데요. box-sizing 속성으로 어떻게 해결해야할지 간단한 코드로 알아봅시다.radius 둥근 모서리border-radius 속성은 사각형 모서리를 둥글게 만들어주는 속성입니다.border-radius :10px; // 모든 모서리border-radius :10px 20px; // 왼쪽상단+오른쪽하단 오른쪽상단+왼쪽하단border-radius: 10px 20px 30px 40px; // 왼쪽상단 오른쪽상단 오른쪽하단 왼쪽하단 box-sizingbox-sizin.. 2024. 6. 18. 이전 1 다음