[HTML] 코드아카데미 문제풀이 "Build a Website: CSS Layout" (3/4)
Jumbotron
1. 문제
Nice! The menu items inside each ul now are now inline elements. [We'll see how to move the two uls to display on the same line in the next section.]
Next let's change the position of the text inside the large feature. Currently the text is positioned at the very top of the large feature. Let's move the text down so that its more in the middle of the large feature. This can be done with the position property.
In index.html, the <div class="jumbotron">..</div> groups elements that are part of the large feature section of the web page. Inside <div class="jumbotron">..</div> is the <div class="container">..</div> which has the text we want to style.
Therefore, we can select the <div class="container">..</div> inside <div class="jumbotron">..</div> in CSS like this:
2. 풀이
클래스 안의 클래스를 선택하는 방법을 알 수 있다.
jumbotron 안의 container 클래스 요소를 선택한다고 할 때
.jumbotron .cotainer {속성}
이런 식으로 적용한다.
그림 속의 텍스트 요소가 탑 경계와 너무 닿아 있으므로 top:100px; 속성을 삽입하여 여유 공간을 만든다.
3. 해답
main.css에 다음과 같이 추가하면 통과합니다.
.jumbotron .container {position:relative; top: 100px;}