Top Bar 구성 - 조금더 상세한 박스모델.
이제 조금 더 상세한 설정을 위하여. 각 구성 요소를 설정해 보도록 할 것이다. 이전의 포스트에서 top 이라고 이름 지어진 부분에 조금 더 집중 해보도록 한다.
Recap
- div 계층적 요소를 살피고, 부모 요소에 flex를 적용한다.
- 자식 요소의 정렬을 위하여 justify-content 속성을 사용한다.
- div 의 사이즈를 스타일에서 지정한다.
구상
우선 머릿속으로 또는 이전의 이미지가 떠오르지 않는다면, 이전 포스트의 이미지를 다시 한번 살펴 보도록 한다.
- 현재 top은 하나의 div로 구성되어 있다.
- 해야 할 것은 좌측 끝에 home 메뉴, 우측 끝에 sns 아이콘들이 있다.
- 가운데의 공백까지 포함하여 3개의 div를 구성하여 style 작업을 해야 할 것으로 생각한다.
html 요소 작업
우선 기존에 작업을 진행 하고 있던 (박스 형태의 div를 이용하여 레이아웃 작업을 진행중이던) 파일에 top 부분의 요소를 수정한다.
<div id="top">
<div>top left</div>
<div>top center</div>
<div>top right</div>
</div>부모 div의 flex 설정 및 top 아이디 밑의 div 에만 스타일을 적용하기 위한 selector 작성
#top {
display: flex;
}
#top div {
border: 1px solid black;
}두번째 선택자를 살펴보면, top 아이디를 가진 요소들 중 div html 요소에 검은색으로 외곽선을 추가하였다. 이러한 선택이 가능하므로 cascading (계단식) 스타일이라는 용어를 사용하게 된다. 또한 css이러한 용례로 인하여 html 요소들도 부모 자식 관계를 맞추어 작성해 주시는 것이 보다 용이 하게 스타일을 적용 시킬 수 있게 된다.
박스 모델의 사이즈, 안쪽 여백, 바깥 여백 - width, height, padding, margin
- 사이즈 : 박스 모델로 표현되는 요소들은 사이즈를 정의 할 수 있다. 이 글의 예제에서는 좌측의 영역을 250px로, 우측의 영역을 150px로 설정하고 나머지의 전체 영역을 중간 영역이 채울 수 있도록 설정할 것이다. 사이즈를 지정할 때에는 px이나 %등 여러 단위를 사용할 수 있다.
- 안쪽여백 : 안쪽 여백은 외각선을 기준으로 안쪽으로의 여백으로 padding 으로 표현 한다. 이 글에서 상단의 글자와 외각선이 너무 붙어 있으므로 상하좌우 모두에 5px 여백을 부여할 것 이다.
- 바깥여백; 바깥 여백은 외각선을 기준으로 외부의 여백을 의미하고 margin 으로 표현한다. 이 글의 예제에서는 굳이 필요하지 않아 보이지만, padding과 margin의 차이점을 알기 위하여 외부에 2px의 여백을 부여한다.
#top {
display: flex;
}
#top div {
border: 1px solid black;
padding: 5px;
margin: 2px;
}
div #mid {
width: 100%;
}
div #left {
width: 250px;
}
div #right {
width: 150px;
}각 사이즈를 지정하기 위하여 html을 수정하여 id를 부여한다.
<div id="top">
<div id="left">home about contact</div>
<div id="mid"></div>
<div id="right">F I K</div>
</div>결과를 확인하면, 우리의 의도와 같이 보여지는 것을 확인 할 수 있다.
텍스트 속성의 정렬 - align
우측의 F(acebook), I(nstagram), K(akao) 이미지는 생략하도록 하고, 우측 정렬로 변경하도록 한다.
div #right {
width: 150px;
text-align: right;
}text-align 속성을 사용하여, 우측 정렬을 하였다. 우측으로 정렬을 할 내용이 text의 형태이므로 flex 내부에서 사용하듯, justify 속성이 아닌 text-algin 속성을 사용한 것을 염두에 두도록 한다. 사용하면서 익숙해 질 부분 이다.
댓글
댓글 쓰기