코딩하는라민

퀵메뉴 만들기 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: ..

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으로 초기화. 학원에서이상하게 보인다면서 한번 봐달라고 했던 친구가 있었는데 보니까 마진과 패딩을 초기화를 안해서 여백이 생겨 이상하게 보였던 것이었다. (코린이는 갑자기 물어본 시점에서 모르는 거 물어볼까봐 긴장 ..