HTML 링크를 클릭하면 대부분 새 탭에서 링크가 열립니다. 이를 통해 사용자는 기존의 페이지를 유지하며, 새로운 탭에서 브라우징을 계속할 수 있는 장점이 있습니다. 이번 포스팅에서는 HTML 요소에 링크를 지정하는 방법, 새 탭에서 여는 방법, 이와 관련된 탭내빙 공격에 대해 알아보도록 하겠습니다. 요소에 링크 적용하기 텍스트 또는 이미지 요소에 웹페이지 링크를 적용하기 위해서는 앵커 요소와 href 속성을 사용합니다. Please check my website. 링크를 클릭하면 브라우저는 현재 탭에서 해당 URL로 이동하게 됩니다. 링크를 새 탭에서 열기 위의 코드에 target="_blank" 속성을 추가하면 링크를 새 탭에서 열도록 할 수 있습니다. Please check my website. 링..
CSS에서는 절대적 또는 상대적 크기 설정 방법으로 요소의 길이와 크기를 지정할 수 있습니다. 절대적 설정 속성으로는 px, cm, in 등이 있으며, 상대적 설정 속성으로는 em, rem 등이 있습니다. CSS 요소 크기 절대적 설정 방법 절대적 설정은 요소의 실제 크기를 기준으로 하며, 모든 디바이스에서 동일하게 표현되는 것을 목표로 합니다. 물론, 디바이스에 따라 실제 표현에는 약간의 차이가 발생할 수 있습니다. px px 또는 픽셀은 CSS에서 요소 크기를 설정하는 가장 일반적인 방법입니다. 1 픽셀은 1/96 인치를 의미하며, 다른 모든 절대적 길이 요소들은 1 픽셀을 기준으로 삼습니다. 그러나 픽셀이 처음 도입되었을 때는 모니터의 크기가 1024 x 768이었으며, 96 DPI(dots per..
CSS 포지션(postion) 속성은 요소를 문서의 특정 위치에 배치할 때 사용합니다. 요소의 최종 위치는 포지션의 top, right, bottom, left 값에 따라 결정됩니다. static: 일반적인 흐름을 따라 요소를 배치하는 속성입니다. relative: 일반적인 흐름을 따라 요소를 배치하고, 자신을 기준으로 위치 값을 적용합니다. absolute: 요소를 일반적인 흐름이 아닌 가장 가까운 특정 부모 요소에 따라 상대적으로 배치합니다. 부모에 특정한 포지션 속성이 없다면(static 포함) 상위 컨테이너 블록을 기준으로 합니다. 다르게 말하자면, absolute 속성을 사용하려면 부모 요소에 특정한 포지션 속성이 부여되어 있어야 합니다. fixed: 요소를 일반적인 흐름이 아닌 뷰포트의 컨테이..
HTML 요소들은 기본적으로 블록 또는 인라인 디스플레이 속성을 갖습니다. 크게 네 가지의 디스플레이 속성이 존재합니다. block inline inline-block none block 디스플레이 속성 값이 블록(block)인 요소의 너비는 가로 전체에 해당하며, 새로운 라인에 표시됩니다. 대표적인 태그로는 , , 가 있으며, width, height, margin 등의 속성을 적용할 수 있습니다. See the Pen display: block; by 11292021 (@11292021) on CodePen. inline 디스플레이 속성 값이 인라인(inline)인 요소의 너비는 해당 요소의 내용에 해당하며, 새로운 라인에서 시작되지 않습니다. 대표적인 태그로는 , , 등이 있으며, 너비나 높이는 지..
