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 요소들도 부모 ...
