css border 속성으로 테두리 한 번에 꾸미기
네 안녕하세요, 이번 포스팅에서는
이전 시간에 알려드린 테두리 꾸미는 걸 한 번에 하는 방법에 대하여 알아보도록 하겠습니다.
테두리 꾸미는 것도 그 기능들을 각각 다 쓰려면 정말 번거로운 일인데,
그걸 한 번에 하는 방법이 있습니다.
그래서 이번 시간에는 그 방법을 알아볼 것입니다.
그리고 테두리를 꾸밀 때 쓰는 프로퍼티를 잘 모르시는 분들이라면
제가 아래에 테두리를 꾸미는 방법에 대한 글을 써 둔 링크를 기재를 해둘 테니,
거기를 방문하시기를 추천드립니다.
2023.03.18 - [html, css, 자바스크립트] - css border 속성 이용하여 테두리 꾸미기
css border 속성 이용하여 테두리 꾸미기
css border 속성 이용하여 테두리 꾸미기 네 안녕하세요, 이번 포스팅에서는 테두리를 꾸미는 방법에 대하여 알아보도록 하겠습니다. 박스를 꾸밀 때는 특히 박스의 내부보다는 테두리를 주로 꾸
funnycoderl.tistory.com
1. 테두리를 꾸밀 때 쓰는 단축 프로퍼티
테두리를 꾸미는 css 프로퍼티도 폰트를 꾸밀 때 쓰던 단축 프로퍼티처럼 한 줄로 간단히 쓸 수도 있습니다.
그 순서는 이렇습니다.
border : width style color위 코드와 같이 너비, 스타일, 색깔 순으로 씁니다.
그리고 이 역시 이 모든 것들을 다 적용을 시켜야 하기 때문에 쉼표를 붙이지 않습니다.
쉼표를 붙이게 되면 에러가 나기 때문입니다.
그러면 이들을 실제로 쓰면 어떻게 쓸 수 있는지 간단한 예시를 들어서 보여드리겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 모델</title>
<style>
div.inner {
background : yellow;
padding : 20px;
border : 5px dotted red;
margin : 30px;
}
</style>
</head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의 빨간색 점선</p>
<hr>
<div class="inner">
<img src="media/mio.png" alt="고양이눈">
</div>
</body>
</html>이렇게 한 번 작성을 해봤습니다.
고양이 사진이 있는 사진을 감싸고 있는 html 태그의 테두리를 한 번 꾸며봤습니다.
그럼 결과 화면도 같이 봅시다.
이렇게 한 번 작성을 해봤습니다.
이를 좀 더 응용을 하면 우리가 가지고 있는 이미지 파일을 액자처럼 꾸며서 저장을 하실 수 있습니다.
여기까지 css에서 사용하는 박스 프로퍼티로 기본적인 제어를 하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 이 테두리를 꾸미는 방법을 좀 더 다채롭게 쓰는 방법들에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 감사드립니다 ~
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css border-radius 속성으로 각각의 테두리에 둥근 모서리 적용시키기 (0) | 2023.03.19 |
|---|---|
| css border-radius 속성으로 모든 모서리 둥글게 만들기 (0) | 2023.03.19 |
| css border 속성 이용하여 테두리 꾸미기 (0) | 2023.03.18 |
| css 박스에 색 입히기 (0) | 2023.03.18 |
| css 박스 프로퍼티로 박스 제어하기 (0) | 2023.03.18 |
댓글