코딩하는라민

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