[html&css] 웹사이트 만들기 4

 

*1

사진의 크기가 위치를 여러번 봐가며 자리를 잡아가고 있다.

여기까지는 어떻게 해봤는데 문제는...

 

<div style="display: flex; justify-content: center;">
        <div id="box2" style="position: relative; justify-content: center;">
            <img src="아윤페이지.jpg">
        </div>
        <div style="position: relative;">
            <div style="display: flex; justify-content: center;">
                <div id="box3">
                    <img src="돋보기.jpg" style="height: 30px">
                </div>
                <p>
                    <input type="text" id="search" required>
                </p>
                <div>
                    <img src="로그인.jpg" style="margin-top: 10px; width: auto; height: 35px;">
                </div>
            </div>
            <div id="wrap" style="display:flex; justify-content: center;">
                <div id="box">
                    <ul id="nav" style="display:flex; justify-content: center;">
                    <li>Home</li>
                    <li>Ahyoon</li>
                    <li>Me time</li>
                    <li>Me with You</li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="margin-top: 1%; margin-left: 1%;">
            <img src="음악.jpg">

    </div>

 

 

*2

아 일단 header 제목을 갑자기 바꿨음 ㅎㅎ

이름을 바꾸면서 

위에서 조금 내려왔음 좋겠었고

아래 메뉴바 있는 라인과 거리가 가까웠음 좋겠다는 마음으로

거리를 좀 만져봄.

h1 {
            text-align: center;
            margin-top: 1%;
            margin-bottom: -0.5%;
            color: brown;
            font-size: 48px;
            font-weight: bold;
        }
        
        
        
<header>
        <h1> OVERFLOWS. </h1>
    </header>

 

마진을 마이너스로도 할 수 있다는거에 알게됨

사실상 내가 배치하느라고 만져논거라서

코드가 지저분하고 이렇게 하면 안될 것 같은

생각은 들긴함...ㅎ

 

*3

여기 탐색기 버튼하고

오른쪽 사람 버튼이 처음에는 위에 올라가 있었음.

아무리 margin 을 만져도 되지 않아서

다 해봄

결국 내가 찾은 것은 margin-top 으로 조정하는 것이었음.

   #box2 {
            width: auto;
            height: auto;
            margin-top: 1.5%;
            margin-right: 1%;
            padding: 0px;
        }

        #box3 {
            margin-top: 12px;
        }

        #search {
            width: 550px;
        }
        
        


<div style="position: relative;">
            <div style="display: flex; justify-content: center;">
                <div id="box3">
                    <img src="돋보기.jpg" style="height: 30px">
                </div>
                <p>
                    <input type="text" id="search" required>
                </p>
                <div>
                    <img src="로그인.jpg" style="margin-top: 10px; width: auto; height: 35px;">
                </div>
            </div>

여기서 왜 탐색기 버튼은 div를 사용해서 박스를 만들어 배치하고,

사람 버튼은 그냥 img 안에서 style을 적용했냐면

둘을 다르게 시도해보고 어떻게 다른가 아니면 똑같이 나오나

확인 해보고 싶어서 다르게 해봄.

 

다른 이유는 없고 어차피 이건 내 시작하는 단계에 공부하는 거니까 해보고 싶은거 다해봄.

 

*4

#box2 {
            width: auto;
            height: auto;
            margin-top: 1.5%;
            margin-right: 1%;
            padding: 0px;
        }


<div style="display: flex; justify-content: center;">
        <div id="box2" style="position: relative; justify-content: center;">
            <img src="아윤페이지.jpg">
        </div>
.        
.
.
.
.
.

<div style="margin-top: 1%; margin-left: 1%;">
            <img src="음악.jpg">
        </div>

이 두개도 사실 저 위에 올라가 있어서 내가 위치 조절한다고 해본 것들인데 생각보다 잘 맞아가고 있음

근데 내가 원하는건 크기좀 키우고 싶은데 왜 크기는 안키워지는지 모르겠음...ㅎ

 

또, 약간 위에 헤더랑 밑에 메뉴바랑 그 밑에 사진이랑 다 중간정렬이 제대로 되어 있어 보이지가 않은... 그런 느낌임

이걸 계속 만지면 만질 수록 산으로 가는 기분이야....?

 

어떻게 하는거지.?