신청곡 받습니덩

★ 용어 정리 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..

★ 용어 정리 - 색 지정 참고페이지 : 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 적용시 오..

용어 정리 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; 배경이 ..

★ 용어 정리 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..

★ 용어 정리 * 데이터베이스 : 여러 시스템들이 공유할 수 있도록 저장되어 운용되는 데이터 집합 * 데이터베이스관리시스템(DBMS) : 데이터를 조회, 수정, 입력, 삭제하는 등 관리를 효율적으 로 할 수 있게 만든 시스템 --> 오라클, MS-SQL, Mysql... * 데이터베이스 생성 : 한 프로젝트 저장공간 생성 * 데이터베이스 관리자 생성 : 데이터베이스 관리할 사용자 생성 * 테이블 생성 : 주제별 데이터 저장공간 생성 (회원,상품,주문,게시판...) * SQL : 데이터베이스 언어 * 데이터베이스 생성,수정,삭제 / 테이블 생성,수정,삭제 (create, alter, drop) * 사용자 권한 부여, 권한 제거 (grant, revoke) * 테이블 안에 데이터 입력,조회,수정,삭제 (in..

★ 용어 정리 헤드 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랑 ..

★ 용어정리 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..

★ 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; 글자에 그림자..

★ 오늘 배운 내용 ▷ 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..

★ 오늘 배운 내용 - position:absolute; 절대좌표 - position:relative; 상대좌표 - 필수입력사항 그룹 이름 지정하기 - 이름 없이 그룹 묶기 ★ 특이사항 - div(레이아웃)를 이용해 바디 전체와 3번/4번을 감쌌다. -> div를 하기 전에는 체크박스에만 체크가 되었다면, div적용 후 글자를 클릭해도 체크가 되는 것 을 볼 수 있다. ☆ 실습(1) : 회원가입 페이지 만들고 css 적용하기 결과 화면 전체 소스 CSS HTML 필수입력사항 1. 이름을 적으시오 1-1. 이메일 2. 비밀번호 2-1. 비밀번호확인 추가입력사항 3. 취미를 여러개 고르세요. 독서 등산 영화 음악 4. 단 한가지 원하는것을 고르세요 독서 등산 영화 음악 5. 배송시 남길말을 적어주세요(100..