<html>
<head>
<title>border 속성 공부!</title>
</head>
<body>
<p style="border : 3px dotted #121234"> </p>
</body>
</html>
border속성은 테부리의 너비를 설정하고 픽셀단위로 지정합니다. 이것은 미리 정의된 값중 하나로 지정할 수 있는데 일단 실행해보고 조금씩 수정해나가는 방법을 추천드립니다. 이런 테두리 속성은 스타일로 정의되며 이것은 CSS고유의 스타일로서 매우 편리한 사용이 장점입니다. 특히 아래와 같이 border-width는 정의된 값을 미리 볼 수 있으므로 한번 구현해보시길 바랍니다.
<html>
<head>
<style>
p.border-width-1 { border-style: solid;
border-width: 6px;
}
p.border-width-2 {border-style: dotted;
border-width: 1px;
}
</style>
</head>
<body>
<h2>border-width 표시</h2>
<p class="border-width-1">미리 정의된 1값</p>
<p class="border-width-2">미리 정의된 2의 값</p>
</body>
</html>
border-width 이외에 추가로 color속성은 테두리의 색을 설정할 수 있는데요. 이것도 마찬가지로 미리 정의한 후 편하게 불러올 수 있습니다. 그렇기 때문에 CSS에서는 아예 책자로 만들어서 편하게 복붙하는 경우가 많습니다. 흔히들 코더라면 수식을 모두 쓰지는 않는 법. 자신만의 사전을 모아두는 것이 편리합니다. color사용법은 직접 작성해보는 것을 추천드립니다. 어렵지않겠죠?
마지막으로 CSS의 테두리 스타일은 모든 면의 스타일을 설정하고 그것이 배경위에 배치하게 만드는 독특한 방식을 따릅니다. 테두리 스타일의 기본값은 none이며 테두리 스타일에는 여러가지 값이 존재합니다. 그러므로 CSS에서 테두리는 (오른쪽, 왼쪽, 아래, 위) 네가지 방향 모두를 지정하는 것입니다. 각각 다른 스타일로 지정할 수도 있는데 그렇게 되면 특별한 디자인이 아닌이상 난해해질 수 있으므로 판단은 개발자의 몫입니다. 아 디자이너의 몫이 될 수도 있겠군요.
추가적으로 테두리는 각지거나 둥근모서리이거나 네면 모두 다르다고해서 구글 SEO 최적화 검색엔진에 영향을 끼치는 것은 아닙니다. 그러므로 테두리의 윤곽선을 네방향 모두 자신의 스타일에 맞게 CSS커스텀 하실 분들은 한번 씩 실행해보면서 맞는 테두리를 찾는 것이 좋겠습니다.
-----------------------------
그리드 템플릿은 columns 속성에서 각 열의 너비를 정의하며 초기값은 없고 상속이 불가능한 영역으로 존재합니다. 버전은 모듈레벨1부터 6까지 다양하며 애니메이션 기능이 있기때문에 배열을 애니메이트 할 수 있습니다. 속성의 기본값으로서 none을 시작으로 컨테이너의 크기를 자동으로 그리드합니다. 최소, 최대 콘텐츠가 존재하는데 이것은 min~ max로 표시되며 열의 길이와 백분율로 핏 콘텐츠를 실험적으로 진행시킬 수 있습니다.
'뉴스' 카테고리의 다른 글
| 단항식, 다항식 차이점과 문제풀이 방식에 접근해보자 (0) | 2022.12.08 |
|---|---|
| news, issue 지난 CSS의 링크와 클래스 시작 (0) | 2022.12.07 |
| 배치 파일 정보를 응용하는 DOS 명령 프로그래밍 (0) | 2022.12.05 |
| 웹 사이트 개발과 php의 텍스트 형식 (0) | 2022.12.04 |
| 그래픽 사용자의 인터페이스에 대해서 Jframe 클래스를 소개합니다. (0) | 2022.12.03 |
