N스크린하이브리드앱과정/HTML&CSS
-
[8주][3일][1~2th] HTML/CSS: 글자 모양 불러와서 사용하기 외 1종N스크린하이브리드앱과정/HTML&CSS 2013. 9. 4. 11:10
☆ 실습(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"); /* 익스플..
-
[8주][2일][1~2th] HTML/CSS: 게시판 꾸미기N스크린하이브리드앱과정/HTML&CSS 2013. 9. 3. 11:10
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..
-
[8주][1일][1~2th] HTML/CSS: 쇼핑몰 주문자 정보 입력 꾸미기N스크린하이브리드앱과정/HTML&CSS 2013. 9. 2. 11:02
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: ..
-
[7주][5일][1~2th] HTML/CSS: 로그인 창 꾸미기N스크린하이브리드앱과정/HTML&CSS 2013. 8. 30. 12:01
☆ 실습 : 로그인 창 꾸미기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..
-
[7주][4일][1~2th] HTML/CSS: 실습하기N스크린하이브리드앱과정/HTML&CSS 2013. 8. 29. 12:12
☆ 실습(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:..
-
[7주][3일][1~2th] HTML/CSS: 그라데이션 효과, 기타 실습.N스크린하이브리드앱과정/HTML&CSS 2013. 8. 28. 11:04
☆ -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도 아닌 신개념 스마트 기기 갤럭시 노트!..
-
[7주][2일][1~2th] HTML/CSS: 마우스롤오버 페이지, -webkit, -ms의 사용N스크린하이브리드앱과정/HTML&CSS 2013. 8. 27. 13:57
★ 용어 정리 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..
-
[7주][1일][1~2th] HTML/CSS: webkit박스, ms박스N스크린하이브리드앱과정/HTML&CSS 2013. 8. 26. 11:11
★ 용어 정리 -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..