position

[CSS] 중앙 정렬의 3가지 방법(position, flex, table)

수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 중앙 정렬에 대해 알아보자! 화면 정중앙에 요소를 정렬하는 방법은 크게 3가지가 있다. position 속성과 transform 속성 사용 flex 속성 사용 table 속성 사용 1. position 속성과 transform 속성 사용 [HTML] [CSS] .position-center { width: 400px; height: 300px; background-color: green; position: relative; } .position-center > div { width: 100px; height: 100px; background-color: lightgreen; position: absolute; top: 50%; left: 50%; transfo..

[CSS] 수직 정렬의 3가지 방법(padding, line-height, position)

수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 수직정렬에 대해 알아보자! 수직정렬에는 3가지 방법이 있다. padding 속성 사용 line-height 속성 사용 position 속성과 transform 속성 사용 전체적으로 사용할 예제 제목 내용 부모 를 간단하게 컨테이너라고 지칭하겠다. 1. padding 속성 사용 .padding { width: 400px; background-color: orange; padding: 100px 0; } padding-top 과 padding-bottom 에 동일한 값을 준다. (예시에서는 padding: 100px 0; 으로 한 번에 top과 bottoom 값 설정) 장점 - 컨테이너의 높이값이 정확하지 않을 때 간단하게 사용할 수 있다. 단점 - 내가 설정한 ..

[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 table 요소에서 border-collapse: collapse; 를 적용하면 단일 텍스트로 변경된다. 티스토리 테이블 표와 같은 스타일로 꾸미려면 nth-child(even or odd) 선택자를 이용한다. tr:nth-child(even) { background-color: #f2f2f2; } vertical-align을 적용하려면 height 값이 설정되어야 한다. table에서 overflow 속성을 적용했을 때 콘텐츠의 양이 충분하지 않다면 min-width 값을 설정해야 한다. text-overflow: ellipsis; 이렇게 설정하면 넘치는 콘텐츠는 줄임표(...)로 표시된다. 레이아웃을 위한 속성으로 position과 float이 있다. 크롬 확장프로그램..