전체 글
자바스크립트 - Array
Array 예제) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Document var nums = new Array(2,3,"hello",7); console.log(nums); http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs 설명) var nums 라는 객체에 new Array(2,3,"hello",7); 배열을 넣어주고 console.log에서 뿌려준다. 실행..
20. 자손 선택자(space) VS 자식 선택자 (>)
자손 선택자 (space) : 특정 요소 자손 모두 선택 자식 선택자 (>) : 특정요소 자식만 선택 제목 적는 부분 안쪽에 있는 p 태그
19. Css 가상 클래스 before, after
ㅁ 나는 제목입니다. 폼 엘리먼트는 before, after을 가질 수 없다. input, form, button ex1) 마요 카레 철판볶음밥 프리미엄 찌개 덮밥 비빔밥 ex2) 홈 전체메뉴 사각도시락 모둠시리즈
18. overflow속성
overflow 속성 자식 요소가 float: left를 하면 부모요소가 높이 값을 잃어버리는데 부모요소에 overflow:heidden;을 통해 높이 값을 찾아온다.
예제 - CSS 수직, 수평 중앙정렬 시키는 방법
1) margin: auto (수평정렬) 2) 부모요소에 작성 display: flex justify-content: center align-items: center 3) position: absolute top: 50% left: 50% transform: translate(-50%, -50%) 왼쪽, 위쪽
예제 - CSS 화면 가득 채우기
1) html, body {height: 100%;} .container {height: 100%;} 2) .container {height: 100vh;}
17. Tip&Tech - 가변영역 고정영역 함께 사용하는 레이아웃
(calc, flex-box, table-layout) width: cacl(100% - 300px); .wrapper {dispaly: flex;} .main {flex: 1;} .wrapper {display: table; width: 100% } .main, .sub {display: table-cell}
16. Css 순서 가상 클래스
: (CSS2) :: (CSS3) (1) first-child, last-child, nth-child(n) (2) first-of-type, last-of-type, nth-of-type (순서뿐만아니라 type도 같이 보겠다.) 마우스 가상 클래스 (1) :hover 마우스 클릭시 (2) :focus 마우스 클릭 했을 때