-
css 상속에 대한 정의와 속성Dung--[CSS HTML] 2023. 4. 28. 16:45
css 상속에 대한 정의와 속성
1. 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성으로 되어있습니다. 상속은 자식 요소에 형향을 끼칩니다. 상속하지 않는 속성은 자식 요소에 영향을 끼치지 않습니다.
2. 상속하는 속성
예를 들자면 color는 상속하는 속성입니다. 부모 요소에서 정한 색상이 자식 요소에도 적용이 됩니다.
<style>
p { color: blue; }
</style>
<p>Lorem <em>Ipsum</em></p>일경우, Lorem 뿐 아니라 Ipsum의 색상도 파란색이 됩니다.
3. 상속하지 않는 속성
예를 들자면 padding은 상속하지 않는 속성입니다. 부모 요소에서 padding을 정의하여도 자식 요소에 적용이 되지 않습니다.
<style>
p { padding: 20px; }
</style>
<p>Lorem <em>Ipsum</em></p>일 경우 p요소만 안쪽 여백을 만들고 em 요소에는 안쪽 여백을 만들지 않습니다.
4. 활용예시
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.abc {
color: red;
border: 1px solid #bcbcbc;
padding: 10px 20px 20px 20px;
}
</style>
</head>
<body>
<div class="abc">
<h1>Heading</h1>
<p>Paragraph <em>Emphasize</em></p>
<button>Button</button>
</div>
</body>
</html>
산출된 화면 - color는 상속하는 속성이기에 자식 요소의 색상도 빨간 색으로 만듭니다. (button 처럼 상속을 받지 않는 요소도 있습니다.)
- border와 padding은 상속을 하지 않는 속성이므로 div 요소만 적용이 됩니다.
CSS 표만들기 및 테두리 꾸미는 방법
CSS 표만들기 및 테두리 꾸미는 방법 1. CSS 테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table,th,td요소에 적용하실 수 있습니다. tr요소에는 적용이 되지 않습니다. 2. 기본모양 아무런 꾸
dsmotion.tistory.com
CSS 표꾸미기, 정렬하는 방법
CSS 표꾸미기, 정렬하는 방법 1. CSS 표 관련된 정렬 방법 표에 관련된 정렬방법에는 표 정렬, 셀 안의 내용가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본적인 모양은 1)표 : 왼쪽 정렬 2)제목
dsmotion.tistory.com
CSS 테이블 꾸미기, 표 크기 설정하는 방법
CSS 테이블 꾸미기, 표 크기 설정하는 방법 1. CSS 표와 셀의 기본 크기 표와 셀의 크기는 정해져 있지가 않습니다. 내용이 짧다면 작은 크기로, 내용이 길다면 크게 표와 셀이 형성이 됩니다. 의도
dsmotion.tistory.com
CSS를 HTML에 적용하는 방법 및 설명
CSS를 HTML에 적용하는 방법 및 설명 HTML에 CSS를 적용하는 방법에는 3가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞추어 적절한 방법을 선택합니다. - Inline Style sheet HTML 태그의 style 속성
dsmotion.tistory.com
CSS의 !important 활용하기
CSS의 !important 활용하기 css는 같은 속성을 여러번 정의 하였을때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용이 되지 않게 하려면 속성값 뒤에 !important 를 붙이셔야 합니다. pr
dsmotion.tistory.com
'Dung--[CSS HTML]' 카테고리의 다른 글
CSS 선택자의 종류와 활용방법 (0) 2023.05.03 CSS기초 변수를 활용하기 (0) 2023.05.03 CSS의 !important 활용하기 (0) 2023.04.28 css 기초 여러가지 문법 만들기 (0) 2023.04.27 CSS를 HTML에 적용하는 방법 및 설명 (1) 2023.04.26
