기록 ＞ 기억

JavaScript 작성위치 ● 자바스크립트 작성 위치 ① 태그에 직접 작성 (on+event 속성) ② 파일 내부에 작성 (script 태그) ③ 외부 파일에서 작성 (외부 js 파일) alert("외부에서 작성"); /* 파일경로 : /js/test.js */ 변수와 상수 ● 변수 ① 변수 선언은 var 또는 let으로 선언 /* 변수 선언 : 값을 재할당 할 수 있음 */ let player = "son"; console.log(player); player = "park"; console.log(player); ② 자료형은 저장된 데이터 값에 의해 결정됨 let str = 'son';/* 문자형 */ let num = 89;/* 숫자형 */ let flag = true;/* 논리형 */ let un..

반응형 웹 사용자의 접속환경(PC, 모바일)에 맞춰서 레이아웃을 자연스럽게 바꿔서 보여주는 것 장점 단점 모든 기기에서 접속가능 최신 버전의 브라우저만 지원, 하위 버전 브라우저 지원 X 너비 값을 조절하면 너비에 맞추어 레이아웃을 변경 사이트가 하나라서 유지관리가 편함 ● 가변 그리드 → 화면의 크기에 관계없이 늘어나고 줄어들수 있도록 퍼센트(%)로 설정 content ● 미디어 쿼리 → 접속한 기기의 종류를 물어보고 그 기기에 맞게 사이트 구조를 바꿈 ● 뷰포트 ( viewport ) → 화면에 보이는 영역을 제어 (미디어 쿼리로 기기의 화면크기를 감지할 때 필요) ● 플렉스 박스

visibility : hidden 과 display : none 의 차이 속성명 속성값 설명 visibility hidden 화면에서 요소를 숨김, 실제로 공간은 차지하고 있음 display none 화면에서 요소를 숨김, 공간을 차지하지 않음 예제 ) A B C

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 태그) - 내부 스타일시트 주요 선택자 ● 전체 선택자 : * { 스타일 } ... ● 태그 선택자 : 태그 { 스타일 } 안녕하세요 ● 클래스 선택자 : .클래스명 { 스타일 } 안녕하세요 반갑습니다 ● 아이디 선택자 : #아이디명 { 스타일 } ... ● 그룹 선택자 : 선택자, 선택자, ... (콤마로 구분) 안녕하세..