반응형 전체 글265 [CSS] position position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. 1. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다. 2. position: rel.. 2023. 10. 12. [CSS] margin과 padding의 차이 Margin: Object와 화면과의 여백(외부여백) Padding: Object내의 내부여백 1. 속성 4개 사용 시계방향(위, 오른쪽, 아래, 왼쪽) 순서로 값을 주면 된다. Ex) margin : 10px 10px 10px 10px 2. 속성 2개 사용 2개의 속성만 사용할 경우, 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백을 의미한다. Ex) margin : 10px 10px 3. 속성 1개 사용 1개의 속성만 사용할 경우, 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 된다. Ex) margin : 10px 4. 가운데 정렬 auto를 이용한다. padding은 auto값 선언 불가. Ex) margin : auto 2023. 10. 12. [CSS] Display display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성입니다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하시는게 조금 더 감이 잘 잡히는 것 같습니다! display 속성값의 종류 none : 화면에서 사라집니다. 크기 자체도 차지하지 않습니다! 2. block : 일반적으로 설정하지 않아도 div가 갖게되는 기본값입니다. (태그에 따라 기본값이 다를 수 있습니다.) 기본적으로 width 가 자신의 컨테이너의 100% 가 되게끔 합니다. 쉽게 말하자면, 가로 한 줄을 다 차지하게 됩니다. 3. inline : 컨텐츠를 딱 감쌀정도의 크기만 갖게됩니다. block태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸.. 2023. 10. 12. [CSS] line-height line-height : 줄 높이 설정 2023. 10. 12. 이전 1 ··· 57 58 59 60 61 62 63 ··· 67 다음 반응형
