테두리는 HTML 페이지에서 콘텐츠를 구분하고 강조하는 데 사용됩니다. 페이지에 많은 정보가 있고 특정 부분에 사용자의 관심을 끌고 싶다면 해당 콘텐츠 주위에 테두리를 사용합니다. CSS의 테두리에 대한이 기사에서는 다음 주제에 대해 설명합니다.
double을 int java로 구문 분석
테두리를 사용하는 경우
표준 관행은 CSS 테두리 태그를 사용하여 HTML 페이지에서 다음에 대한 테두리를 정의하는 것입니다.
- 중요한 제목 주변
- 포스트 스크립트 또는 중요한 메모를 강조하려면
- 사람, 비디오의 사진, 삽화, 인용문을 동봉하려면
- 가격, 일정 또는 중요한 정보에주의를 끌기 위해
당신은 읽을 수 있습니다 CSS 테두리에 대해 배우기 전에.
포괄적 인 CSS 자습서를 보려면 초보자를위한 Edureka CSS 튜토리얼 . HTML 웹 디자인을 보강하기 위해 CSS를 사용하는 방법에 대한 훌륭한 경고를 받게됩니다.
CSS의 테두리
CSS 테두리는 제목이나 단락을 포함하든 HTML 페이지의 다른 섹션에 할당 할 수 있습니다. 예를 들어 보겠습니다. 여기에서는 머리글 주위에 테두리와 단락 텍스트 주위에 다른 테두리를 정의합니다.
body {background-color : lightblue} h1 {text-align : center border-style : solid} p {font-family : verdana font-size : 20px border-style : dot}단락 주위에도 테두리가 있습니다!
CSS 테두리의 속성
CSS 테두리에는 3 가지 주요 속성이 있습니다.
- 스타일:그만큼스타일속성은 테두리의 패턴을 정의합니다.
- 색깔: 색상은 CSS 색상으로 정의 된 세트 중 하나 일 수 있습니다.
- 폭: 너비는 테두리의 두께를 변경하여 더 두드러지게 만드는 데 사용됩니다.
위의 예에서는 하나의 테두리 속성, 즉 스타일 만 정의 된 것을 보았습니다. 정의되지 않은 다른 속성은 기본값을 사용합니다. 덜 자주 사용되는 반경이라는 또 다른 속성이 있습니다. 테두리의 가장자리를 둥글게 만드는 데 사용됩니다.
- 테두리 스타일 속성
| 스타일 | 기술 |
| 테두리 스타일 : 단색 | |
| 테두리 스타일 : 이중 | |
| 테두리 스타일 : 그루브 | |
| 테두리 스타일 : 능선 | |
| 테두리 스타일 : 삽입 | |
| 테두리 스타일 : 시작 | |
| border-style : 없음 | |
| 테두리 스타일 : 숨김 | |
| 테두리 스타일 : 점선 | |
| 테두리 스타일 : 파선 |
'테두리 없음'및 '숨겨진 테두리'옵션도 있음을 알 수 있습니다. 개발자는 단순히 테두리를 정의하는 것을 피할 수 있습니다. 왜이를 '숨겨진 테두리'로 명시 적으로 정의합니까? 이것은 공간 사용 및 페이지의 다른 요소와의 정렬을 위해 수행됩니다.
테두리 스타일도 요소 내에서 혼합 될 수 있습니다. 이를 위해 4 개의 개별 테두리면을 다른 스타일로 개별적으로 정의 할 수 있습니다. 이것은 두 가지 방법으로 수행 할 수 있습니다. 단일 태그에서 4면을 모두 정의하십시오. 이 경우 카운트는 맨 윗줄부터 시작하여 시계 방향으로 이동합니다. 또는 4 개의 경계선 각각을 개별 태그에서도 정의 할 수 있습니다. 두 경우 모두 다음 예제에 나와 있습니다.
| 스타일 | 기술 |
| 테두리 스타일 : 점선 파선 실선 이중 border-top-style : 점선 border-right-style : 파선 border-bottom-style : 솔리드 border-left-style : 이중 |
- 테두리 색상 속성
테두리의 색상 속성은 여러 가지 방법으로 설정할 수 있습니다. 이는 다른 요소의 색상 설정과 유사합니다. 색상은 다음 방법 중 하나로 설정할 수 있습니다.
- 이름 – '파란색'과 같은 색상 이름을 지정합니다. 'BlanchedAlmond'와 같은 멋진 색상 옵션을 사용해 볼 수도 있습니다!
- 마녀 – '# ff0000'과 같은 16 진수 값을 지정합니다.
- RGB – RGB 코드를 설정합니다. 예를 들어 rgb (255,255,0)은 노란색을 의미합니다.
- 환경 – '투명'또는 '불투명'과 같은
- 테두리 너비 속성:
이름에서 알 수 있듯이 width 속성은 4 개의 테두리면의 두께를 정의합니다. 하나의 값이 정의되면 모든면에 적용되고 그렇지 않으면 개별 너비 값도 설정할 수 있습니다.
너비는 픽셀 (‘px’), 포인트 (‘pt’) 또는 센티미터 (‘cm’)와 같은 표준 단위로 지정할 수 있습니다. 미리 정의 된 '두께', '가늘게'및 '중간'값을 사용하여 너비를 지정할 수도 있습니다.
예제가있는 Java의 mvc 아키텍처
| 스타일 | 기술 |
| 테두리 너비 : 10px | |
| 테두리 너비 : 0.1cm | |
| border-width : 중간 |
- 테두리 반경 속성
반지름을 정의하는 목적은 테두리의 둥근 모서리를 만드는 것입니다. 반지름 계수는 둥근 정도를 정의합니다. 값이 클수록 모서리가 더 구부러집니다. 표준 관행에 따라 반경 값은 테두리 너비의 1-3 배로 유지됩니다.
다음 코드가 생성됩니다.
테두리 너비 : 10px
테두리 반경 : 30px
테두리 속성에 대한 기본값
유일한 필수 속성은 스타일 . 스타일이 없으면 테두리가 나타나지 않습니다.
색상을 지정하지 않으면 기본 요소의 색상이 기본값으로 사용됩니다. 예를 들어, 단락의 텍스트 색상이 '파란색'으로 정의 된 경우 기본 테두리 색상도 파란색이됩니다. 요소에 대한 색상 정의가없는 경우 기본 색상은 '검정'입니다.
너비의 기본값은 '중간'입니다.
속기로 테두리 정의
일부 개발자는 간결한 한 줄 태그로 테두리 속성을 정의하는 것을 선호합니다. 이 약식 형식은 코드 줄을 최소화하는 데 도움이되며 전문 개발자는이 형식을 선호합니다. 테두리 정의가 간단하고 상당히 표준화 된 경우 속기 형식을 사용하는 것이 좋습니다. 그러나 테두리의 각면을 다른 스타일로 강조해야하는 경우 개별 태그를 정의하는 형식을 고수해야합니다.
다음 코드가 사용됩니다.
테두리 스타일 : 파선
테두리 색상 : 녹색
테두리 너비 : 5px
테두리 : 파선 녹색 5px
Java의 변경 가능 및 불변 객체
CSS에서 테두리를 디자인 할 때 유의해야 할 사항
페이지에 너무 많은 테두리를 사용하지 마십시오.주의가 산만 해지고 사용자가 집중하기 어려울 수 있습니다.
테두리 스타일과 색상의 일관성을 유지하는 것이 중요합니다. 페이지에서 동일한 계층 수준의 요소는 균일 성을 위해 유사한 테두리 스타일과 너비를 가져야합니다. 예를 들어 절 단색 테두리와 5px 너비로 정의되어 있습니다. 절 웹 사이트 디자인 중 요소.
한 가지 스타일의 태그 정의를 고수하십시오. 일부 개발자는 모든 값이 단일 항목에 할당 된 바로 가기 정의에 익숙합니다. 경계 꼬리표. 일부는 너비, 색상 및 스타일에 대해 모든 태그를 명시 적으로 나열하는 것을 선호합니다. 규칙은 페이지에 정교한 테두리 장식이 필요한 경우 개별 태그가 별도로 나열된다는 것입니다. 이렇게하면 이러한 사용자 지정 테두리 정의를 디버깅하는 데 도움이됩니다. 일반적인 경우에는 바로 가기 정의 만 가능합니다.
CSS 테두리에서 찾고 있던 정보를 찾으 셨기를 바랍니다.이것으로, 우리는 CSS 문서의 테두리를 끝냅니다.
우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 사용하는 기술에 능숙 해집니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.
질문이 있으십니까? 'Border in CSS'블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.