HTML 테두리를 추가하는 방법

HTML 테두리를 추가하는 방법

HTML에서 테두리는 눈에 보이는 테두리를 요소에 추가하는 간단한 방법입니다. 요소의 콘텐츠 주위에 테두리를 적용하여 시각적 프레임을 만들 수 있습니다. 테두리는 표, 이미지, 텍스트 상자 및 기타 HTML 요소에 적용할 수 있습니다. 이 기사에서는 HTML 테두리와 웹 페이지에 테두리를 추가하는 방법을 살펴보겠습니다.

HTML 테두리 유형

테두리 유형은 CSS의 일반적인 속성입니다. HTML에는 실선, 점선, 점선의 세 가지 유형의 테두리 중에서 선택할 수 있습니다.

1. 실선 테두리:

테두리는 실선 형태로 나타나며 가장 일반적인 테두리 유형입니다. 이들은 "고체"로 정의됩니다.

2. 점선 테두리:

테두리는 점선 형태로 나타나는데, 이는 간격 효과이며 "점선"으로 정의됩니다.

3. 점선 테두리:

테두리는 점과 빈 줄로 구성된 점선 형태로 나타나며 "점선"으로 정의됩니다.

HTML 테두리를 추가하는 방법

HTML 페이지에 테두리를 추가하려면 CSS 스타일 시트를 사용하세요. CSS 스타일 시트를 사용하면 HTML 요소의 스타일과 레이아웃을 변경할 수 있습니다. 테두리는 다음과 같은 대부분의 HTML 요소에 적용할 수 있습니다.

1.Images

다음 CSS 스타일시트를 사용하여 이미지에 테두리를 추가할 수 있습니다.

img {

border: 2px solid black;

}

위 코드에서 A 2 -픽셀 너비의 검은색 테두리가 모든 이미지에 적용됩니다.

2. 테이블

테이블에서 다음 CSS 스타일시트를 사용하여 외부 테두리의 속성을 수정할 수 있습니다.

table {

border: 2px solid black;
border-collapse: collapse;

}

위 스타일시트는 테이블에 2픽셀 너비의 실선 테두리를 적용합니다. . 또한 셀 사이에 추가 거리가 없도록 하기 위해 "border-collapse" 속성을 "collapse"로 설정했습니다.

3. 버튼

버튼에 테두리를 추가하여 더욱 눈에 띄게 만들 수 있습니다. 다음은 버튼에 테두리를 추가하는 코드 예제입니다.

button {

border: 2px solid black;

}

이렇게 하면 모든 버튼에 2픽셀 너비의 검은색 실선 테두리가 적용됩니다.

4. 텍스트 상자

텍스트 상자는 테두리를 추가할 수 있는 또 다른 일반적인 요소입니다. 다음은 텍스트 상자에 테두리를 추가하는 코드 샘플입니다.

input[type=text] {

border: 2px solid black;

}

이렇게 하면 모든 텍스트 상자에 2픽셀 너비의 검은색 실선 테두리가 적용됩니다.

결론

테두리 추가는 HTML 웹 디자인의 기본 단계입니다. 이는 페이지의 모양과 가독성을 향상시키는 데 도움이 됩니다. 이 문서에서는 세 가지 유형의 HTML 테두리와 CSS 스타일 시트를 사용하여 이미지, 표, 버튼 및 텍스트 상자에 테두리를 추가하는 방법을 설명합니다. HTML 테두리 기술을 익히면 웹사이트를 더욱 전문적이고 매력적으로 만들 수 있습니다.

위 내용은 HTML 테두리를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!