N스크린하이브리드앱과정/HTML&CSS
-
[4주][4일][1~2th] HTML/CSS:N스크린하이브리드앱과정/HTML&CSS 2013. 8. 8. 11:23
★ 용어정리 CSS p:FIRST-LETTER{} ☜ 첫글자만 바뀜 p:FIRST-LINE{} ☜ 첫줄만 바뀜 float: left; ☜ 왼쪽 정렬 border-radius: 50%; ☜ 모서리 둥글게 list-style-type: none; ☜ 그림과 같이 없애줌 #categoryBox h1 { border-bottom:solid 1px silver; } ☜ 그림과 같이 카테고리 밑에 밑줄 그어줌 h2:before{ content: "내용"} ☜ h2 전에 내용 붙이기 h2:after{ content: "내용"} ☜ h2 뒤에 내용 붙이기 HTML ... : 열 그룹 지정하기 : 선 긋기. 선에 약간 그림자 있음. ☆ 실습(1) : colgroup-col에 색깔 적용하기 1. 바디 안에 colgroup..
-
[4주][3일][1~2th] HTML/CSS: CSS용어정리 및 실습N스크린하이브리드앱과정/HTML&CSS 2013. 8. 7. 11:10
★ CSS 용어정리 letter-spacing: ☜ -1px 자간(글자간) 간격 word-spacing: ☜ 10px 단어간의 간격 font-style: italic ☜ 이탤릭체 font-weight: bold; ☜ 굵은체로 font-variant: small-caps; ☜ 작은크기의 대문자로 text-decoration: underline; ☜ 글자에 밑줄긋기 text-transform: capitalize; ☜ 영어 단어의 첫글자를 대문자로 text-indent: 100px; ☜ (문장의 시작만) 들여쓰기. (%),(-)값도 가능 text-align: justify; ☜ 양끝맞춤 text-align: center; ☜ 가운데정렬 text-shadow: ☜ 1px 2px 2px #999; 글자에 그림자..
-
[4주][2일][1~2th] HTML/CSS: 외장CSS, 속성선택자N스크린하이브리드앱과정/HTML&CSS 2013. 8. 6. 11:05
★ 오늘 배운 내용 ▷ box-shadow : 1px 1px 1px 1px #666; (1) x좌표 (2) y좌표 (3) 흐린 정도 (4) 확장(부드러운 정도의 모양이 뚜렷해진다) (5) 색깔 ☆ 실습(1) : 외장 CSS ▷ 외장CSS : 우리가 이제까지 한 것들은 내장CSS였으며, 외장CSS는 파일을 따로 만들어 불러오 는 형태이다. 1. form.css ☆ 실습(2) : span(마크 효과) 적용 바디 4. 단 한가지 결과 ☆ 실습(3) : 외장CSS 실습 정답 (1) cook.css .line{ border-bottom: 1px dashed #f00; color: #f00; } ul{ list-style-type: none; border:1px dashed #f00; width:280px; mar..
-
[4주][1일][1~2th] HTML5/CSS: 회원가입 페이지에 스타일 적용하기N스크린하이브리드앱과정/HTML&CSS 2013. 8. 5. 11:14
★ 오늘 배운 내용 - position:absolute; 절대좌표 - position:relative; 상대좌표 - 필수입력사항 그룹 이름 지정하기 - 이름 없이 그룹 묶기 ★ 특이사항 - div(레이아웃)를 이용해 바디 전체와 3번/4번을 감쌌다. -> div를 하기 전에는 체크박스에만 체크가 되었다면, div적용 후 글자를 클릭해도 체크가 되는 것 을 볼 수 있다. ☆ 실습(1) : 회원가입 페이지 만들고 css 적용하기 결과 화면 전체 소스 CSS HTML 필수입력사항 1. 이름을 적으시오 1-1. 이메일 2. 비밀번호 2-1. 비밀번호확인 추가입력사항 3. 취미를 여러개 고르세요. 독서 등산 영화 음악 4. 단 한가지 원하는것을 고르세요 독서 등산 영화 음악 5. 배송시 남길말을 적어주세요(100..
-
[3주][4일][1~2th] HTML: 요소의 크기 지정 및 여백 처리하기. 외 2종N스크린하이브리드앱과정/HTML&CSS 2013. 8. 1. 19:49
☆ 요소의 크기 지정 및 여백 처리하기 헤드 body{ margin-top:30px; font:1.2em "맑은 고딕", "Times New Roman", sans-serif; } h1{ padding-bottom:20px; text-align:center; } div{ margin:0px auto; width:70%; } p{ padding: 10px 0px; } 바디 알버트 아인슈타인 어록 It's not that I'm so smart, it's just that I stay with problems longer. 나는 똑똑한 것이 아니라 단지 문제를 더 오래 연구할 뿐이다. I never came upon any of my discoveries through the process of ration..
-
[3주][3일][1~2th] HTML5: {ul,li}태그, 클래스 사용하기 예제(2)N스크린하이브리드앱과정/HTML&CSS 2013. 7. 31. 11:02
어제 배운 ul,li태그를 이어서 실습을 하겠다. 전체 이미지 전체 소스 1. table2를 바꿔보기 (1) table2에 스타일 적용 .left ul li a{ background: #999; display:block; width: 200px; height: 38px; } (2) display:block;을 없애줌 ==> 셀 안의 공간이 다 없어짐! .left ul li a{ background: #999; width: 200px; height: 38px; } (3) border-bottom : 표의 밑부분만 밑줄을 그어줌 .left ul li a{ background: #999; display:block; width: 200px; height: 38px; border-bottom: 1px solid ..
-
[3주][2일][1~2th] HTML5: {ul,li}태그, 클래스 사용하기 예제.N스크린하이브리드앱과정/HTML&CSS 2013. 7. 30. 11:05
**태그 활용** 1. li태그 사용하기 (1) 본래의 태그 (2) 스타일을 적용했을 때 2. 배경 적용 ul{ list-style-type: none; background:#ff0; width:250px; height:250px; } 3. 행 간격 주고 li에 배경주기 li{ background:#0f0; margin: 10px; //행 간격 padding:10px; } 4. 셀 간격 넓히기 li{ background:#0f0; margin: 10px; //행 간격 padding:10px 10px 10px 20px; } 5. 배경이미지 적용하기 li{ background-image:url("bg_check.jpg"); margin: 10px; padding:10px 10px 10px 20px; } 6...
-
[3주][1일][5~7th] 자바스크립트(JAVA SCRIPT)N스크린하이브리드앱과정/HTML&CSS 2013. 7. 29. 19:01
☆ 내장함수 1. confirm : 확인/취소창 만들기 - 확인을 눌렀을 때: 아래 그림 - 취소를 눌렀을 때: "다음기회에" 출력. ☆ 함수정의 & 호출 1. function: 함수를 정의하는 것. 2. prn() 함수 호출. body에서 수행, java와 쓰임새가 똑같음. (1) prn() 함수값 (2) max() 함수값 ☆ 배열의 출력(1차원 배열) * 전체 소스 1. 배열의 선언(설정) : 9~13번 (1) arr1=new Array(5); arr1[0]=1; arr1[1]=2; (2) fruit = new Array("apple","banana","lemon","orange"); -> (1) 또는 (2)의 방법을 사용할 수 있다. 2. 배열의 개수 출력 : 16번 alert(fruit.lengt..