기록 ＞ 기억

2단 메뉴 예제 ) @charset "UTF-8"; .menu>li { float: left; width: 100px; height: 40px; line-height: 40px; text-align: center; margin: 5px; position: relative; } .menu>li:nth-child(2n-1) { background-color: lightblue; border-top-left-radius: 40px; border-bottom-right-radius: 40px; } .menu>li:nth-child(2n) { background-color: lightpink; border-top-right-radius: 40px; border-bottom-left-radius: 40px; top..

position 속성 → 배치 방법 속성 명 속성 값 static 문서의 흐름에 맞게 배치 relative 요소 본인 위치 기준으로 배치 absolute 1. 브라우저 창 기준 2. 부모 요소 중 position: relative; 를 가진 부모 요소 중 가장 가까운 부모 기준으로 배치 fixed 지정한 위치에 고정 배치 (화면에서 요소가 잘릴수 있음) ● relative (본인 위치 기준) A B C ● absolute (브라우저 기준) A B C ● absolute (부모 위치 기준) A B C ● fixed (브라우저 기준) z-index 속성 ● 배치 될 요소들의 우선순위 레벨 A B C 기본적으로 나중에 배치된 요소가 가장 위에 배치 됨

block / inline / inline-block block inline inline-block 한줄에 하나만 배치 한줄에 여러개 배치 한줄에 여러개 배치 크기 조정 O 크기 조정 X (컨텐츠 크기 = 기본 크기) 크기 조정 O 상하좌우 마진 O 상하 마진 X 상하좌우 마진 O ■ ◆ ● ■◆● ■◆● ● block block 요소 div block 요소 div block 요소 div ● inline inline 요소 span inline 요소 span inline 요소 span ● inline → block (크기변경, 상하마진 적용 위해서) inline 요소 span inline 요소 span inline 요소 span ● block → inline-block (블락 요소를 한줄에 여러개 배치하기..

float 속성 예제 ) ① orange div에만 float : left 를 주면? orange div가 float속성으로 인해 떠있기 때문에 slateblue div는 공간이 비어있다고 인식해서 orange div 위치를 차지함 (orange div뒤에 slateblue div가 겹쳐져 있음) ② orange div와 slateblue div에만 float : left 를 주면? orange div와 slateblue div가 float속성으로 인해 떠있기 때문에 violet div는 공간이 비어있다고 인식해서 orange div와 slateblue div 위치를 차지함 (orange div와 slateblue div 뒤에 violet div가 겹쳐져 있음) ③ orange, slateblue, vi..

CSS 작성법 ● CSS 작성법 : 선택자 { 스타일 } /* 선택자 { 속성 : 속성값; } */ p { text-align: center;} /* 속성과 속성값은 ';'으로 구분 */ p { color: blue; font-size: 10px; } ● CSS 작성 위치 ① 태그에 직접 작성 (style 속성) - 인라인 스타일 HELLO CSS3 ② 파일 내부에서 작성 (style 태그) - 내부 스타일시트 주요 선택자 ● 전체 선택자 : * { 스타일 } ... ● 태그 선택자 : 태그 { 스타일 } 안녕하세요 ● 클래스 선택자 : .클래스명 { 스타일 } 안녕하세요 반갑습니다 ● 아이디 선택자 : #아이디명 { 스타일 } ... ● 그룹 선택자 : 선택자, 선택자, ... (콤마로 구분) 안녕하세..

태그 → 드롭다운 목록 ● 태그는 기본적으로 한가지 옵션을 보여주고, 여러 옵션 확인 후 한가지 옵션만 선택가능 속성명 속성값 설명 size ex) 5 화면에 표시될 드롭다운 메뉴의 옵션 개수 지정 multiple multiple 여러 개의 옵션을 선택가능 ● 태그 속성 속성명 설명 value 옵션을 선택했을 때 서버로 전달 되어지는 값 selected 기본 선택되어 있는 옵션 건축공학과 기계공학과 산업공학과 전기공학과 컴퓨터공학과 ● 태그 → 항목 별로 묶기 건축공학과 기계공학과 산업공학과 전기공학과 컴퓨터공학과 역사학과 어문학과 철학과 ● 태그 → 데이터 목록 중에서 데이터 선택 속성명 설명 value 옵션을 선택했을 때 서버로 전달 되어지는 값 label 브라우저에 표시될 이름 (따로 지정하지 않으..

폼 태그 속성명 속성값 설명 name - 폼을 구별할 때 사용되는 이름 method get 방식 (default) post 방식 (추천) 폼안에 있는 데이터를 서버에 어떤 유형으로 전달할지 지정 action - 폼안에 있는 데이터를 받는 서버 페이지 ● get, post 방식의 차이 get post 데이터 위치 헤더(request header) - 길이의 제한이 있음 - 쿼리스트링을 통해 전송 ex) http://localhost:9797/test/guestbook/register.jsp ?id=user&pw=1111 1) ? 뒤에 키=값 형태 2) '&' 로 여러개 전송가능 바디(request body) - 길이의 제한이 없음 - form-data를 통해 숨겨서 전송 ex) http://localhos..

태그 → 링크 연결 속성명 속성값 설명 href - 연결할 페이지의 경로와 파일명 target 1. target 없으면 자기 창(디폴트값: _self) 2. _blank는 무조건 새창 3. 특정이름 aaa를 target으로 하면, aaa 이름을 가진 링크들은 창을 공유! aaa 이름이 없으면 새창! 연결된 페이지가 표시될 위치 - 브라우저(새창, 탭) - 임의의 위치 - Frame, iFrame 비추 download - html5를 지원하는 표준 브라우저만 사용가능 (IE는 사용불가) ● 링크 연결 ① 다른 문서를 연결하고자 할 때 ② 자신의 문서이든, 다른 문서이든 특정 위치로 이동 할 때 (책갈피 기능과 유사) 1장 2장 3장 4장 1장 2장 3장 4장 ③ 특정 페이지 또는 특정 사이트의 웹 문서를 ..