[HTML] 코드아카데미 문제풀이 "Build a Website: CSS Styling" (2/10)

 

 

[HTML] 코드아카데미 문제풀이 "Build a Website: CSS Styling" (2/10)

 

Navigation

 

1. 문제  원문링크

 

Let's start by styling the navigation bar.

In index.html, the <div class="nav">..</div>groups elements that are part of the navigation bar section of the web page. Inside<div class="nav">..</div> are the a elements we want to style.

Therefore, we can select all a elements inside<div class="nav">..</div> in CSS like this:

.nav a {
  color: #5a5a5a;
  font-size: 24px;
}
 

1. 01. The CSS selector .nav a selects any aelement nested inside an HMTL element with a class named "nav."
2. 02. The color property sets the color of aelement text to #5a5a5a.
3. 03. The font-size property changes the size ofa element text to 24px.

Instructions

In main.css:

1. Make a new CSS rule that selects all aelements nested inside <div class="nav">..</div>. Check out the example above.
2. Set the color to #5a5a5a. [some nav text to call back - Remember what color does]
3. Set the font-size to 11px
4. Set the font-weight to bold
5. Set the padding-top to 14px, and thepadding-bottom to 14px
6. Set the padding-left to 10px, and thepadding-right to 10px
7. Make the text uppercase using text-transform: uppercase;

Your CSS rule should look somethin

?

Stuck? Get a hint!

 

 

2. 풀이

nav 클래스의 a 요소(링크)에 대한 일괄적인 스타일링을 위해 main.css탭에 .nav a {  스타일링 }을 해준다. 참고로 아래에서 사용된

text-transform: uppercase; 

은 해당 요소인 a의 문자를 모두 대문자로 변환 시킨다는 의미이다.

 

3. 해답

main.css 탭에 다음과 같이 입력하면 통과합니다.

.nav a{
   
    color:#5a5a5a;
    font-size:11px;
    font-weight:bold;
    padding-top:14px;
    padding-bottom:14px;
    padding-right:10px;
    padding-left:100px;
    text-transform: uppercase;
   
   
    }

 

 

 

 

 

 

 

전체 목록 바로가기