본문 바로가기
728x90

Display4

HTML/CSS - flex(1) 안녕하세요, 드디어! flex를 정리하려 합니다. 이때까지 수평 정렬을 하기 위해 display: inline-block;이나 float: left;를 사용하는 법에 대해 공부했었는데요, 이번에 정리할 flex를 배우게 되면 아주 손쉽게 수평/수직 정렬이 가능합니다! 간단히 block 속성 값을 갖는 div태그들을 flex를 이용하여 수평 정렬하는 것을 확인해보겠습니다. 아래 코드와 같이 container에 flex속성 값을 주는 것만으로 수평 정렬이 일어났습니다! (여기서 container의 자식 클래스인 item에 display: flex;를 적용하면 수평 정렬이 일어나지 않습니다! 이것은 container에 flex속성 값을 부여해야지 item개념이 생기기 때문인데요, 아래에서 추가 설명드리겠습니다.. 2021. 6. 8.
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 - 하이퍼링크 안녕하세요! 오늘은 HTML/CSS의 하이퍼링크에 대해 좀 더 다뤄보려 합니다. 원래 기존에 하이퍼링크는 텍스트 형태로 나타났는데요, 이렇게 사용할 경우 텍스트에만 하이퍼링크가 들어가게 됩니다. 그럼 이미지에는 하이퍼링크를 어떻게 걸면 될까요? 아주 쉽게도 와 사이에 이미지를 넣어주면 된답니다! 이렇게요! 한걸음 더 나아가서 img와 텍스트 모두 하이퍼링크를 걸려면 어떻게 하면 될까요? 정답은 위에 있답니다! 바로 텍스트 이렇게요!! 그런데 글자가 이미지 바로 옆에 있어서 뭔가 이쁘지가 않네요 ㅠㅠ 이건 지난 시간에 정리했듯 img 태그는 inline 속성을 가지고 있기 때문에 글자가 img 바로 옆에 오게 됩니다! img태그를 block으로 바꾸거나 아래의 텍스트를 block으로 바꾸게 되면 텍스트가 .. 2021. 5. 9.
HTML/CSS - display 안녕하세요, HTML/CSS에서 속성을 나타내는 display에 대해 공부하겠습니다. display의 종류는 여러 가지가 있는데요, (inline/block/inline-block/flex/list-item/none 등) 그중 많이 쓰는 것들만 한번 알아보겠습니다! inline : 다른 요소들과 같은 줄에 머무려고 하며 필요한 만큼의 가로길이만 가지려 합니다. inline을 display의 기본 값으로 갖는 태그로는 , , , , , 등이 있습니다. block : 다른 요소들과 독단적인 줄에 가고자 하며 최대한 큰 가로길이를 가지려 합니다. block을 display의 기본 값으로 갖는 태그로는 ,,,,, 등이 있습니다. my name이 독단적으로 줄을 가지고 있으며 background가 끝까지 가는 것.. 2021. 5. 8.

티스토리툴바