본문 바로가기
728x90

Web 개발40

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.
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.
HTML/CSS-실습(1) 안녕하세요, 개발자가 되기 위해 퇴사를 꿈꾸는 직장인입니다. 이제부터 본격적으로 공부하여 혼자 만들어본 페이지들을 올리려 합니다. 만들어보고 부족한 점이 뭔지, 고치면 더 효율적으로 변하는 항목이 뭔지 정리 및 리뷰해보는 순서로 진행하려 합니다. ※ 코드잇(Codeit)에서 배운 내용을 기반으로 코드잇 내의 연습문제를 풀어보겠습니다. 첫 연습으로 만들고자 하는 페이지는 야식 메뉴판을 만들어 보았습니다 제가 짠 코드 먼저 공유하겠습니다. 1. HTML 2. CSS 부족한 점 및 개선 필요사항 : 음식 아래 설명이 왼쪽 정렬이면서 살짝 거리를 띄우게 만들고 싶은데 실패하였습니다.. [padding 및 margin을 쓰면 오른쪽이 더 넘어가게 되더라고요 ㅠㅠ] ♠이 프로젝트를 하면서 느낀 점 및 개선사항 -... 2021. 5. 5.

티스토리툴바