우선 어디까지 공부하였는지 궁금합니다. 이 책의 1장에서 강조하는 것이면서 HTML5의 기본 정신은 HTML 태그는 문서의 구조와 콘텐츠를 담는데 사용하고 문서의 모양은 CSS를 사용하는 것입니다. 혹시 1장의 이 부분을 건너 뛰었다면 다시 읽어보시기를 권합니다.
목록을 어떻게 화면에 출력할 것인지는 문서의 모양에 해당하는 것으로 CSS에 대한 충분한 설명(이책의 4,5장)을 공부할 때 선명히 드러납니다. 목록을 한 줄에 출력하는 것에 관한 내용을 처음부터 설명하기에는 구구절절 너무 길기 때문에 4,5장을 꼭 공부하기 바랍니다. 특히 5장의 첫 부분 display 스타일을 공부하면 답을 찾을 수 있습니다. 그리고 225페이지부터 시작되는 리스트 꾸미기를 공부하면 목록으로 메뉴를 만드는 것도 알게 됩니다. 간단히 설명하면, <li> 태그는 블록 태그입니다. 그래서 블록 박스로 출력됩니다(4장의 박스 모델을 공부해야 합니다). <li> 태그를 블록 박스 모양에서 인라인 박스 모양을 바꾸어야 한 줄에 출력됩니다. 이를 위해 다음과 같은 CSS 스타일을 삽입해야 합니다.
이 책의 1장에서 강조하는 것이면서 HTML5의 기본 정신은 HTML 태그는 문서의 구조와 콘텐츠를 담는데 사용하고
문서의 모양은 CSS를 사용하는 것입니다. 혹시 1장의 이 부분을 건너 뛰었다면 다시 읽어보시기를 권합니다.
목록을 어떻게 화면에 출력할 것인지는 문서의 모양에 해당하는 것으로 CSS에 대한 충분한 설명(이책의 4,5장)을 공부할 때 선명히 드러납니다.
목록을 한 줄에 출력하는 것에 관한 내용을 처음부터 설명하기에는 구구절절 너무 길기 때문에 4,5장을 꼭 공부하기 바랍니다.
특히 5장의 첫 부분 display 스타일을 공부하면 답을 찾을 수 있습니다. 그리고 225페이지부터 시작되는 리스트 꾸미기를 공부하면 목록으로 메뉴를 만드는 것도 알게 됩니다.
간단히 설명하면, <li> 태그는 블록 태그입니다. 그래서 블록 박스로 출력됩니다(4장의 박스 모델을 공부해야 합니다).
<li> 태그를 블록 박스 모양에서 인라인 박스 모양을 바꾸어야 한 줄에 출력됩니다.
이를 위해 다음과 같은 CSS 스타일을 삽입해야 합니다.
srcdoc="<!doctype html>
<head><style>li { display:inline}</style></head>
<body>
공부에는 순서가 있으니 차분히 하나씩 이해하면서 알아가면 더욱 탄탄한 지식 체계를 만들 수 있습니다.
이 책에서 장별로 구성된 학습 내용을 천천히 따라가면서 좋은 학습되기 바랍니다.