모두의 HTML5 & CSS3: 2 HTML의 두 가지 혈액형: Block 요소와 Inline 요소

<li> 태그는 줄 바꿈 현상이 일어나기 때문에 지금처럼 y축 방향으로 콘텐츠가 정렬됩니다. x축 방향으로 정렬된 메뉴 버튼을 만들고 싶다면 <li> 태그의 성격을 Inline 요소로 바꿔야 합니다. 이때 사용하는 속성이 CSS 언어의 display입니다.

다음과 같이 display 속성 안에 inline 속성값을 입력하면 <li> 태그가 x축 방향으로 정렬됩니다.

예제 소스 Exercise/3장/6_inline_block/index02.html

<!DOCTYPE html>
<html>                
<head>
    …    
    <title>웹 프로그래밍 기초</title>
     <!-- display 속성으로 HTML 태그의 성격을 변경할 수 있습니다. -->
    <style>
        li{ display: inline; }
    </style>
</head>
<body>
…
</body>
</html>

그림 3-18 실행 결과

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.