본문 바로가기

SITE/LAYOUT5

레이아웃05 레이아웃05 전체 영역이 들어간 구조로 세부적인 요소들은 부모컨테이너를 만들어서 가운데 영역으로 레이아웃을 설정한다. 이번 레이아웃은 좀 더 심화과정으로 들어간다. float을 이용한 반응형 레이아웃 CSS 스타일을 효율적으로 주기 위해서는 html 마크업을 깔끔하게 선언할 줄 알아야 한다. 때문에 먼저 레이아웃 분석 및 요소의 이름을 잘 선언하는 것이 중요하다. clearfix를 이용한 float의 영역깨짐 방지 1. 깨지는 영역에 clear:both를 설정한다. 2. 부모 박스 영역에 overflowf: hidden을 설정한다. - 애니메이션 효과가 적용되지 않는다. 3. clearfix를 설정한다. - 깨진 레이아웃 요소의 부모요소에게 클래스로 이름을 선언해준다. div class="containe.. 2022. 8. 5.

레이아웃04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조이다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정한다. float을 이용한 레이아웃 + 부모요소 컨테이너 사용방법 아이디 클래스 선택자 선언 id : 한 번 정도 사용하는 것이 좋으며 전체적인 틀, 스크립트에서 많이 사용한다. id로 선언할 경우 후에 고치는 것이 까다롭다. class : 두개 이상 (중복 가능)사용이 가능하며 후에 고치는 것이 유동적인 편. 주로 세부적인 영역이나 반복적인 것에 많이 사용된다. *{ margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background.. 2022. 7. 29.

레이아웃03 레이아웃03 메인에 사이드와 아티클 3개가 들어간 구조 float을 이용한 레이아웃 + 반응형 float은 본래 레이아웃의 용도가 아니었으나 마땅한 속성이 없어 사용하게되었다. 둥둥 뜨는 형태로 float 속성이 적용이 안된 blockbox는 float된 box 밑으로 들어가게 된다. 때문에 배치이동이 필요한 요소에 float을 이용하면 세로로만 배치되던 요소를 가로로 나란히 배치해줄 수 있다. 주 사용 속성 float: left; - 요소를 위로 뜨게 하여 왼쪽으로 배치해주는 속성으로 자신이 갈 수 있는 가장 첫번째 왼쪽에 배치가 된다. clear: both; - float을 한 요소아래로 다른 요소가 숨어버리는 버그를 잡아주는 역할의 속성 보통 footer와 같은 하단 요소에 스타일을 적용한다. cl.. 2022. 7. 29.

레이아웃02 레이아웃02 사이드가 2개인 웹사이트 구조 float을 이용한 레이아웃 + 반응형 float은 본래 레이아웃의 용도가 아니었으나 마땅한 속성이 없어 사용하게되었다. 둥둥 뜨는 형태로 float 속성이 적용이 안된 blockbox는 float된 box 밑으로 들어가게 된다. 때문에 배치이동이 필요한 요소에 float을 이용하면 세로로만 배치되던 요소를 가로로 나란히 배치해줄 수 있다. 주 사용 속성 float: left; - 요소를 위로 뜨게 하여 왼쪽으로 배치해주는 속성으로 자신이 갈 수 있는 가장 첫번째 왼쪽에 배치가 된다. clear: both; - float을 한 요소아래로 다른 요소가 숨어버리는 버그를 잡아주는 역할의 속성 보통 footer와 같은 하단 요소에 스타일을 적용한다. * { margi.. 2022. 7. 29.

레이아웃01 레이아웃01 웹사이트에 대한 가장 기본적인 형식의 레이아웃 레이아웃을 마크업할 때 주이할 점 : 레이아웃을 처음부터 세부적으로 뜯기보단 전체적인 것부터 먼저 선언해나가는 것이 효율적이다. 만약 부모 → 자식 → 자식1 = 자식2 라면 먼저 부모 마크업 뒤 스타일 속성을 선언하고 그다음 자식 그다음 자식1과2 이런 순서로 진행하면 된다. float을 이용한 레이아웃 + 반응형 float은 본래 레이아웃의 용도가 아니었으나 마땅한 속성이 없어 사용하게되었다. 둥둥 뜨는 형태로 float 속성이 적용이 안된 blockbox는 float된 box 밑으로 들어가게 된다. 때문에 배치이동이 필요한 요소에 float을 이용하면 세로로만 배치되던 요소를 가로로 나란히 배치해줄 수 있다. 주 사용 속성 float: le.. 2022. 7. 27.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바