CSS~border~
다음은 border에 대해 배웁니다.
border란?
이것은 프레임입니다.
마지막 padding과 margin의 설명을 알면 상당히 간단합니다! 😊
설명 방법은 다음과 같습니다.
style.cssh1 {
color: black;
font-size: 40px;
background-color: red;
border:4px solid black;
width: 15%;
padding: 10px 20px 10px 20px;
margin: 30px 20px 10px 40px;
}
기술한 뒤는 이렇게 될까라고 생각합니다.
↓
오, 쉽다 😂
부품마다 각각 해설하네요.
border▶선4px▶굵기solid▶종류black▶색
됩니다.
덧붙여서, 선의 주된 종류에 관해서는 이하가 됩니다.
solid 실선
dotted 점선
dashed 점선
double 이중선
지금은 모든 것을 둘러싸도록 설정하고 있습니다만, 부분적으로 당기고 싶은 경우등 있군요!
그럼 가자!
우선 HTML에 추가하겠습니다!
index.html<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="css/style.css">
<title>CSSの書き方</title>
</head>
<body>
<section>
<h1>CSSについて</h1>
<p>cssの基礎</p>
</section>
</body>
</html>
그럼 다음에 CSS를 추가하자!
style.cssp {
font-size: 20px;
background-color: pink;
margin:40px;
padding: 10px 20px 10px 20px;
width: 15%;
border-top:10px solid red;
border-bottom: 10px solid green;
}
네! 브라우저에서 보자!
↓
느낌이 듭니다!
단어 설명으로
top▶위
right▶오른쪽
bottom▶아래
left▶왼쪽
됩니다!
이들은 padding, margin 때도 사용합니다 👍
Reference
이 문제에 관하여(CSS~border~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akari_0618/items/2f5d2d99ac13fb533ea9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
h1 {
color: black;
font-size: 40px;
background-color: red;
border:4px solid black;
width: 15%;
padding: 10px 20px 10px 20px;
margin: 30px 20px 10px 40px;
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="css/style.css">
<title>CSSの書き方</title>
</head>
<body>
<section>
<h1>CSSについて</h1>
<p>cssの基礎</p>
</section>
</body>
</html>
p {
font-size: 20px;
background-color: pink;
margin:40px;
padding: 10px 20px 10px 20px;
width: 15%;
border-top:10px solid red;
border-bottom: 10px solid green;
}
Reference
이 문제에 관하여(CSS~border~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/akari_0618/items/2f5d2d99ac13fb533ea9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
