HTML

[HTML] Menu만들기_float:left_float:right

EmilyP 2021. 3. 15. 14:19

float.html
0.00MB
menu.html
0.00MB

  • list-style:none; 하면 리스트 점이 없어짐.
  • *를 써주는 이유는 모든 element에 적용하는 것. ex) margin, padding, color 넣으면 모두 reset시켜 적용함.
  • ul, li 메뉴를 쓸 때 만듬list-style:none; 하면 리스트 점이 없어짐.
  • Style안에서 display: inline or block으로 해서 바꿔줌
  • float:left => inline보다 빈칸없이 붙음 (아래내용이 오른쪽으로 붙을 준비가 되어 있음) 

  • float:right => 오른쪽으로 붙음 
  • Full monitor는 width1900px (우리 모니터 1200px)
  • ul, li 쓸 때 div안에 써야 함
  • navi>ul>li => navi 아래 ul 아래 li만 적용해라
  • 네이버에서 F12누르면 html태그 확인 가능

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        #logo{float:left;

             }

        #navi{float:right;

                }

        #header{width:1200px;

        height:50px;

        }

        ul,li{

            list-style:none;

        }

        #navi>ul>li{

            float:left;

            width:100px;

            }

    </style>

</head>

<body>

    <div id="header">

        <div id="logo">logo</div>

        <div id="navi">

            <ul>

                <li><a href="http://naver.com">menu1</a></li>

                <li><a href="http://google.com">menu2</a></li>

                <li><a href="http://nate.com">menu3</a></li>

                <li><a href="http://kakaocorp.com">menu4</a></li>

                <li><a href="http://daum.com">menu5</a></li>

            </ul>

         </div>   

    </div>

</body>

</html>

'HTML' 카테고리의 다른 글

[HTML] Q&A  (0) 2021.03.16
[HTML] Home_CSS 연결하기  (0) 2021.03.15
[HTML] 크기 높이 색깔 설정_style_div  (0) 2021.03.15
[HTML] H1-H6_span  (0) 2021.03.15
[HTML] 회원가입 페이지_CSS _ID/PW/주소  (0) 2021.03.12