신청곡 받습니덩

☆ 실습(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"); /* 익스플..

CSS*,body{ font-family: "맑은 고딕"; margin:0px; padding:0px; font-size:11px; } caption{ background: url(images/title_event.png) no-repeat center center; width:700px; height:50px; } caption span{ display:none; } table{ border-collapse: collapse; } td{ border-bottom: 1px solid #000; text-align:center; padding:5px 10px; } th{ height:34px; padding:0px 0px; font-size:12px; } th span{ /* border-right:1px..

CSSbody{ font-family: "맑은 고딕"; } label{ width:150px; height:30px; display: table-cell; border-right: 1px dashed #c6c6c6; padding: 10px 5px; } form{ display:table; border-collapse: collapse; margin: 0 auto; } form p{ display: table-row; border-bottom: 2px solid #000; } form h1{ color: #fff; background:#000; display: table-caption; border-bottom: 2px solid #000; text-align:center; padding-bottom: ..

☆ 실습 : 로그인 창 꾸미기CSS.member { font-size: 50px; text-shadow: 0 0 10px #666; color: #fff; margin: 0 auto; text-align: center; text-transform: capitalize; font-family: "맑은 고딕"; font-style: italic; }body { font-family: "맑은 고딕"; font-size: 12px; }.form { width: 498px; height: 300px; border-radius: 25px; border: 5px double #999; margin: 30px auto; }.form2 { width: 380px; min-width: 320px; height: 200px..

☆ 실습(1) : 아래 그림과 같이 만들어라 CSS .newbook{ font-size: 50px; text-shadow: 0 0 10px #666; color:#fff; margin:0 auto; text-align: center; text-transform: capitalize; font-family : "맑은 고딕"; font-style: italic; } .booklist ul{ list-style-type: none; width:498px; } .booklist li{ float:left; margin-right: 46px; margin-top:6px; } .booklist{ background: url(images/book_bg.png) no-repeat; width:498px; height:..

☆ -webkit, -ms 그라데이션 효과 주는 홈페이지 http://gradients.glrzad.com/ 위의 홈페이지에서 색깔을 지정하면, 자동으로 css 코드가 나온다. 정말 편리하다. ☆ 실습(1) : 상자 안에 그림과 글자가 같이 있을 경우 정렬하기 style1이 태그인데, 안에 그림을 넣고 글자를 넣으면 겹치게 된다. CSS section .style1{ background: url(images3/event_goods.png) no-repeat top right; height: 115px; padding-right:75px; padding-top:20px; top:-7px; position:relative; } HTML 스마트폰과도 다르고 태블릿 PC도 아닌 신개념 스마트 기기 갤럭시 노트!..

★ 용어 정리 bottom:0px;position:fixed; -> 꼬리 부분이라고 할 때, 고정시켜 주는 것. ☆ 실습(1) : ,, 페이지 만들기 실습CSS*,body{margin:0px;font-family: "맑은 고딕";}body{background:#000;}section{float:right;width:250px;height:250px;margin-top:250px;margin-right:20px;}section p{font-size: 12px;color:gray;}section dl{font-size: 12px;margin-top:50px;color:#fff;}#header{background: #f00;width:100%;height:70px;top:1px;position:relative..

★ 용어 정리 -webkit-box-align:center; 박스에서 가운데정렬(세로) -webkit-box-align:end; 박스에서 밑으로 정렬(세로) -webkit-box-pack: center; 박스에서 가운데정렬(가로) -webkit-box-orient: horizontal; 박스 안 내용을 수평으로 나열 -webkit-box-orient: vertical; 박스 안 내용을 수직으로 나열 -webkit-box-direction: reverse; 표 내용을 뒤집어줌 -webkit-box-ordinal-group:3; 표 안의 우선순위 정하기(위치를 직접 바꿔줌) display: -webkit-box; div에 적용시, 기본값 세로 정렬에서 가로정렬로 바뀜 -webkit-transition-dur..

용어 정리 * [-webkit-] : 크롬에서 적용 display: -webkit-box; 글자를 박스형태로 만들어줌 -webkit-box-align:center; 박스에서 가운데정렬(세로) -webkit-box-pack: center; 박스에서 가운데정렬(가로) -webkit-column-count: 3; //열 나누는 칸 -webkit-column-gap: 100px; //여백 -webkit-column-rule: 1px solid #ccc; //여백 사이에 선 그어주기 ☆ 실습(1) : 그림과 같이 만들기(3개의 파일을 연결) - 아래와 같은 html 파일을 css를 연결하는 태그를 사용하여 "photoBox.css" 를 작성하고 요렇~게 만들어보자! HTML파일은 3개고, CSS파일은 1개다. 1..

★ 용어 정리 position:fixed; 그림 같은 것의 위치를 고정시키기(스크롤 했을 때 고정됨) display: inline; 사용시 한줄로 ㅉ구 늘려줌 display: none; 글자 안보이게 display: table; 테이블이 아닌 것을 테이블로 만들어라! display: table-cell; 요놈들을 셀이 나눠지게 해라! ☆ 실습(1) CSS li{ display: inline; } a{ padding: 10px 50px; text-decoration: none; color:#fff; } ul{ list-style-type:none; padding: 10px; background-color:#f00; text-align:center; } a:hover{ background-color:#000..