본문 바로가기

HTML, CSS

(7)
[HTML, CSS] 내용 부분 스타일 지정만으로 푸터 하단 고정하는 방법 안녕하세요 주갬입니다. 오늘은 사이드 프로젝트를 하면서 푸터가 중간에 떠있는 현상을 해결한 방법에 대해 설명 드리려고 합니다. 구글링을 해보시면 푸터를 하단에 고정하기 위한 다양한 방법들이 존재합니다. 하지만 그 대부분의 방법이 저의 상황에서는 적용하기엔 무리가 있는 방법들이였습니다. 그 방법들을 간략히 정리하면 이렇습니다. 1. position: fixed - 푸터가 하단에 계속 고정되어 있어 스크롤을 내려도 항상 같은 위치에 푸터가 존재해 어색하다. 2. position: absolute - 푸터를 본문 밑에 고정시킨다면 본문 길이가 짧을 때 하단 고정이 안된다. - 본문 길이가 길 때도 스크롤은 absolute로 지정된 영역을 잡아주지 않아 어색하다. 3. 본문에 height: 100% 나 100v..
[HTML, CSS] Input박스 안에 아이콘 넣기 (fontawesome) 안녕하세요, 주갬입니다. 얼마전 회사에서 기간 설정 ui를 구성하다가 input 박스 안에 달력 아이콘을 넣어야할 일이 생겼습니다. 인터넷을 찾아보니 input박스의 background 속성으로 이미지를 넣는 방법이 많이 보이던데, 실제로 간단한 아이콘을 삽입할때는 이미지보다는 fontawesome이나 google material icons을 태그 형식으로 넣는 경우가 많을 것이라 생각합니다. 저도 fontawesome을 이용해 개발중이기 때문에 제가 알아낸 방법을 공유드리려고 합니다. 예쁘게 인풋박스 안에 달력 아이콘이 들어가있는 모습입니다. 방법의 핵심은 CSS의 position을 이용하는 것입니다! CSS의 position에는 static, relative, absolute, fixed가 있습니다...
[CSS] border-box와 content-box Box sizing에 대해 알아보겠습니다. Box sizing에는 콘텐츠 중심으로 스타일을 적용하는 content-box와 크기를 중심으로 스타일을 적용하는 border-box가 있습니다. content-box의 대장은 '콘텐츠(content)' 입니다. 박스안에 들어가는 콘텐츠의 영역을 침범해서는 안됩니다. 그렇기 때문에 들어가는 박스는 고정되고 패딩과 테두리가 밖으로 생기게 됩니다. border-box의 대장은 '테두리(border)'입니다. 박스의 가장 겉부분인 테두리가 고정되어 있어야 하기 때문에, 패딩과 테두리의 두께가 안으로 생긴다고 생각하시면 편할 것 같습니다! 실제로는 border-box가 더 흔하게 쓰인다고 합니다. 예시를 보겠습니다. 높이와 너비가 같은 노란색의 box 2개가 있습니다...
[CSS] selectors & display CSS기초를 다지고 있는 주갬입니다. 오늘은 Selector의 종류와 display, position에 대해 알아보겠습니다. selector의 종류 Universal * type Tag ID #id Class .class Attribute [] 가상 클래스 :hover -> 해당 요소에 마우스를 올리면 동작하는 CSS button:hover { color: red; background: beige; } Display 이해하기 기본적으로 우리가 사용하는 Tag 에는 block요소와 inline요소가 있습니다. inline: 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치. -> inline 엘리먼트: , , -> width, height 속성은 무시 -> 해당 태그가 마크업하고 있는 컨텐츠의 크기..
[HTML, CSS 기초 쌓기] HTML 문서 유효성 검사 툴 소개 안녕하세요! HTML, CSS의 기초를 공부하고 있는 주갬입니다. 오늘은 HTML을 공부하실 때 유용한 사이트를 소개해 드리려고 합니다. HTML은 마크업 언어로 정해진 문법에 따라 문서의 구조를 표현합니다. 마크업 언어(markup 言語, markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라 한다. _wiki 이 사이트는 작성된 HTML 문서가 마크업언어의 문법에 맞게 쓰여졌는지 유효성 검사를 해주는 사이트로, HTML 공부를 할 때 유용하게 쓰실 수 있습니다. ht..
[CSS] margin, padding margin: 20px 같은 표현은 상하좌우 모두 20px을 의미합니다 margin: 30px 10px은 상하 30px, 좌우 10px을 의미합니다. margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미합니다. margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미합니다. 출처: https://ofcourse.kr/css-course/margin-padding-%EC%86%8D%EC%84%B1
[CSS] display 속성 inline: 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치. -> inline 엘리먼트: , , -> width, height 속성은 무시 -> 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문, ? -> margin, padding 속성을 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않음. block: 전후 줄바꿈이 일어나 혼자 한 줄을 차지 -> block 엘리먼트: , , -> width, height, margin, padding 속성이 모두 반영이 됨. inline-block: 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됨. (inline) -> inline-block 엘리먼트: , -> 명시적으로 display: inline-b..

반응형