개발천재

Position 개념 정리position은 HTML 요소의 위치를 지정하는 방법을 정의한다. 이 속성은 요소를 문서 내에서 배치하는 방식을 제어한다. 요소의 정확한 위치를 지정하기 위해서 top, right, bottom, left 와 함께 사용된다. static: 기본 값relative: 다른 요소와의 상대적 배치를 조정할 때 사용.absolute: 팝업 메뉴, 툴팁, 모달 창처럼 특정 위치에 고정된 요소를 만들 때 사용.fixed: 고정된 헤더나 푸터, 항상 보이는 버튼을 만들 때 사용.sticky: 스크롤 위치에 따라 고정되는 내비게이션 바를 만들 때 사용.  static (기본값)position을 지정하지 않으면 기본적으로 static이 적용되어 있다. 요소의 기본 위치는 문서의 흐름에 따라 배치..

데스크탑에서는 br 태그를 넣어 줄을 끊어줘야 자연스럽고, 모바일에서는 br태그를 넣지 않아야 자연스러운 경우가 있다. 이런 경우에는 모바일에서만 br 태그를 무시하게 할 수 있다. css에서 강제로 br 태그 무시하게 하기 @media only screen and (max-width:767px){ br { display:none!important; } } css 조금 더 심화버전 important를 쓰지 않고 br태그 무시하는 방법 @media only screen and (max-width:767px){ br{ display:inline-block content:" "; padding:0 2px; } } JavaScript에서 br 태그 무시하게 하기

SVG란? SVG란 Scalable Vector Graphics로써, 벡터 그래픽을 표현하기 위한 XML 마크업 언어이다. 픽셀 단위로 이미지를 구성하는 png, jpg와는 다르게 벡터 기반으로 이미지를 표현할 수 있다. 벡터 기반이다 보니 이미지를 축소하거나 확대해도 이미지가 깨지지 않고, 용량이 작기 때문에 웹상에서 주로 사용하는 이미지 형식이다. W3C에서 개발했으며 CSS, DOM, SMIL과 호환된다. 태그란? 웹상에서 벡터 이미지를 구현하기 위해 사용하는 마크업 태그이다. SVG 이미지를 구현하기 위해서는 태그로 시작하는데 width, height 속성을 사용하여 이미지의 가로와 세로 길이를 조절할 수 있다. HTML 상에 코드를 그대로 넣어줌으로 웹상에서 벡터 이미지를 구현할 수 있는데, 이..