button 과 button_contain은 상속관계일까?
<style>
/* 각 요소들을 컨테이너로 감싸는 작업도 중요하다 */
/* CSS의 display: flex; 속성은 부모 요소에서 자식 요소로 상속되지 않는다. */
h1 {
text-align:center;
}
.section {
display: flex;
justify-content: center; /* 가로 가운데 정렬 */
}
.menu {
display: flex;
justify-content : space-between; /* 말 그대로 자식 컨텐츠의 정렬 */
width: 50%;
border:2px solid red;
}
.button {
border:2px solid black;
width:150px;
text-align:center;
cursor:pointer;
}
/* button과 button_contain은 상속관계가 아니다. (X)*/
/* 상속되는 CSS 속성이 따로 존재한다. 이는 CSS 명세에 따른다*/
.button_contain {
display:none;
width:150px;
}
/* position:absolute는 적용하는 순간 문서의 흐름에서 제거되므로
기능이 작동하는 순간 적용되어야 한다*/
.button:hover .button_contain {
position:absolute;
display:block;
}
.sub_button {
background:skyblue;
}
.content {
width:100%;
height:200px;
background: orange;
}
</style>
<body>
<h1> logo </h1>
<div class = "section">
<div class = "menu">
<div class = "button"> 1depth
<div class = "button_contain">
<div class = "sub_button"> 2depth </div>
<div class = "sub_button"> 2depth </div>
<div class = "sub_button"> 2depth </div>
</div>
</div>
</div>
</div>
<div class = "content">
</div>
</body>CSS에서 position: absolute;를 적용한 요소는 상대적으로 가장 가까운 position 속성이 static이 아닌(즉, relative, absolute, fixed) 부모 요소를 기준으로 위치가 결정됩니다. 이를 "상대 위치" 또는 "상속 위치"라고 합니다.
따라서 .button과 .button_contain은 서로 상속 관계가 아니며, .button_contain의 위치는 .button 요소를 기준으로 결정됩니다. .button은 .button_contain의 부모 요소로 작용하고 있으며 .button_contain은 .button 내에서 위치를 결정합니다.
상속 관계가 아니기 때문에 .button과 .button_contain 사이에서는 일반적인 CSS 상속이 아닌, .button에서 .button_contain을 선택하기 위한 선택자를 사용하여 스타일을 적용해야 합니다.
둘이 상속관계인 경우의 HTML 구조는 어떻지?
HTML에서 요소간의 "상속"이라는 개념은 CSS 속성이 상위 요소에서 하위 요소로 전달되는 것을 의미하는 것이 아니라(중요), CSS 속성 값이 상위 요소에서 하위 요소로 일부 또는 전부 상속되는 것을 말합니다. 이러한 상속은 일반적으로 폰트 관련 속성(예: font-family, font-size, color)과 관련이 있으며, 요소 간에 특정한 부모-자식 관계를 필요로 하지 않습니다.
따라서 요소 간에 "상속 관계"라고 볼 수 있는 HTML 구조는 특별한 구조를 필요로하지 않습니다. 어떤 요소의 CSS 속성 값이 하위 요소로 전달되는지는 해당 CSS 속성의 특성에 따라 결정됩니다.
예를 들어, 다음과 같은 HTML 구조에서 color 속성은 h1 요소에서 p 요소로 상속됩니다:
<h1>제목</h1>
<p>이 텍스트는 상위 h1 요소의 color 속성을 상속받습니다.</p>이 경우, color 속성은 h1 요소에서 정의되었지만 p 요소에도 상속됩니다. 이러한 상속은 요소 간의 특별한 부모-자식 관계를 필요로 하지 않습니다. CSS 속성의 상속 여부는 해당 속성의 명세에 정의되어 있으며, 일부 속성은 상속되지 않을 수도 있습니다.
상속되는 속성과 상속되지 않는 속성은 CSS 명세에 명확하게 정의되어 있으며, 개발자는 이러한 명세를 참고하여 스타일을 조절할 수 있습니다.
CSS 상속 속성 명세에 대해 알려줘
CSS의 상속 속성은 부모 요소로부터 자식 요소로 값을 전달하는 속성입니다. 이러한 속성은 부모 요소에서 설정된 값을 자식 요소에 쉽게 적용할 수 있도록 도와줍니다. 다음은 일반적으로 상속되는 몇 가지 CSS 속성과 그 예시입니다.
-
color: 텍스트의 색상을 정의합니다.
예시: 부모 요소에서 텍스트 색상을 설정하면 자식 요소의 텍스트에도 동일한 색상이 적용됩니다. -
font-family: 폰트 패밀리를 정의합니다.
예시: 부모 요소에서 폰트 패밀리를 설정하면 자식 요소의 텍스트에도 동일한 폰트 패밀리가 적용됩니다. -
font-size: 글꼴 크기를 정의합니다.
예시: 부모 요소에서 글꼴 크기를 설정하면 자식 요소의 텍스트에도 동일한 글꼴 크기가 적용됩니다. -
line-height: 줄 간격을 정의합니다.
예시: 부모 요소에서 줄 간격을 설정하면 자식 요소의 텍스트에도 동일한 줄 간격이 적용됩니다. -
text-align: 텍스트의 가로 정렬을 정의합니다.
예시: 부모 요소에서 텍스트 가로 정렬을 설정하면 자식 요소의 텍스트에도 동일한 정렬이 적용됩니다. -
font-weight: 글꼴 두께를 정의합니다.
예시: 부모 요소에서 글꼴 두께를 설정하면 자식 요소의 텍스트에도 동일한 두께가 적용됩니다. -
font-style: 글꼴 스타일을 정의합니다.
예시: 부모 요소에서 글꼴 스타일을 설정하면 자식 요소의 텍스트에도 동일한 스타일이 적용됩니다.
상속되는 속성과 상속되지 않는 속성은 CSS 명세에서 정의되어 있으며, 각 속성에 대한 동작 방식은 속성의 특성에 따라 다릅니다. 개발자는 이러한 명세를 참고하여 스타일을 조절하고 상속 속성을 활용할 수 있습니다.
width는 상속 속성이 아니야?
width 속성은 일반적으로 상속되지 않는 속성 중 하나입니다. 부모 요소의 width 속성 값은 자식 요소로 상속되지 않으며, 자식 요소의 width는 독립적으로 설정해야 합니다.
예를 들어, 부모 요소에 width 속성을 설정했다고 해서 자식 요소의 width에 영향을 주지 않습니다. 각 요소의 width 값을 개별적으로 설정해야 합니다.
상속되지 않는 속성 중에서는 width 외에도 height, margin, padding, border 등의 속성이 포함됩니다. 이러한 속성들은 부모 요소의 값이 자식 요소로 상속되지 않고, 자식 요소의 스타일은 독립적으로 지정해야 합니다.
