N스크린하이브리드앱과정/HTML&CSS
-
[6주][5일][1~2th] HTML/CSS: 실습 해보기N스크린하이브리드앱과정/HTML&CSS 2013. 8. 23. 11:05
용어 정리 * [-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..
-
[6주][4일][1~2th] HTML/CSS: 홈페이지 메뉴 만들기, 실습N스크린하이브리드앱과정/HTML&CSS 2013. 8. 22. 14:00
★ 용어 정리 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..
-
[6주][3일][1~2th] HTML/CSSN스크린하이브리드앱과정/HTML&CSS 2013. 8. 21. 12:47
★ 용어 정리 CSS z-index: 1; ☜ 상자가 겹칠 때 가장 위에 올 우선순위를 정함 clear:both ☜ 내 양 옆에 아무도 오지마라! clear:left ☜ 내 왼쪽에 아무도 오지마라! HTML 본문 내용을 넣을 때 쓰임 머리말 메뉴 부분 본문 본문의 부가설명 꼬리 부분 ☆ position: relative; 와 absolute의 비교 CSS section h2{ font-size: 20px; padding-top: 30px; position: relative; text-shadow: 0px 0px 5px; } section h3{ font-size: 12px; position: relative; } html 실력이 탐나는 시리즈 전략적 실전 대비 입문서 >> GO position: abso..
-
[6주][1일][1~2th] 요소에 그림자 효과 적용하기N스크린하이브리드앱과정/HTML&CSS 2013. 8. 19. 10:56
★ 용어 정리 - 색 지정 참고페이지 : https://kuler.adobe.com 사이트에서 다양한 색을 가져올 수 있음 - box-shadow : 박스가 생기고, 그 박스에 그림자효과가 적용됨 ☞ 0px 10px 2px rgba(0,0,0,.5); 왼쪽부터 그림자를 밀어줌 - text-shadow : 글자에 그림자효과 ☞ 5px 3px 5px; 왼쪽부터 - text-transform: capitalize; 단어의 첫 스펠링을 대문자로 바꿔줌 body{ min-height: 400px; box-shadow: 0px 10px 2px rgba(0,0,0,.5); } - min-height : 박스쉐도우를 적용했을 때, 그 안의 최소 세로 크기를 지정해 줌. 박스 쉐도우 적용시 min-height 적용시 오..
-
[5주][2일][1~2th] HTML/CSS: 용어 정리N스크린하이브리드앱과정/HTML&CSS 2013. 8. 13. 11:04
용어 정리 white-space: pre; 엔터효과 영역만큼 보이기 clip:rect(10px, 50px, 100px, 10px); position: absolute; ☜ 절대좌표로 고정시켜줘야 함! 왼쪽 위로 붙이기 body,*{ margin: 0px; padding: 0px; } background-clip: content-box; 배경이 padding영역에는 안들어감! word-break:keep-all; 상자(div,ul 등) 안에서 단어가 붙어있을 때 아래로 내려감 background-origin: content-box; 배경이미지를 왼쪽 위부터 정렬해줌 background-size: 100px; 배경 크기 키우기 background-size: 100px 50px, 50px 100px; 배경이 ..
-
[5주차][1일][1~2th] HTML/CSS: 드래그할 때 배경과 색깔을 바꾸고 싶다면?N스크린하이브리드앱과정/HTML&CSS 2013. 8. 12. 11:01
★ 용어 정리 1. white-space:nowrap; 문장을 한줄만 표시함. 2,3번과 함께 쓰임. 2. text-overflow:ellipsis; 3. overflow:hidden; white-space: pre; 바디에 쓴 내용대로 행을 바꿔줌. clip:rect(0px, 200px, 150px, 0px); 이 영역만큼만 그림을 보여줌 direction: rtl; 오른쪽 정렬 ☆ 실습(1) : 드래그 배경&색깔 바꾸기 p::selection{ background: #ff0; color:#f00; } 드래그 했을 때 ☆ 실습(2) : 박스 밑 이미지를 숨기기 #box1{ height: 200px; } overflow를 숨김으로 지정하면 #box1{ height: 200px; overflow: hidd..
-
[4주][5일][5~8th] Mysql: Mysql 설치. SQL문 실습N스크린하이브리드앱과정/HTML&CSS 2013. 8. 9. 19:54
★ 용어 정리 * 데이터베이스 : 여러 시스템들이 공유할 수 있도록 저장되어 운용되는 데이터 집합 * 데이터베이스관리시스템(DBMS) : 데이터를 조회, 수정, 입력, 삭제하는 등 관리를 효율적으 로 할 수 있게 만든 시스템 --> 오라클, MS-SQL, Mysql... * 데이터베이스 생성 : 한 프로젝트 저장공간 생성 * 데이터베이스 관리자 생성 : 데이터베이스 관리할 사용자 생성 * 테이블 생성 : 주제별 데이터 저장공간 생성 (회원,상품,주문,게시판...) * SQL : 데이터베이스 언어 * 데이터베이스 생성,수정,삭제 / 테이블 생성,수정,삭제 (create, alter, drop) * 사용자 권한 부여, 권한 제거 (grant, revoke) * 테이블 안에 데이터 입력,조회,수정,삭제 (in..
-
[4주][5일][1~2th] HTML/CSS: 우선순위 지정하기. 배경이미지 고정&확대하기N스크린하이브리드앱과정/HTML&CSS 2013. 8. 9. 10:21
★ 용어 정리 헤드 input[type=text]{} type="text" 인 텍스트상자에 속성 적용 [속성선택자] input:checked{} input에 체크된 상태로 적용 border: 50px solid #00f; 테두리 표시, 선 모양과 색깔 함께 적용 background-repeat: no-repeat; 이미지 하나만 들어감 background-repeat: repeat-x; 이미지 x축으로 다 들어감 background-repeat: repeat-y; 이미지 y축으로 다 들어감 background-attachment:scroll; 배경이미지가 스크롤 따라 움직임 background-attachment:fixed; 배경이미지 고정 background-position:bottom; fixed랑 ..