* 생활코딩의 holygrail 을 이용하여 만든 페이지
https://www.youtube.com/watch?v=8DJBCHro-3Q
Holygrail layout.
이 형태를 코드로 작성해보면,
세 영역으로 나눈 후에 콘텐츠 부분은 다시 세 부분으로 나눔.
1. header,
2. content(nav/main/aside)
3. footer
이렇게 이름을 정의해주고, <sty;e> 태그로 꾸밀 때 속성을 정의하고 싶은 부분을 불러서 코드를 넣어주면 됨. (css부분)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <style> .container{ display: flex; flex-direction: column; } header{ /* header밑에 선그어서 분리시켜주기 */ border-bottom: 1px solid gray; padding-left:20px; /* 왼쪽공간 조금 주기 */ } footer{ border-top: 1px solid gray; padding-top: 50px; text-align: center; /* 가운데정렬 */ } /* 기본적으로 수직으로 정렬되는 콘텐츠(가운데 전체가 다 콘텐츠임)를 나란히 정렬하고 싶으면 style태그 안에 컨테이너지정. flex를 넣어주어야함. */ /*큰 제목인 생활코딩 아래에 내용 부분을 가로로 정렬하고 싶으면, content부분에 flex를 적용. /* section부분을 content로 정의했으니까 .content 로 시작해서 묶어주면 됨. 그럼 html리스트부분/ 설명부분/ AD 이렇게 세 개가 가로로 나란히 배치되어 있는 것을 볼 수 있음. */ .content{ display: flex; } .content nav{ border-right:1px solid gray; } .content aside{ border-left:1px solid gray; } nav,aside{ flex-basis: 200px; flex-shrink: 1; /* 여기서 플렉스 쉬링크에 1을 주면 무슨의미냐면 기본적으로 holygrailayout은 가운데 콘텐츠에 쉬링크 값이 1이 적용되기 때문에 줄이면. nav와 aside는 가만히 있고, content만 줄어듬. 이렇게 따로 nav와 aside에 쉬링크 값을 1을 주면 세칸 모두 쉬링크에 똑같은 우선순위가 부여되기 때문에 창 크기를 줄였을 때 세 칸이 함께 줄어듬 nav와 aisde에 쉬링크 값을 0을 주면 원래대로 가운데 칸만 줄어들게 된다., */ } /* 중요!! 가운데 칸에 있는 문장에서 여백 주고 싶으면 content가 아니라 main! 각 영역에 이름 붙여줬고, 그것으로 css명령내린다는 것잊지말기. */ main{ padding : 20px; } aside{ padding: 20px; } </style> | cs |
공부에 참고한 자료 :
뷰티풀css: http://www.beautifulcss.com/archives/2812#flex-grow
