이번에도 나의 웹페이지를 뿌시면서 CSS의 display와 position에 대해 다루어 보려고 한다.

CSS refer

지난 글에 간단하게 display 와 position에 대해 썼다.

display

display 값으로 block, inline, inline-block이 있다.
block: 해당 라인을 차지
inline: 내용(contents)만큼만 차지
inline-block: 같은 라인에 내용을 블럭만큼만 차지

position

position은 해당 태그가 어떻게 위치하는지 나타내는데 값으로는 하기와 같이 있다.
static : 기본값
fixed : 고정
absolute : 가까운 박스를(부모박스) 기준으로 이동
relative : 원래 있어야 했던 자리에서 정의한 위치로 이동
sticky : 사용자의 스크롤링 기준으로 고정

fixed 와 sticky 차이점
fixed는 스크롤 시, 요소들이 겹칠 수 있으나 sticky는 겹치지 않음

내코드 다시보기

홈페이지 만들 때, 메뉴바를 어떻게 만드는지 우선 찾아보았었다.
메뉴바를 고정시키는 것이 대부분이었고, 나도 자연스럽게 해당 코드를 따라하게 되었다.

---

---

고정을 시키기 위해 나는 sticky or fixed 를 사용하기로 했었다.
그리고 목차를 표현하기 위해 <li> 태그를 사용해야한다고 생각했으며,
nav는 단순히 같은 페이지에서 이동할 지점만 찍어주는 태그인 줄 알았다.

---

HTML file code

     <header>
        <nav class="menubar">
            <ul>
                <li><a class="menu" href="index.html">MAIN</a></li>
                <li><a class="menu" href="#who">WHO I AM</a></li>
                <li><a class="menu" href="#what">WHAT I LIKE</a></li>
                <li><a class="menu" href="#wish">WISH TO BE</a></li>
                <li><a class="menu" href="#contactme">CONTACT</a></li>
            </ul>
        </nav>
    </header>

---

CSS file code

header {
    padding:10px;
}
.menubar ul {
    list-style: none;
    font-size:20px;
    display: flex;
    justify-content: space-around;
}
.menu {
    text-decoration:none;
    color:black;
    position:fixed;
}
.menu:hover {
    color:red;
}

---

공부하고 난 뒤, 나의 메뉴바를 뜯어 고쳤다.

html file 에서 ul 과 li 태그를 지웠다.
왜냐면 nav 태그에서 이미 목차형식으로 나타내주고, 수직이 아닌 수평인 메뉴바를 만들려고 하기 때문이다.

CSS file에서는 메뉴바가 내용과 겹쳐보이지 않도록 배경색상을 주었다.
그리고 고정시키기 위해 position은 기존 그대로fixed를 주었다.

---

HTML file code

     <header>
        <nav>
            <a class="menu" href="index.html">MAIN</a>
            <a class="menu" href="#who">WHO I AM</a>
            <a class="menu" href="#what">WHAT I LIKE</a>
            <a class="menu" href="#wish">WISH TO BE</a>
            <a class="menu" href="#contactme">CONTACT</a>
        </nav>
    </header>

---

CSS file code

header {
    height:10px;
    background-color: lightgrey;
    padding:20px;
    font-size: 17px;
    width:100%;
    display:flex;
    position:fixed;
    justify-content: space-around;
}
.menu {
    text-decoration:none;
    color:black;
    margin:100px;
}
.menu:hover {
    color:red;
}

---

불필요한 태그들(ul,li)를 제거했더니 코드가 한결 보기 편해졌다😭

---

---

---

🙋🏻‍♀️Today,

공부를 하다보니, 같은 결과 값이 나오도록 하는 방법은 많다.
아무것도 모르고 무작정 따라하는 것과 배우고 나서 따라하는 것과 정말 차이가 있다.!
내 웹사이트를 다시보니 참담하다..ㅠㅠ 짧은 페이지에도 이렇게나 바꿀 것이 많다니..
..position 부분은 더 공부해야겠다. 아직도 많이 헷갈린다ㅠㅠ

계속 배우다보니 잊지 않기 위해서 코드들을 써봐야하는데 웹사이트에 적용해보고 점점 더 예쁘게 꾸며보는 것도 생각해봐야겠다.

그리고 수 많은 코드들 중에 가독성이 좋은 코드는 분명히 있다.!👍🏻

아 학원이 시작한지 이제 2일이 지났다.
다들 서로 많이 도와주고 알려주고.. 너모나 예쁜 마음들이 많다.❤️

특히 오늘 사전스터디 팀장이었던 혜리님께 많은 도움을 받아서 너무 감사 드린다.💕

나도 도움이 되도록 많이 배워야겠다.📝