본문 바로가기

grid5

레이아웃(Layout) 유형05 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이러한 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 overflow:hidden을 설정합니다. 3. clearfix를 설정합니다. 가장 안정적인 방법입니다.. 2022. 7. 29.

레이아웃(Layout) 유형04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이러한 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 다음의 레이아웃을 작업해 보도록 하겠습니다. 컨테이너(Container)를 이용한 레이아웃 배치할 요소들을 감싸는 부모 요소를 컨테이너(container)라고 합니다. 컨테이너를 이용해 레이아웃을 만드는 예시입니다. inherit 속성을 사용하면 자식 요소에게 스타일 속성을 상속할 수 있습니다. *{ margin: 0; padding: 0; } #header{ height: 100px; background-color: #E0F2F1; } #nav{ height: 300px; background: #80CBC4; } #section{ height: 580.. 2022. 7. 29.

레이아웃(Layout) 유형03 레이아웃03 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. CSS로 레이아웃 작업을 하는 방법에는 3가지가 있습니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 .. 2022. 7. 29.

레이아웃(Layout) 유형02 레이아웃02 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. CSS로 레이아웃 작업을 하는 방법에는 3가지가 있습니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 .. 2022. 7. 29.

레이아웃(Layout) 유형 01 레이아웃01 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. CSS로 레이아웃 작업을 하는 방법에는 3가지가 있습니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 .. 2022. 7. 25.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바