지식루프

정의 및 특징 태그의 target 속성은 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시합니다.문법속성값 _blank 링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈함._self 링크된 문서를 링크가 위치한 현재 프레임에서 오픈함.기본값으로 생략 가능._parent 링크된 문서를 현재 프레임의 부모 프레임에서 오픈함._top 링크된 문서를 현재 윈도우 전체에서 오픈함.프레임 이름 링크된 문서를 명시된 프레임에서 오픈함.

📌 CSS 스타일 적용 방법CSS에서 스타일을 적용하는 방법은 크게 3가지가 있습니다. 스타일유형적용방식우선순위1. 인라인 스타일 (Inline Style)요소에 직접 style="..." 속성을 사용우선순위 가장 높음 (1000점)2. 내부 스타일 (Internal CSS) 태그를 사용하여 HTML 문서 내에서 정의중간 (클래스, 태그 선택자 적용 가능)3. 외부 스타일 (External CSS)별도의 .css 파일을 만들고 태그로 연결유지보수 용이, 우선순위 낮음✅ 1. 인라인 스타일 (Inline Style)✅ HTML 요소 내부에서 직접 style 속성을 사용하여 스타일을 지정하는 방식. p style="color: red; font-size: 20px;">인라인 스타일 예제p>  ✅ 특징우선..

CSS에서 box-sizing은 요소의 크기를 계산하는 방식을 정의하는 속성입니다. 이 속성을 통해, 요소의 width와 height가 포함하는 영역이 달라지며, 레이아웃을 더 직관적으로 제어할 수 있습니다. box-sizing에는 주로 두 가지 값이 사용됩니다:1. content-box (기본값)요소의 width와 height가 내용 영역(content area)의 크기를 의미합니다. 즉, padding, border는 이 값에 포함되지 않고, 요소의 최종 크기에 추가됩니다.예를 들어, width: 200px인 요소에 padding: 20px과 border: 10px을 추가하면 최종 요소의 크기는 다음과 같습니다:가로 크기: 200px (content) + 20px (left padding) + 20p..

CSS에서 border는 HTML 요소의 경계(테두리)를 정의하는 속성입니다. border는 요소의 외곽에 적용되며, 스타일, 두께, 색상을 지정할 수 있습니다. 주요 구성 요소는 다음과 같습니다:border-width: 테두리의 두께를 설정합니다. 두께는 픽셀(px), 포인트(pt), 백분율(%) 등으로 지정할 수 있으며, thin, medium, thick 등의 값도 사용할 수 있습니다.예: border-width: 2px;border-style: 테두리의 스타일을 설정합니다. 가능한 값은 다음과 같습니다:solid: 실선dashed: 점선dotted: 점선 (작은 점들)double: 이중선groove: 입체적인 홈이 파인 효과ridge: 입체적인 돌출 효과inset: 요소가 눌려 들어간 듯한 효과o..

CSS에서 마진 중복(Margin Collapse)은 인접한 블록 요소들의 상하 마진(margin-top, margin-bottom)이 겹쳐지는 현상입니다.  이 현상은 수직 마진에서만 발생하며, 수평 마진에서는 적용되지 않습니다.  마진 중복이 발생하면 두 요소의 마진이 합쳐지는 대신, 더 큰 마진 값이 적용됩니다.  이를 통해 예상치 못한 마진이 설정될 수 있으니, 이를 이해하고 관리하는 것이 중요합니다.  # 마진 중복이 발생하는 경우 1. 인접한 블록 요소 간두 블록 요소가 위아래로 인접해 있을 때, 서로의 margin-bottom과 margin-top이 중복됩니다. 이때 더 큰 값이 적용됩니다. 이 경우, 두 블록 요소 사이의 간격은 50px이 아닌, 30px(더 큰 값)만 적용됩니다. 2. 부..

CSS의 속성 중 margin 은 요소의 외부 여백을 지정한다.   element는 우리가 작성한 컨텐츠라고 보면 된다.  margin 은 속성값을 가진다. - 단위 : px, em, cm 등의 단위가 있다. - auto : 브라우저가 너비를 계산한다- % : 부모 요소의 가로 너비에 대한 비율로 지정한다.  1. 모든 방향에 대해 한 번에 설정하는 방법.element { margin: 20px 15px 10px 5px; }이 방식은 위, 오른쪽, 아래, 왼쪽 순으로 여백을 지정한다.2. 축약형 사용법축약형을 사용하면 1개, 2개 또는 3개의 값을 줄 수 있다.하나의 값: 모든 방향에 동일한 여백을 준다.element { margin: 20px; /* 위, 오른쪽, 아래, 왼쪽 모두 20px */ }두 ..