우선 화면의 배치상 이미지는 왼쪽, 타이틀은 오르쪽 상단, 용어 설명은 오른쪽 하단에 위치한다.
그럼 왼쪽에 높이가 100% , 너비가 50% 비율로 위치하면 되고, 오른쪽에는 높이가 50%, 너비가 50% 비율로 두 개의 박스를 수직방향으로 배치시키면 된다는 결론이 나온다.
이제 float 속성을 이용해서 왼쪽에 배치해야되는 이미지(dd 첫번째 요소)의 경우 left 속성값을, 오른쪽에 배치해야되는 타이틀(dt)과 용어설명(dd 두번째 요소)은 right 속성값을 위에서 생각한 너비, 높이 비율값과 함께 선언해주면 될 것 같다. 그래서 아래와 같은 구조로 우선 생각을 해보았다.
<설계단계 레이아웃>
그리고 용어설명 전체 컨텐츠를 담고 있는 부모요소가 자식요소의 높이 정보를 잃어버렸기 때문에 float를 해제시켜줘야 될 것 같다.
이제 코드로 구현해가면서 생각했던 부분과 달라진 부분을 수정해가면서 레이아웃을 잡아가보자. 원래 레이아웃 설계 단계에서 너비 비율을 50%로 생각을 했었는데, 구현을 해보니, 너비를 이미지 부분은 30%로, 타이틀과 설명 부분은 70%로 해줘야 sample 원본과 비슷하게 나오는 것 같다.
<설계단계 레이아웃 수정>
그리고 추가적으로 기타 용어 설명부분을 원본 페이지와 비슷하게 구성하기 위해서 자간 높이를 line-height 속성을 이용해서 조절해주고, 글자의 weight값과 타이틀 색상을 바꿔줘야겠다고 생각했다.
그리고 추가적으로, 두 개 이상의 컨텐츠를 좌우 대칭 형태로 교차해서 화면에 표시하는 방법을 구조 선택자를 사용해서 실습해보았다.
각 컨텐츠가 div태그로 분리가 되어있고, 이 div태그가 홀수 번째인지, 짝수 번째인지 구분해서 내부 자식요소의 float 속성 값을 대칭으로 해주면 될 것 같고 생각을 했다.
