728x90 Web 개발/HTML.CSS27 HTML/CSS - Inline/block 안녕하세요, display 요소가 많이 헷갈려 간단히 정리해보려 합니다 이전에 자세히 정리한 것은 아래 링크 참고 부탁드립니다. HTML/CSS - display HTML/CSS - display 안녕하세요, HTML/CSS에서 속성을 나타내는 display에 대해 공부하겠습니다. display의 종류는 여러 가지가 있는데요, (inline/block/inline-block/flex/list-item/none 등) 그중 많이 쓰는 것들만 한번 알아보겠.. hooni40.tistory.com Block 요소 -. , , 등이 있다. -. 사용 가능한 최대 가로 너비를 사용한다. -. 크기를 지정 가능 -. 수직으로 쌓임 -. margin, padding 속성 위, 아래, 좌, 우 조절 가능 -. 레이아웃을.. 2021. 5. 22. HTML/CSS - Position 안녕하세요, 오늘은 position에 대해 정리하려 합니다. position 설정을 해주지 않으면 요소들은 static position 상태입니다. [포지셔닝이 안 된 요소] 여기 상태에서 Relative/Fixed/Absolute 등 position 설정이 가능합니다. [포지셔닝이 된 요소] ◆ Relative position : 원래 자신의 자리를 기준으로 위치를 잡는 것 위와 같이 blue 클래스에 relative 포지션을 적용하면 아래와 같이 결과가 나오게 됩니다. (blue 박스가 초기 위치에 상대적으로 이동하게 됩니다 [위로 50px, 왼쪽으로 70px 공간이 나오게 이동] ) ◆ Fixed position : 브라우저 윈도우를 기준으로 위치를 잡는 것 ◆ Absolute position : .. 2021. 5. 18. HTML/CSS 가운데 정렬 정리 가운데 정렬이 너무 헷갈려서 display 요소별로 정리해놓으려 합니다. 가로 가운데 정렬 inline 요소 : inline 또는 inline-block 요소면 부모 태그에 text-align: center; block 요소 : margin-left: auto;, margin-right: auto; 사용 세로 가운데 정렬 1. vertical-align: middle; 이용해서 부모 요소의 텍스트와 가운데를 맞춘다 x Hello! My name is young. 2. 이것을 화면의 가운데로 정렬하려면 세로 길이가 100%인 요소를 만든 후 그 요소에도 vertical-align: middle; 적용 x Hello! My name is young. 또 다른 방법으로는. info를 inline-block으로.. 2021. 5. 16. HTML/CSS - Baseline/Vertical-align 글을 쓸때 기본적으로 글자들은 크기가 달라도 보이지 않는 어떠한 선에 맞춰져 있습니다. 결과와 같이 Hello와 World 사이즈가 다르지만 동일한 선에 맞춰져 있는 것을 확인할 수 있습니다. 이 선이 Baseline입니다! 아래 예시로 좀더 살펴보겠습니다. 뒤에 inline-block 속성을 갖는 는 inline 속성(div 태그의 기본값인 block이었다면, Korea와 같은 줄에 있을수 없다)이지만 자신만의 영역을 가지고 있습니다(block 속성). 여기서 baseline은 어디가 될까요? 바로 korea와 japan이 baseline이 됩니다. inline-block의 경우에는 div의 마지막 줄의 baseline이 전체의 baseline이 됩니다! 예외 경우를 살펴보겠습니다. 만약 inline-.. 2021. 5. 15. 이전 1 2 3 4 5 6 7 다음
