먼저 레이아웃을 디자인 하기 위해서 body 사이에 header, nav, article, aside, footer 을 넣고 아래의 예제와같이 각각 위치의 부분에 임의대로 텍스트를 넣어 줍니다.
전체의 태그를 디자인하기 위해서는 div class 로 container 를 넣고, style 시트를 각각 속성을 넣어주시면 됩니다. style css 로 header 부분은 border-bottom 1px 로 헤드부분의 하단에 선을 넣습니다.
nav 는 float 를 left 를 넣어서 width 는 120px border-right 오른쪽에 선을 넣습니다. article 에도 마찮가지로 float 속성을 left 를 넣고 센터 부분으로 width 크기를 300px, border-left, border-right 각각 1px 왼쪽과 오른쪽에 각각 선을 넣습니다. margin-left -1px 를 넣어서 중복된 선을 제거할수가 있습니다.
footer 는 clear 속성으로 both를 넣어서 자신의 영역의 위치를 지정할수가 있습니다. border-top 1px 로 상단에 테두리를 넣고 text-aling 를 center 속성을 지정하여 텍스트를 중앙에 넣습니다.
css에서 style 의 float 속성을 이용하여 고정된 크기의 레이아웃을 만들어 보았으며 실제로 반응형으로 사용을 할수는 없기 떄문에 여러 속성을 익히는데 도움이 될수가 있습니다.
css에서 style 의 float 속성을 이용하여 고정된 크기의 레이아웃을 만들어 보았으며 실제로 반응형으로 사용을 할수는 없기 떄문에 여러 속성을 익히는데 도움이 될수가 있습니다.
