[CSS] HTML 웹 페이지에 style 주기

1. 웹 페이지 개요

레이아웃을 보통 수평으로 나누는 것이 좋음

큼지막하게 나누고 그 안에서 또 자잘하게 수직과 수평으로 세부적으로 나누기.

네비게이션바, 섹션, 어사이드

 

style 태그

하이퍼링크 설정

a {text-decoration:none} <!-- 모든 a태그(하이퍼링크)에 밑줄 그어지는 거 none, 제거함 -->

네비게이션바 리스트

#header_nav {
            width:100%;
            overflow:hidden; <!-- 여기서 줘도된다--> 
            background-color:#2d1152;
}
        
#header_nav ul{
            overflow:hidden; <!-- li 윗단계인 ul에 주는게 정석-->
}

#header_nav li{
            font-size:0.9em;
            color:#ffffff;
            margin-right:20px;
            list-style:none; <!-- 리스트 옆에 동그라미 없앰-->
            float:left; <!-- 리스트 수평으로-->
}

li 태그에 list-styl:none; 을 주면 리스트 옆에 동그라미를 없앨 수 있는데, 이렇게 되면 이 이후의 모든 li에 적용이 되므로 바로 윗단계인 ul태그나 header_nav에 overflow:hidden;을 준다. 보통 ul에 주는 게 정석임.

 

 

font_size : 1.2em; <!-- 폰트 1.2배-->

 

    #content {
            width:1000px;
            margin:0 auto; <!-- 항상 페이지 가운데 정렬-->
            margin-top:85px;
            overflow:hidden;
        }

  #content #main {
            width:600px;
            margin-left:5px;
            float:left;
        }

        #content #main div { <!-- main에 존재하는 모든 div태그에 적용-->
            border:1px solid #cccccc;
        }

        #content #main div:nth-child(1) { <!-- 구조선택자 main div태그 1-->
            width:590px; height:300px;
        }
             #content #main div:nth-child(2) {
            width:590px; height:150px;
            margin-top:5px;
        }