Enable!

CSS 기본 설정


  우선 css 파일을 열고 @charset "utf-8";을 쓴다. 다음 줄에 원하는 웹폰트의 @import문을 작성한다. 해당 웹폰트 설정에 구문이 나와있으니 복붙하면 된다. 그 다음에는 div, a, img 등 기본 태그에 적용될 스타일을 선언한다. 다음은 그 예시이다. 다른 건 안 해도 인코딩 선언과 링크, 이미지, input 정도는 해두는 게 좋다.


@charset "utf-8"; /* 인코딩 선언 */

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* 구글 나눔고딕 웹폰트 선언 */


body{font-family:'Nanum Gothic';} /* 레이아웃 전체 폰트 지정 */

a, a:link, a:visited{color:#000;text-decoration:none;} /* 링크 색상을 검은색으로 지정, 밑줄 없앰 */

a:hover, a:active{color:#000;} /* 활성화된 링크 색상을 검은색으로 지정 */

img{border:0;} /* 이미지의 외곽선 제거 */

input{outline:none;} /* 입력폼의 외곽선 제거(무지 지저분하다...) */




컨테이너


  컨테이너는 레이아웃 전체를 감싸는 부분이다. 컨테이너가 필요한 이유는 레이아웃 전체의 넓이, 외곽선 설정 등의 편의 도모를 위함이다. 예를 들어, 레이아웃에 3개의 div가 세로방향으로 나열되어 있고, 레이아웃의 넓이를 500px로 설정한다고 해보자. 컨테이너가 없다면 body>div로 설정하면 될 것이다. 그런데 이 세 개의 div 말고도 bgm 플레이어 등 다른 div가 있다면 어떻게 해야 할까? 일일이 body>div:not(ㅇㅇㅇ)를 써야 하나? 아니면 body>div:nth-of-type(n)을 쓸까? 그러나 컨테이너가 있다면 컨테이너에 필요한 내용을 선언하면 되기 때문에 상대적으로 편리하다.


  그럼 일단 폭부터 설정해보자. 관리의 편의를 위해 /* 컨테이너 */라는 주석을 달고 다음과 같이 쓴다.


.layout_container{width:원하는넓이;}



  레이아웃의 중앙정렬은 다음과 같다. 이 코드는 위의 중괄호 안에 집어넣으면 된다. margin은 요소의 바깥 여백을 의미한다.


margin:원하는수치 auto;


    만일 외곽선을 주고 싶다면 border:두께 타입(solid-직선, dotted-점선, dashed-납작한점선) 색상(rgb 혹은 #색상코드);를 사용하면 레이아웃 전체에 선이 생긴다.






상단 타이틀


  본인은 중앙정렬에 구글 웹폰트를 적용시켜보기로 하겠다. 우선 html 파일로 가서 title div의 내용을 수정한다. (수정 중에 외곽선을 추가해보았다.)


/* 상단 */

.layout_container .header .title{font-family:'Raleway', sans-serif;font-size:35px;font-style:italic;font-weight:300;} /* 서체 설정, 글자 크기 설정, 스타일 설정, 굵기 설정 */



 그런 다음 타이틀을 의도대로 배치해보자. 여기서는 정중앙에 배치해보겠다. 코드의 붉은색 부분은 새로 추가된 부분이다.


.layout_container .header .title{

padding:50px; /* 안쪽 여백을 설정. 컨테이너 자체에 설정하지 않는 이유는 div 사이에 꽉찬 선을 집어넣을 것이기 때문이다. */

text-align:center; /* 글자를 중앙에 오도록 설정

font-family:'Raleway', sans-serif;

font-size:35px;

font-style:italic;

font-weight:300;

}

메뉴


  여기서는 가로 나열형태로 해보겠다. 우선 기초 작업을 해둔다. 태그 자체에 쓸데없는 스타일이 덕지덕지 있어서 해제해주는 게 편하다.


.layout_container .header .menu ul{

margin:0; /* 상하 여백 제거 */

padding:0; /* 왼쪽 여백 제거 */

list-style:none; /* 왼쪽 동그라미 제거 */

}




 이제 이들을 눕혀보자. 이게 어떤 원리냐면 원래 li는 블록요소와 유사하여 블록처럼 한 줄에 하나만 차지하지만 inline-block은 이들을 줄 안에 여러 개가 들어갈 수 있게끔 바꾸고 내부는 블록태그처럼 작동하게 한다. 때문에 메뉴들이 주르륵 눕는 것이다.


.layout_container .header .menu li{

display:inline;

}



  이제 이들을 구체적으로 꾸며볼 시간이다. 우선 메뉴가 들어가는 공간을 꾸며보았다.


.layout_container .header .menu{

padding:20px;

border-top:1px dashed #eee; /* 상단 선 설정 */

border-bottom:1px dashed #eee; /*하단 선 설정 */

}



.layout_container .header .menu li{

font-size:10px; /* 폰트 크기 작게 설정 */

font-family:'Calibri'; /* 폰트 설정 */

margin-right:10px; /* 오른쪽 여백을 주어서 요소 사이를 띄우기 */

}

.layout_container .header .menu li a, .layout_container .header .menu li a:link, .layout_container .header .menu li a:visited{

color:#777; /* 일반 링크 색상 수정 */

}

.layout_container .header .menu li a:hover, .layout_container .header .menu li a:active{

color:#aaa; /* 활성화 링크 색상 수정 */

}