CSS 수업

HTML을 꾸며주는 아름다운 언어

CSS 수업 HTML을 꾸며주는 아름다운 언어

상속

상속

  • 상위 엘리먼트의 속성을 하위 엘리먼트가 물려 받음
  • 속성 중에는 상속이 되는 것과 되지 않는 것이 있음
  • http://www.w3.org/TR/CSS21/propidx.html  inHerited? 가 yes인 경우만 상속됨
  • 속성의 값으로 inhert를 지정하면 상속되지 않는 속성도 강제로 상속할 수 있음

example1.html - 상속의 일반적인 모습과 상속의 우선순위 (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<h1>생활코딩 커리큘럼</h1>
		<ul style="color:red">
			<!-- color:red가 하위 엘리먼트 모두에게 영향을 줌 -->
			<li>
				HTML
			</li>
			<li>
				CSS
				<ul>
					<li>
						선택자
					</li>
					<li>
						선택자의 조합
					</li>
					<li>
						상속
						<ul style="color:blue">
							<!-- color:blue를 지정해서 부모로부터 상속 받은 color:red를 무효화하고 하위 엘리먼트에 blue를 지정함 -->
							<li>
								상속이란
							</li>
							<li>
								예제
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				javascript
			</li>
			<li>
				linux
			</li>
			<li>
				PHP
			</li>
			<li>
				Mysql
			</li>
		</ul>
	</body>
</html>

example2.html - 상속되지 않는 속성(border) (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<h1>생활코딩 커리큘럼</h1>
		<ul style="border:1px solid red">
			<!-- border는 상속되지 않는 속성이기 때문에 적용한 엘리먼트에만 영향을 줌 -->
			<li>
				HTML
			</li>
			<li>
				CSS
				<ul>
					<li>
						선택자
					</li>
					<li>
						선택자의 조합
					</li>
					<li>
						상속
						<ul>
							<li>
								상속이란
							</li>
							<li>
								예제
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				javascript
			</li>
			<li>
				linux
			</li>
			<li>
				PHP
			</li>
			<li>
				Mysql
			</li>
		</ul>
	</body>
</html>

example3.html - 강제상속 (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<h1>생활코딩 커리큘럼</h1>
		<ul style="border:1px solid red">
			<!-- border는 상속되지 않는 속성이기 때문에 적용한 엘리먼트에만 영향을 줌 -->
			<li style="border:inherit">
				HTML
			</li>
			<!-- inhert를 지정하면 상속되지 않는 속성도 강제로 상속하게 할 수 있다 -->
			<li>
				CSS
				<ul>
					<li>
						선택자
					</li>
					<li>
						선택자의 조합
					</li>
					<li>
						상속
						<ul>
							<li>
								상속이란
							</li>
							<li>
								예제
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				javascript
			</li>
			<li>
				linux
			</li>
			<li>
				PHP
			</li>
			<li>
				Mysql
			</li>
		</ul>
	</body>
</html>

참고

댓글

댓글 본문
  1. wonhee lee
    참고에 '상속공부'링크가 연결이 안되네요.
  2. hyuna
    감사합니다.
  3. yihsang
    감사합니다.
  4. Rhys Jung
    감사합니다. 이번 코스도 고지가 보이네요^^
  5. JustStudy
    고맙습니다
  6. 해앵인
    감사합니다! 참고 링크가 없어졌어요ㅜㅜ
  7. 김상진
    감사합니다. 강의 잘 보고 갑니다.^^
  8. helloworld
    동영상 바로 밑에 상속 설명 중 4번째 줄 inhert에서 i가빠졌어요~~
    inherit
  9. YellowBall
    잘 들었습니다.
  10. 주스
    강제로 상속을 안받도록 하는 방법은 없나요?
  11. 무른
    <!-- inhert를 지정하면 상속되지 않는 속성도 강제로 상속하게 할 수 있다 -->
    inhert ->inherit
    중요치 않지만 완성도를 위한ㅋ
  12. egoing
    수정했습니다. 고맙습니다 :)
    대화보기
    • 내일은
      isHerited -> inHerited :)
    • 굵은감자
      심심해서... 리스트 마다 강제상속 명령어를 써봤는데.. 재밌는 일이 ul 태그에 강제상속 명령을 써주지 않으면 ul 태그의 하위 리스트의 경우 명령어가 듣지 않네요. ㅋㅋㅋㅋ 재밌어요.
    • manorgass
      참고에 나와있는 상속공부 링크에서 주기적으로 첨부 사진과 같은 애러가 나옵니다.(Chrome의 경우만// IE, Firefox는 이상 없습니다.)또, 링크된 파일 5page에 Lingua 님이 inhert으로 잘못 적으셨어요.공식적인 참고 자료인 만큼 수정 가능하면 부탁드려요~ ^_^
    • manorgass
      속성의 값으로 inhert를 지정하면 상속되지 않는 속성도 강제로 상속할 수 있음
      inhert -> inherit입니다.
      본의 아니게 계속 지적을 하네요. 나쁜 뜻은 없습니다. 다른 학습자의 혼동을 막기 위해서 불편하지만 적습니다 :-)
      좋은 강의 감사합니다. ^_^
    • tana
      inherit 강제 상속하는 기능.... 우아~ ㅋ
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기