반응형 코딩 참고

반응형 코딩 시 참고할점

* 박스를 한번씩 더 감싸줘야 한다.

#header 안에 .header_in

: #header{width:100%} / .header_in{width:1200px;margin:0 auto;}

만약에 상단 메뉴 형태가 왼쪽에 메뉴, 가운데 로고, 오른쪽 메뉴의 형태라면, position으로 위치를 지정한다.

 

1.#main_contents 안에 컨텐츠 한줄이 100%일 경우

width:100% 주고 media에 따라 조정할때 좌우 padding값을 함께 주면서 조정

위의 예시는 위의 제목 title까지(잘린부분)를 모두 감싸는 박스 하나를 만들어 100%를 주고(나중에 media 크기별로 여기서 padding값을 함께 주어 ), 그 안에 내용은 아래와 같이 속성을 넣어준다.

ul {width:1240px;margin:0 auto;}

ul > li {float:left; margin-right:28px; background:각각 배경이미지 경로를 삽입한다.}

ul > li > a {width:220px; height:220px ;padding-top:동그라미 윗부분부터 글씨까지의 높이이다. display:block; box-sizing:border-box 쓰면 유용하다.}

 

2.#main_contents 안의 한줄에 두 주제의 컨텐츠가 나란히 들어갈때(50%,50%)

보통 일반홈페이지 만들때의 내 방식같았다면 논문투고 안내와 학회지 소개를 같이 감싸는 100%박스를 만들었을텐데 반응형은 좀 달랐다.

논문투고 안내 전체를 감싸는(왼쪽 여백부분까지) 박스 그리고 형제관계로 학회지 소개 박스 

.논문{width:50%;position:relative;float:left;} 

.학회지소개{width:50%;position:relative;float:left;}

의 속성값을 같이준다.

그리고 각 박스 안에 inner박스를 만들어준다.

.논문_inner{width:620px(왼쪽여백배경을 제외한 실제 컨텐츠 부분만 포함);float:right;}

.학회지소개_inner{width:315px;float:left;}

이때 각각 inner박스 안에 padding값을 주어 필요한 여백을 조정해준다.

그리고 논문투고 안내 안의 아이콘들은 1번의 메뉴들과 똑같이 코딩해주면 끝이다.

 

3. 2번의 심화(50% 대 50%의 형태가 아닌 경우)

물론 코딩에는 여러가지 방법이 있겠지만 내가 공부한 방법으로는 우선

공지사항과 행사안내를 묶는 50%, 갤러리 50%로 나눈다.

.공지행사(왼쪽에 남는 여백부분까지 포함된것이다.){width:50%;float:left;position:relative;}

.갤러리{width:50%;float:left;position:relative;}

 

공지사항과 행사안내는 각각 다음과 같이 코딩한다.

.공지사항{width:270px(실제 컨텐츠로 사용하는 면적만이다.); float:left;position:absolute; right:300px;}

여기서 absolute를 주지 않으면 화면 제일 왼쪽 저~~끝에 붙게되며, 위치는 left로 주는것이 아니라 relative(기준)가 되는 부모박스에 50%를 주었기 때문에 가운데지점이 되는 right를 기준으로 값을 준다.

.행사안내{float:right;}

여백은 2번과 같이 각각의 박스에 필요한 정도로 padding값을 주어 조정하면 된다.

다시 정리하자면, 공지사항과 행사안내를 모두 감싸는 박스에는 50%로 퍼센트 값을 먹여주고, 안쪽에 공지사항과 행사안내 박스에는 각각 px단위로 적어준다. 겉은 퍼센트, 안은 픽셀.

 

나머지 footer 부분은 clear:both 주고 이렇게 저렇게 했다는 이야기...

일단 대충 큰틀로 이렇게만 정리해놓고 싶다. 정말 대충인거 같아도 이렇게만 정리해놔도 나중에 코딩할때 큰 도움될거같다. 뒤돌아서면 까먹는 반응형... 아주 완전히 씹어먹을때까지 차곡차곡 정리해놔야겠다.