728x90 CSS19 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. HTML/CSS - 하이퍼링크 안녕하세요! 오늘은 HTML/CSS의 하이퍼링크에 대해 좀 더 다뤄보려 합니다. 원래 기존에 하이퍼링크는 텍스트 형태로 나타났는데요, 이렇게 사용할 경우 텍스트에만 하이퍼링크가 들어가게 됩니다. 그럼 이미지에는 하이퍼링크를 어떻게 걸면 될까요? 아주 쉽게도 와 사이에 이미지를 넣어주면 된답니다! 이렇게요! 한걸음 더 나아가서 img와 텍스트 모두 하이퍼링크를 걸려면 어떻게 하면 될까요? 정답은 위에 있답니다! 바로 텍스트 이렇게요!! 그런데 글자가 이미지 바로 옆에 있어서 뭔가 이쁘지가 않네요 ㅠㅠ 이건 지난 시간에 정리했듯 img 태그는 inline 속성을 가지고 있기 때문에 글자가 img 바로 옆에 오게 됩니다! img태그를 block으로 바꾸거나 아래의 텍스트를 block으로 바꾸게 되면 텍스트가 .. 2021. 5. 9. 이전 1 2 3 4 5 다음
