코딩하는라민

제이쿼리 라이브러리 다운로드 및 사용하기 1. 제이쿼리 라이브러리 다운로드해서 넣기 Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download jquery.com - head 태그 안 title 태그 아래 또는 body 태그 바로 위 에 넣기 2. 제이쿼리 CDN 넣기

퀵메뉴 만들기 margin 을 이용한 퀵메뉴 만들기 Home Blog Contact #quickmenu{ width: 100px; position: fixed; right: 0; top: 50%; transform: translateY(-50%); } #quickmenu a{ width: 150%; height: 20px; line-height: 20px; margin-bottom: 5px; padding: 15px; transform: 1s; display: block; font-weight: bold; } #quickmenu li:hover{ margin-left: -50%; } #quickmenu li:first-child{ background-color: pink; } #quickmenu li:n..

Box 정 가운데 정렬하기 1. position - 요소들을 배치하는 속성 - top, left, bottom, right 으로 위치 지정 가능 - relative : 자신을 기준으로 위치 지정, 다른 요소에 영향을 주지 않고 자신만 움직임. - absolute : relative 된 부모 속성을 기준으로 위치 지정 - fixed : 위치 고정, 헤더를 고정할 경우 헤더 바로 아래 요소를 헤더 높이만큼 마진으로 아래로 이동시켜줘야 겹치는 부분이 생기지 않음 - static : 기본값, 지정해준 position 속성값을 초기화 시켜줌 .wrap{ width: 200px; height: 200px; border: 1px solid black; position: relative; } .wrap{ width: ..

HTML5 시멘틱 태그, 웹표준과 웹접근성 1. 시멘틱 태그 Sementic Tag - 태그에 의미를 부여한다는 것. 의미 있는 태그. - 영역을 구분짓는 태그 - HTML5 부터 추가된 태그 - 사용하는 이유 : 웹페이지를 구조화시켜 '웹접근성'을 향상시키기 위해 - 검색 성능을 향상시켜 웹사이트의 가치를 더욱 높여줌 - 모바일용 페이지에 자주 썼음 - 하지만, IE8 이하에서는 지원이 안 됨. → 지원이 되지 않는 경우, 모든 시멘틱 태그를 display: bolck; 속성을 지정해줘야 함. 그렇지 않으면 기본적으로 inline 요소로 취급이 된다고 한다. - Non-Sementic Tag : 의미 없는 태그. div, span 등과 같이 문단이나 타이틀 등의 구분이 없는 것 헤더 영역. 페이지의 로..

태그의 우선순위 ( ID & Class 선택자 ) 1. ID 선택자 & Class ID 선택자 : # - Id는 유일한 값. - 한개만 적용 가능(같은 id를 다른 데에 사용 불가능) Class : . - id 와 달리 같은 class 를 여러 개 적용 가능 → 공통 적인 것의 속성을 변경할 때 사용 ID Class #wrap{ width: 100px; height: 100px; background-color: pink; } .wrap{ width: 100px; height: 100px; background-color: skyblue; } 2. BOX - 보이지 않는 상자 - 감싸는 역할만 한다. - box : 아래로 쌓이는 것이 특징(Block 속성) - 홈페이지의 레이아웃을 div 로 뼈대를 잡고 시..

display 속성 (block, inline, inline-block, none) 1. display 속성 ① block - width 가 기본 100%라 한줄을 다 차지. 즉, block 요소 양 옆으로 다른 요소가 자리할 수 없다. ex) h, p, ul, ol, li, div 등 안녕하세요 안녕하세요 안녕하세요 div{ background: pink; } p{ background: skyblue; } ul{ background: darkseagreen; } ② inline - 자기가 가진 콘텐츠의 크기만큼의 크기만 가지게 됨.(글자 취급). - 즉, 박스가 옆으로 배열되는 대신 css상 너비, 높이, 마진, 패딩 등이 적용되지 않는다. ex) b, a, span, img 태그 등 span{ bac..

순서가 있는 태그 → OL, UL, li 태그 1. OL 태그 - Order List - 순서가 있는 목록 태그 - li 의 부모 태그 - 순번이 달린다. - OL 자체를 가운데 정렬하고자 할 때 margin: 0 auto; 해준다. 2. UL 태그 - Un Order List - 순서가 없는 목록 태그. - li의 부모 태그 - style 지정을 통해서 블릿 기호의 모양 변경 가능 - UL 자체를 가운데 정렬하고자 할 때 margin: 0 auto; 해준다. 3. li 태그 - UL, OL 태그의 자식 태그로 사용 - list-style: 을 이용해서 태그의 스타일을 바꿔줄 수 있다. - list-style: none; 으로 초기화해주면 블릿 기호를 제거할 수 있다. - UL, OL 태그에 text-a..

초기화 & 마진(margin)과 패딩(padding) 1. 마진과 패딩 ( margin & padding ) 태그에는 기본적으로 여백이 들어가있다. 따라서 css 에서 초기화를 시켜줘야 내가 원하는 만큼의 여백을 제대로 지정해줄 수 있다. ul 과 li 에 각각 plum, pink 의 배경색을 주고, 바깥에 이를 감싸고 있는 전체 body 에는 azure 라는 색을 주었다. 리스트 태그는 페이지의 한 줄을 다 차지하는 '블록 속성 태그' 2. CSS 초기화 해주기 모든 속성의 마진과 패딩을 0으로 초기화. 학원에서이상하게 보인다면서 한번 봐달라고 했던 친구가 있었는데 보니까 마진과 패딩을 초기화를 안해서 여백이 생겨 이상하게 보였던 것이었다. (코린이는 갑자기 물어본 시점에서 모르는 거 물어볼까봐 긴장 ..