Sidebar 수정
- 지난번 포스팅에서는 main의 위치와 크기를 수정해 봤습니다.
- 이번 포스팅에서는 main 안에 있는 컨텐츠 sidebar / maintext / mainimage 중에서 sidebar 부분을 수정해 보겠습니다.
- 먼저 이전까지 구현해놓은 웹사이트의 모습을 살펴 보겠습니다.
- sidebar 부분이 main보다 작게 설정 되어 있습니다.
- Menu Nav에 해당하는 텍스트들을 입력합니다.
- 각 크기와 위치를 조정합니다.
단계
1. sidebar 크기 수정
2. nav태그 추가
3. ul/li 태그 추가
4. li 크기 지정
5. nav 정렬
1. sidebar 크기 수정
- sidebar의 크기를 수정합니다.
- 위치는 좌측에 잘 붙어 있습니다.지금당장 따로 수정할 필요는 없어 보입니다.
- 포토샵을 이용해서 sidebar의 크기를 알아보겠습니다.
- 원하는 위치와 크기에 맞게 가이드 라인을 잡은 후 사각형 툴로 sidebar부분을 그려줍니다.
- 텍스트의 크기와 위치, 간격에 맞춰서 크기를 지정했습니다.
- 사각형의 properties를 보면 크기를 알수 있습니다.
- width 는 200px / height 는 850px입니다.
- 코드를 수정합니다.
#sidebar {
float: left;
width: 200px;
height: 850px;
border:1px solid gray;
}
2. nav태그 추가
- Menu 항목을 만들기 위해서 sidebar div 태그 안에 nav태그를 먼저 추가해 줍니다.
- 마찬가지로 width/border값을 주어 위치를 확인해 보겠습니다.
- height 값은 Menu 텍스들을 추가 하면 자동으로 지정되게 되므로 이후에 처리해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<header>header</header>
<div id="main">main
<div id="sidebar">Sidebar nav
<nav>nav</nav>
</div>
<div id='maintext'>Main Text</div>
<div id='mainimg'>Main image</div>
</div>
<footer>footer</footer>
</body>
</html>
nav {
width:200px;
border:5px solid red;
}
- nav부분이 sidebar 범위에서 튀어나와 보입니다.
- border 를 나중에 삭제하면 알맞게 들어가게 됩니다.
- 아직은 위치나 크기를 확인하는 과정이 필요합니다.
3. ul/li 태그 추가
- 이제 nav에 들어갈 Menu 컨텐츠들을 nav태그 안에 추가합니다.
- 이때 ul / li 태그를 사용합니다.
- ul의 id값으로 sidebarul 을 지정합니다.
<div id="sidebar">Sidebar nav
<nav>nav
<ul id='sidebarul'>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>#sidebarul{
border:4px solid blue;
}
- 각 텍스트들이 잘 들어간 모습이지만, li 태그 속성 때문에 기본적으로 텍스트 앞에 ● 이 찍혀서 나옵니다.
- ul 의 style 속성 중 list-style 을 None값으로 지정하면 ● 이 없어집니다.
#sidebarul{
border:4px solid blue;
list-style: none;
}
- ● 은 없어 졌습니다. 하지만 li들의 텍스트들이 sidebar nav / nav 와 다르게 들여쓰기 상태로 되어있습니다.
- ul padding-left 값을 0px로 지정해서 들여 쓰기를 없애줍니다.
#sidebarul{
border:4px solid blue;
list-style: none;
padding-left:0px;
}
- 들여 쓰기가 없어 졌네요.
- 앞으로 ul 태그를 추가 하게 될때마다 같은 작업을 반복해야 할 수도 있습니다.
- 차라리 css에서 ul태그 자체에 list-style 과 padding-left값을 주어 추가되는 ul 태그들의 style들도 통일 시킵니다.
ul {
list-style: none;
padding-left: 0px;
}
#sidebarul {
border: 4px solid blue;
}4. li 크기 지정
- li 태그의 크기를 지정하고 각 텍스트들의 간격을 맞춰 줍니다.
- 각 텍스트들의 폰트 사이즈와 간격이 어떻게 되는지 포토샵 가이드라인과 사각형툴을 통해서 알아 보겠습니다.
- 텍스트 폰트 사이즈는 20px입니다.
- 텍스트 간격에 사각형 툴을 이용해 사각형을 만들고, 높이를 보면 간격이 60px임을 알 수 있습니다.
- li의 전체크기를 이에 맞춰서 정하거나, padding값을 주어 맞추어 줄수도 있습니다.
- 후에 li 태그들에 링크를 걸어 둘것을 생각하면 padding값을 아래 위로 주는 방법이 좋을 것 같습니다.
- css에 li 태그 style을 지정해 줍니다.
li{
font-size:20px;
width: 200px;
height: 20px;
padding-top:30px;
padding-bottom: 30px;
border:4px solid black;
}
- 또한, 텍스트들은 좌측으로부터 일정 간격만큼 떨어져있습니다.
- 위와 같은 방법으로 확인해 보겠습니다.
- 65px만큼 떨어져 있네요.
- #sidebarul 에 padding-left값을 65px로 줍니다.
ul {
list-style: none;
padding-left: 0px;
}
- 그런데 그만큼 li가 벗어나게 됩니다.
-li width 값을 65px만큰 차감합니다.
li{
font-size:20px;
width: 135px;
height: 20px;
padding-top:30px;
padding-bottom: 30px;
border:4px solid black;
}
5. nav 정렬
- 이제 nav를 높이 가운데로 정렬 시킵니다.
- #sidebar에 position 값으로 relative 를 지정 후 nav에 position 값으로 absolute를 지정합니다.
- 이제 #sidebar 상단을 기준으로 nav를 아래로 이동시켜 가운데로 맞춰야합니다.
- main의 높이는 850px입니다. 이 높이의 반반큼 아래로 이동시키고, nav높이의 반만큼 위로 이동시킵니다.
- nav의 높이는 li크기들을 모두 합한 것이므로 80px *5 = 400px 이 됩니다.
- main높이 / 2 - nav 높이 /2 를 하면 225px입니다.
- 하지만 이 값은 main 기준으로 가운데에 정렬됩니다.
- main 위쪽으로 header가 50px만큼 자리 잡고 있으므로 50px만큼 위로더 이동시켜 줘야합니다.
- 225px - 50px = 175px입니다.
- 이제 top값으로 175px을 줍니다.
#sidebar {
position:relative;
float: left;
width: 200px;
height: 850px;
border: 1px solid gray;
}
nav {
width: 200px;
position: absolute;
top:175px;
border: 5px solid red;
}
- 가운데로 잘 정렬 된것을 확인 할 수 있습니다.
- 정확한 위치 확인을 위해 index.html 에 있는 sideba nav / nav 텍스트들을 삭제 하였습니다.
- 잠시 nav와 하위 태그들의 border 값들을 없애고 다시 한번 확인 해 보겠습니다.
- 만족 스럽게 됐습니다.
- 다음 포스팅에서는 구글 폰트를 이용해 텍스트들의 폰트를 지정해 보겠습니다.
'Web > 포트폴리오 프로젝트' 카테고리의 다른 글
| [Web]포트폴리오 웹사이트 제작 - 6 . 레이아웃 구성 (5) - main / Main Text 추가 (0) | 2020.10.13 |
|---|---|
| [Web]포트폴리오 웹사이트 제작 - 5 . 레이아웃 구성 (4) - 구글 폰트 사용하기 / Noto Sans KR (0) | 2020.10.13 |
| [Web]포트폴리오 웹사이트 제작 - 3 . 레이아웃 구성 (2) - 전체 디자인 / main 크기 / 위치 수정 (0) | 2020.10.13 |
| [Web]포트폴리오 웹사이트 제작 - 2 . 레이아웃 구성 (1) - 계획 / 구현 (0) | 2020.10.12 |
| [Web]포트폴리오 웹사이트 제작 - 1 . 레이아웃 구성 (0) - 기본 구조 / 코드 (0) | 2020.10.08 |