이 실습에서는 표준 스타일이 적용되지 않은 HTML 목록을 CSS 를 사용하여 시각적으로 매력적인 가로 탐색 메뉴로 변환하는 방법을 배웁니다. 기본적으로 HTML 목록 (<ul>) 은 글머리 기호와 함께 세로로 표시됩니다. 기본 스타일을 제거하고 깔끔하고 현대적인 탐색 모음을 만들기 위해 몇 가지 기본적인 CSS 속성을 사용합니다.
다음 CSS 속성을 사용하게 됩니다:
list-style-typepaddingdisplaybackground-colormargin이 실습이 끝나면 메뉴, 항목 목록 등을 만드는 데 웹 개발에서 흔히 사용되는 목록 스타일링 방법을 확실히 이해하게 될 것입니다.
이 단계에서는 먼저 순서 없는 목록에서 기본 글머리 기호를 제거합니다. CSS 의 list-style-type 속성은 목록 항목 마커의 모양을 제어하는 데 사용됩니다.
먼저 WebIDE 왼쪽의 파일 탐색기에서 styles.css 파일을 찾아 엽니다. 현재 파일은 비어 있습니다.
이제 styles.css에 다음 CSS 규칙을 추가합니다. 이 규칙은 <ul> 요소를 대상으로 하고 list-style-type을 none으로 설정하여 글머리 기호를 숨깁니다.
ul {
list-style-type: none;
}코드를 추가한 후 styles.css 파일을 저장합니다. 결과를 보려면 LabEx 인터페이스 상단의 "Web 8080" 탭을 클릭합니다. 글머리 기호 없이 항목 목록이 표시되어야 합니다.
이 단계에서는 브라우저가 순서 없는 목록에 자동으로 적용하는 기본 들여쓰기를 제거합니다. 이 들여쓰기는 실제로는 <ul> 요소의 왼쪽에 있는 padding입니다.
이를 제거하기 위해 styles.css 파일의 기존 ul 규칙을 업데이트합니다. 규칙에 padding: 0; 속성을 추가합니다. 이렇게 하면 요소의 네 면 모두에 패딩이 0 으로 설정되어 왼쪽 들여쓰기가 효과적으로 제거됩니다.
styles.css 파일을 다음과 같이 업데이트합니다:
ul {
list-style-type: none;
padding: 0;
}파일을 저장하고 "Web 8080" 탭으로 전환하여 변경 사항을 미리 봅니다. 이제 목록이 컨테이너의 가장 왼쪽으로 정렬된 것을 확인할 수 있습니다.
이 단계에서는 목록 항목의 레이아웃을 세로에서 가로로 변경합니다. 기본적으로 목록 항목 (<li>) 은 블록 레벨 요소이므로, 각 항목은 사용 가능한 전체 너비를 차지하고 새 줄에서 시작합니다.
항목들을 나란히 배치하려면 display 속성을 변경할 수 있습니다. inline-block 값을 사용할 것이며, 이는 요소가 인라인 요소처럼 서로 옆에 배치되도록 하면서 width, height, padding과 같은 블록 레벨 속성을 유지하도록 합니다.
styles.css 파일에 li 요소에 대한 새 CSS 규칙을 추가합니다.
li {
display: inline-block;
}이제 전체 styles.css 파일은 다음과 같이 보여야 합니다.
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
}파일을 저장하고 "Web 8080" 탭을 확인합니다. 이제 목록 항목들이 단일 수평선으로 배열되어야 합니다.
이 단계에서는 목록 항목에 시각적인 스타일을 추가하여 탐색 버튼처럼 보이게 할 것입니다. 배경색과 내부 패딩을 추가할 것입니다.
background-color 속성은 요소의 배경색을 설정하고, padding 속성은 요소의 테두리 안쪽에 공간을 추가합니다.
styles.css에서 기존 li 규칙을 수정하여 이러한 새 속성을 포함시킵니다.
li {
display: inline-block;
background-color: #f2f2f2;
padding: 8px 16px;
}여기서 background-color: #f2f2f2;는 밝은 회색 배경을 설정합니다. padding: 8px 16px;는 각 목록 항목 내 텍스트의 위쪽과 아래쪽에 8 픽셀, 왼쪽과 오른쪽에 16 픽셀의 패딩을 추가합니다.
파일을 저장하고 "Web 8080" 탭을 새로고침합니다. 이제 각 목록 항목에 회색 배경이 있고 텍스트 주위에 더 많은 공간이 있어 별도의 버튼처럼 보이는 것을 볼 수 있습니다.
이 마지막 스타일링 단계에서는 목록 항목들이 서로 닿지 않도록 항목 사이에 공간을 추가할 것입니다. margin 속성은 요소의 테두리 바깥쪽에 공간을 생성하는 데 사용됩니다.
항목들 사이에만 공간을 추가하기 위해 margin-right 속성을 사용하여 각 목록 항목의 오른쪽에 마진을 적용할 수 있습니다.
styles.css 파일에서 li 규칙을 마지막으로 업데이트합니다.
li {
display: inline-block;
background-color: #f2f2f2;
padding: 8px 16px;
margin-right: 5px;
}이것은 각 목록 항목의 오른쪽에 5 픽셀 마진을 추가하여 서로 분리합니다. 마지막 항목에도 마진이 적용되지만, 옆에 다른 요소가 없기 때문에 보이지 않습니다.
파일을 저장하고 "Web 8080" 탭을 확인합니다. 이제 각 버튼 사이에 적절한 간격이 있는 수평 탐색 메뉴가 완성되었습니다.
축하합니다! CSS 목록 스타일링에 대한 이 실습을 성공적으로 완료했습니다.
표준 세로 HTML 목록으로 시작하여 스타일이 적용된 가로 탐색 메뉴로 변환했습니다. 그 과정에서 다음과 같은 몇 가지 필수 CSS 속성을 배우고 적용했습니다.
list-style-type.padding.display: inline-block.background-color 및 padding.margin-right.이러한 기법은 현대 웹사이트에서 탐색 모음 및 기타 목록 기반 구성 요소를 구축하는 데 기본이 됩니다.
