안녕하세요 저자님~
궁금한게 생겨 질문드립니다.
CSS에서 속성을 지정하는데, 분명 제대로 입력했음에도 불구하고 색상 적용이 안되더라구요..
예제코드에서 색깔변화를 주려고 다음과 같이했습니다.
저자님 3장 예제 코드중 default.css 의 첫부분이에요.
#wrap {
width:971px;
text-align:left;
margin:0;
margin-right: auto;
margin-left: auto;
background-image: url(../images/shadow.png);
background-repeat: repeat-y;
min-height:850px;
}
header {
height:151px;
margin:0;
padding:30px 0 0 0;
background-image:url(../images/top_bar.png);
background-repeat:no-repeat;
background-position:center;
}
.clear {
clear:both;
}
nav#top_menu {
color:#FFF; /////////// 여기에 넣어도 글자색이 #FFF으로 바뀌질 않네요..
width:971px; ////////// width값을 971로 했지만 변하질 않네요..
margin:50px 0 0 0;
padding:6px 0 0 0;
float:right;
position:relative;
left:-35%;
}
nav#top_menu ul {
list-style:none;
}
nav#top_menu ul li {
color:#FFF; ///////////// 이부분입니다.
float:left;
margin:0 5px;
font-family: "맑은 고딕",Verdana, Geneva, sans-serif;
font-size: 15px;
font-weight:700;
}
-----------------------------------------------------------------------------
[질문 1]
여기에서 제가 nav#top_menu 의 글자색을 바꾸려고 color:#FFF; 을 넣었거든요.
그런데 적용이 안되더라구요... nav#top_menu 에 넣어도 마찬가지고..
그래서 다음과 같이 아래처럼 입력했더니 되더라구요;
nav#top_menu ul li a {
color: #FFF;
}
위에처럼하거나
nav#top_menu a {
color:#FFF;
}
범위는 똑같이 적용되야 하는 것이 아닌가요?? 왜 첫번째는 되고 두번째는 안되는지...
[질문 2]
그리고 nav부분에 배경색을 채우려고
width 값을 971px 로 변경했거든요?? 그런데 왜 width값이 먹히질않는지 그 이유또한 모르겠네요..
nav는 block 속성으로 width값과 height 값이 변경되는 것이 아닌가요??
[질문 3]
3부에서 나오는 Fun Web 예제 있잖아요~~ 이걸 폰으로 접속하면 전부 제대로 나오는데
배경색이 파랗게 나오더라구요. 그래서 위에 COMPANY 들어갔다가 HOME 으로 오면 정상적으로
배경이 다시 회색으로 바뀌구요... 무슨 이유에서일까요??
[질문1]은 nav#top_menu에 최종적으로 적용된 태그는 a 태그입니다.
또한 a 태그는 태그 우선 순위에서 가장 상단에 위치한 태그입니다.
그렇기 때문에 a 태그에 직접 색상을 지정해 주셔야 색상이 바뀌게 됩니다.
여기서 a href="#" 을 빼고 nav#top_menu 에 색상을 적용해 보세요. 그럼 색상이 적용 될 것입니다.
[질문2] nav#top_menu 는 header 태그 내부에 있습니다. header 태그는 #wrap에 의해서 감싸져 있구요. 또한 header 내부에는 로고가 왼쪽(float:left)에 위치해 있습니다. nav#top_menu 는 float:right; 로 지정되어 있구요. 여기서 nav#top_menu 에 있는 float:right;를 제거해 보시고 width를 적용해 보시기 바랍니다. width 값이 적용될 것입니다.
[질문3]에서는 제가 412 페이지에 자세히 설명했습니다.