[8주][3일][1~2th] HTML/CSS: 글자 모양 불러와서 사용하기 외 1종

☆ 실습(1) : 글자 모양 불러와서 사용하기

이제부터 글자 모양을 이클립스에서 적용하는 법을 알려줄거다.

"a세잎클로버.ttf" 파일을 확장자 eot과 woff파일을 만들어보자.

 

1. a세잎클로버.ttf 파일을 드래그하여 호랑이 옆모습이 그려진 아이콘의 EOTFAST-1.EXE에 넣는다.

 

2. 그러면 다음과 같이 eot파일이 생성된다.

 

3. 같은 방법으로 sfnt2woff.exe 파일에 드래그한다.

 

woff 파일이 생성된다.

 

이 두개의 파일 이름을 'a'로 변경시켜준다.

이걸 FONT 폴더에 집어넣으면 설정 끝이다.

소스 코드

CSS

@font-face{ ☜ 세잎클로버
 font-family: "aaa"; /* 바디의 글자모양 이름과 같아야 함 */
 src: url("FONT/a.eot"); /* 익스플로러용 폰트 */
 src: local("ㅂ2ㅂ2"),url("FONT/a.woff") format("woff");
}
@font-face{ ☜ 나눔글체
 font-family: "nan";
 src: url("FONT/nanum.eot"); /*  */
 src: local("ㅂ2ㅂ2"),url("FONT/nanum.woff") format("woff");
}
@font-face{ ☜ 제주한라산체
 font-family: "hoho";
 src: url("FONT/JejuHallasan.eot"); /*  */
 src: local("ㅂ2ㅂ2"),url("FONT/JejuHallasan.woff") format("woff");
}
body{
 font-family: "aaa";
 font-size: 24px;
}
p{
 font-family: "nan";
 font-size:24px;
}
span{
 font-family: "hoho";
 font-size:24px;
}

HTML(바디)

김광천
보유기술
포트폴리오
면접준비
<p>3개월 안에 준비할 수 있을까?</p>
<span>디즈니 만화동산</span>

 

 

 

☆ 실습(2) :  메뉴 만들기

CSS

*,body{
 font-family: "맑은 고딕";
 font-size:14px;
 margin:0px;
 padding:0px;
 font-weight: bold;
}
body{
 background: #c6c6c6;
}
ul{ 
 list-style-type: none;
}
li{
 float:left;
 margin: 0px 5px;
}
li a{
 display:block;
 padding: 7px 5px 12px 5px;
}
li a:hover{
 border-bottom: 3px solid #0f3;
}
a{
 text-decoration: none;
 color: #333;
}
a:hover{
 border-bottom: 3px solid #0f3;
}
nav{
 float:right;
  clear:right;
 margin-right:30px;
 margin: 50px 20px 0 0;
}
#logo{
 float:left;
 margin: 60px 0 0 40px;
}
#login{
 word-spacing: 10px;
 float:right;
 margin:20px 40px 0 0;
}
header{
 margin: 0 auto;
 width:971px;
 height:200px;
 min-width:971px;
 background: #fff;
}

HTML

<header>
<div id="logo">
<img src="images/logo.gif">
</div>

<div id="login">
<a href="#">login</a> l <a href="#">join</a>
</div>
<nav>
<ul>
<li><a href="#">HOME</a>
<li><a href="#">COMPANY</a>
<li><a href="#">SOLUTIONS</a>
<li><a href="#">CUSTOMER CENTER</a>
<li><a href="#">CONTACT US</a>
</ul>
</nav>
</header>
<article>
</article>