Display

[CSS] CSS에서 위치를 담당하는 요소들

디스플레이(Display) display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 중요한 속성 중 하나이다. html의 모든 요소는 각각의 기본 display 속성 값을 가지고 있고, CSS를 통해 속성 값을 바꿀 수 있다. li { display: inline; } /* 요소를 inline으로 변경하면 가로메뉴를 만들 수 있다 */ 인라인-블록(inline-block) 요소 자체는 인라인(inline) 요소처럼 동작하지만, 내부에서는 블록(block) 요소처럼 동작한다. 인라인 요소와 다르게 너비와 높이를 설정할 수 있다. 블록 요소처럼 margin을 이용하여 여백을 지정할 수 있다. 주로 메뉴나 내비게이션 바를 만들 때 사용된다. HTML 요소 숨기기 display 속성 값을 none으로..

[TIL] CSS 아웃라인, 대체글꼴, 디스플레이 속성

✍ Today I Learned CSS에서 설정하는 height와 width는 내용(content)을 대상으로 한다. 아웃라인(outline)이란 html 요소의 가장 바깥 부분, border 외부에 그려진 선이다. border 속성과는 달리 html 요소의 전체 크기에는 포함되지 않는다. 주로 button에 사용된다. CSS에 text-shadow와 box-shadow 속성을 이용해서 그림자를 추가할 수 있다. font-family 속성을 이용하여 글꼴을 지정할 땐, 대체글꼴을 같이 지정해주는 것이 좋다. 태그를 사용하면 여백과 줄바꿈이 그대로 브라우저 화면에 나타난다. list-style-position: inside; 이렇게 하면 리스트 마커(marker)까지 리스트 태그에 포함된다. display..