개발 일지 19 - html 메인 파일 수정

아무것도 모르는 상태에서 이 프로젝트를 실행했다.

 

그러다 보니 html구조가 뒤죽박죽으로 섞여있었다. body를 헤더 부분과 content부분으로 나누지도 않고 하나로 통합한 상태로 사용을 하고 있었고 content부분을 나누지도 않았으니 자연스레 content내부도 각 요소들이 쪼개지지 않은채 중구난방으로 사용이 되고 있었다.

 

다른 커뮤니티 사이트를 f12를 누르면서 html의 구조를 확인한 후 내 코드가 좀 잘 못되었구나 라는 사실을 깨닫고 수정에 들어갔다.

 

일단 body를 header부분과 content_body부분으로 크게 나누었다. 

 

<header id="header.....
.....
..
</header>

<div id ="container" class ="content_body".....
...<div class="main-content" 
....
..</div>
</div>

 

content_body내부에서 main_content로 한 번더 묶어주면서 margin값을 넣어주었다.

main_content내부를 content와 sidebar로 나누었다.

 

 

 <div class ="sidebar"...
 
 ...
 ..
 
 </div>
 
 <div class ="content">...
 ...
 ..
 
 </div>

 

---

 

이제 복잡하게 섞여버린 css코드를 수정을 해줬다. 

 

처음에는 body값의 높이가 이상하게 나와서 gpt에 물어보니 html높이에 body값이 같이 따라간다고 해서 html높이를 설정을 한 후에 해결이 되었다. 

html{
            height:100%;
        }
body {
            font-family: Arial, sans-serif;
            width: 1200px; /* 원하는 고정 너비 설정 */
            height:100%;
            position: relative; /* 요소의 위치를 기준으로 설정 */
            margin: auto; /* 화면 중앙에 위치시키기 위해 */
        }

 

 

   
        .content_body{
            position:relative;
            overflow: auto;
        }
        .main-content {
            margin: 0 auto;
            background-color: #fff;
            {% comment %} width:1050px;
            height:1514px;             
            margin-left:51px;
            margin-right:51px;
            overflow: auto;
        }
        .content {
         
            width : 860px;
            height:100%;
            position:relative;
            unicode-bidi: isolate;
        }
        .sidebar {
            width: 238px;
            height:100%;
            float: right;
            unicode-bidi: isolate;
            display: inline-block;  
            background-color: #f9f9f9;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }

 

---

 

 

처음에 content_body값의 높이가 0으로 나왔었는데 overflow:auto;를 사용하니 해결되었다.

 

"요소의 콘텐츠가 지정된 크기를 초과할 때 스크롤바를 자동으로 생성하는 기능을 제공" 해준다.

 

---

 

sidebar도 마찬가지로 문제가 있었다.

 

display부분이었는데 처음에 inline으로 사용을 하니까 높이 값이 0이 나왔고 block을 사용하니 content위로 sidebar가 올라갔다. 

 

해결방법은 inline-block을 사용하고 float로 오른쪽에 배치를 해주니 내가 원하는 데로 해결되었다. 

 

• block: 새로운 줄에서 시작, 전체 너비 차지, 수직 쌓임.
• inline: 새로운 줄을 만들지 않음, 내용만큼의 너비 차지, 같은 줄에 나란히 배치.
• inline-block: 새로운 줄을 만들지 않음, 너비와 높이를 설정할 수 있으며, 같은 줄에 나란히 배치.

 

위와 같은 차이가 있다.