반응형
리스트(li)를 나란히 배치하는 방법
HTML상의 ul(리스트)는 디폴트에서는 왼쪽 정렬의 세로 정렬이 되어 있습니다.
항목1
항목 2
항목3
그런데 이것을 옆으로 나열해서 바꾸고 싶을 때도 있겠죠.여기서는 리스트(li)를 가로줄에서 세로로 변경하는 방법을 소개합니다.
인라인화하다
가장 쉬운 방법은 목록의 li 요소에 display 속성을 주고 나열하는 방법입니다.
리스트는 블록요소이며 요소마다 행이 나뉘는 사양으로 되어 있습니다.하지만 display 속성에 inline 속성을 부여함으로써 인라인 요소로 바뀌고 가로줄에서 세로줄로 바뀝니다.
인라인화
결과
1
2
3
4
5
6
7
8
9
10
< style >
ul li {
display : inline ;
}
< / style >
가장 쉬운 방법이지만 인라인화의 경우 한 가지 문제가 있습니다.바로 인라인화된 요소는 폭과 높이를 설정할 수 없다는 것입니다.
즉, 무슨 말이냐면 인라인화된 목록의 각 요소는 width, height 속성이 적용되지 않고 너비를 25%균일하게 한다, 100px고정을 할 수가 없습니다.
인라인화
결과
1
2
3
4
5
6
7
8
9
10
11
12
< style >
ul li {
display : inline ;
background : # F00 ;
width : 100px ;
}
< / style >
위 샘플에서 보시다시피 width속성으로 100px를 지정하고 있음에도 불구하고 조금 전의 샘플과 아무런 폭이 달라지지 않은 것을 확인할 수 있을 것 같습니다.(알기 쉽게 배경색을 빨간색으로 바꿨습니다)
그런 경우는 인라인 블록화를 함으로써 해결을 합니다.
인라인 블록화하다
인라인화의 과제인 폭과 높이는 문제지만 인라인화가 아닌 인라인 블록화를 통해 그 문제를 해결할 수 있습니다.
인라인 블록화
결과
1
2
3
4
5
6
7
8
9
10
< style >
ul li {
display : inline - block ;
}
< / style >
어떻게 된 것이냐 하면 각 요소의 나열 방법은 인라인과 같으나 각 요소의 내용은 블록 요소인 채로 있는 것입니다.
블록 요소에는 width와 height를 사용해 폭과 높이를 지정할 수 있기 때문에 등간격에서의 배치와 같은 요소 사이즈의 조정을 실시할 수 있게 됩니다.
인라인 블록화
결과
1
2
3
4
5
6
7
8
9
10
11
12
< style >
ul li {
display : inline - block ;
background : # F00 ;
width : 100px ;
}
< / style >
inline화 했을 때의 샘플과는 다르게 이쪽은 확실히 width속성을 적용하고 있는 것을 확인 할 수 있습니다.
각 요소에 미묘한 빈틈이 있는 것은 또 다른 요인이므로 나중에 소개해 드리겠습니다.
float 속성 사용하기(비권장)
또 다른 방법으로 float 속성을 사용하는 방식이 있는데, 그것을 권장할 수는 없습니다.
float 속성을 사용하신 경우 블록 요소인지 아닌지에 관계없이 강제로 가로 배열이 되기 때문에 리스트 아이콘인지 그대로 되는 등 표시가 이상하게 됩니다.
뿐만 아니라 float 속성에서 설정한 속성은 자동으로 초기화 되지 않고 float 속성이 적용된 요소 이후에도 영향을 줍니다.
float 속성
결과
1
2
3
4
5
6
7
8
9
10
11
< style >
ul li {
float : left ;
}
< / style >
샘플텍스트는 p태그에 둘러싸인 블록요소임에도 불구하고 왠지 리스트와 같이 옆으로 나열되어 있는 것을 확인할 수 있습니다.
이와 같이 float 속성을 사용할 경우, 뜻하지 않은 문제가 발생할 수 있기 때문에 그다지 추천하지 않습니다만, 사용하지 않을 수 없는 상황도 있기 때문에 이 경우 주의해서 사용을 하도록 하겠습니다.
리스트(li)를 나란히 Q&A
목록을 나열하는 방법은 display 속성을 사용하는 방법만 알아두면 충분합니다.
지금부터는 옆으로 나열했을 때 떠오르는 문제를 해결하는 방법을 알아보겠습니다.
가로 줄 간격을 조정하고 싶은 경우
나열된 요소의 크기가 아니고 간격을 조정하고 싶다면 margin 속성을 사용합니다.이쪽은 인라인 요소에서도 사용할 수 있는 방법입니다.
간격 지정
결과
1
2
3
4
5
6
7
8
9
10
11
12
< style >
ul li {
display : inline - block ;
background : # F00 ;
margin : 20px
}
< / style >
인라인(블록)화된 가로줄 리스트는 padding 요소가 적용되지 않으므로 주의합시다.
고르게 나란히 배열하고 싶은 경우
균등하게 나열하고 싶다면 인라인 블록화 시켜서 width 속성도 부여하겠습니다.
이때 li요소의 부모요소인 ul요소에도 width속성을 부여하여야 하기 때문에 잊지 않도록 하겠습니다.
고르게 나란히 늘어서서
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< style >
ul {
width : 100 % ;
}
ul li {
display : inline - block ;
background : # F00 ;
width : 30 % ;
}
< / style >
샘플의 경우 %를 사용하여 폭을 지정하고 있습니다만, 픽셀 지정도 가능합니다.
하지만, 리스폰시브 대응을 생각하면 다른 속성과 조합해 퍼센티지 지정하고, 2열 이상의 리스트에도 할 수 있는 설계가 바람직하기 때문에, 스마트폰에도 대응시키는 경우는 그다지 고정폭지정을 하지 않도록 합시다.
횡렬된 것을 중앙에 가지런히 하고 싶은 경우
나란히 배열된 것을 가운데로 정렬하고 싶다면 부모요소의 ul 요소에 text-align:center를 부여합니다.
속성명에 텍스트라고 들어가 있는데 중앙 정렬시 도움이 되는 속성입니다.
중앙 맞춤
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
< style >
ul {
text - align : center ;
}
ul li {
display : inline - block ;
background : # F00 ;
}
< / style >
그 밖에도 text-align: center 대신 margin: auto를 지정하는 방법이 소개되고 있기도 하지만, 적어도 인라인화(인라인 블록화)된 요소에 대해서는 margin: auto가 듣지 않으므로 주의합시다.
요소별 수수께끼 공백을 삭제하고 싶은 경우
여기까지의 샘플을 보면, 리스트의 각 요소 마다 수수께끼의 공백이 생겨 있는 것을 알 수 있으리라 생각합니다.
수수께끼의 공백
결과
1
2
3
4
5
6
7
8
9
10
11
< style >
ul li {
display : inline - block ;
background : # F00 ;
}
< / style >
이는 CSS에서 완전히 대처할 수 없으며 HTML을 수정해야 합니다.구체적으로는 여분의 공백이나 공행을 삭제하는 것으로 수수께끼의 공백을 삭제할 수 있습니다.
공백 삭제
결과
1
2
3
4
5
6
7
8
9
< style >
ul li {
display : inline - block ;
background : # F00 ;
}
< / style >
HTML을 자기 부담으로 짜고 있을 때 일어나기 쉬운 문제이고 아니면 해결방법을 잘 모르는 문제이기 때문에 여러분들이 기억을 하셔야 합니다.
정리
페이지 탑의 네비게이션 메뉴 등 리스트를 나열하고 싶은 기회가 꽤 자주 찾아옵니다.
그럴 때 실제로 나란히 배치하는 방법을 알고 있다면 매우 편리하므로 몰랐던 분들은 꼭 기억하고 돌아가시기 바랍니다.
HTML상의 ul(리스트)는 디폴트에서는 왼쪽 정렬의 세로 정렬이 되어 있습니다.
항목1
항목 2
항목3
그런데 이것을 옆으로 나열해서 바꾸고 싶을 때도 있겠죠.여기서는 리스트(li)를 가로줄에서 세로로 변경하는 방법을 소개합니다.
인라인화하다
가장 쉬운 방법은 목록의 li 요소에 display 속성을 주고 나열하는 방법입니다.
리스트는 블록요소이며 요소마다 행이 나뉘는 사양으로 되어 있습니다.하지만 display 속성에 inline 속성을 부여함으로써 인라인 요소로 바뀌고 가로줄에서 세로줄로 바뀝니다.
인라인화
결과
1
2
3
4
5
6
7
8
9
10
< style >
ul li {
display : inline ;
}
< / style >
- 항목1
- 항목 2
- 항목 3
가장 쉬운 방법이지만 인라인화의 경우 한 가지 문제가 있습니다.바로 인라인화된 요소는 폭과 높이를 설정할 수 없다는 것입니다.
즉, 무슨 말이냐면 인라인화된 목록의 각 요소는 width, height 속성이 적용되지 않고 너비를 25%균일하게 한다, 100px고정을 할 수가 없습니다.
인라인화
결과
1
2
3
4
5
6
7
8
9
10
11
12
< style >
ul li {
display : inline ;
background : # F00 ;
width : 100px ;
}
< / style >
- 항목1
- 항목 2
- 항목 3
위 샘플에서 보시다시피 width속성으로 100px를 지정하고 있음에도 불구하고 조금 전의 샘플과 아무런 폭이 달라지지 않은 것을 확인할 수 있을 것 같습니다.(알기 쉽게 배경색을 빨간색으로 바꿨습니다)
그런 경우는 인라인 블록화를 함으로써 해결을 합니다.
인라인 블록화하다
인라인화의 과제인 폭과 높이는 문제지만 인라인화가 아닌 인라인 블록화를 통해 그 문제를 해결할 수 있습니다.
인라인 블록화
결과
1
2
3
4
5
6
7
8
9
10
< style >
ul li {
display : inline - block ;
}
< / style >
- 항목1
- 항목 2
- 항목 3
어떻게 된 것이냐 하면 각 요소의 나열 방법은 인라인과 같으나 각 요소의 내용은 블록 요소인 채로 있는 것입니다.
블록 요소에는 width와 height를 사용해 폭과 높이를 지정할 수 있기 때문에 등간격에서의 배치와 같은 요소 사이즈의 조정을 실시할 수 있게 됩니다.
인라인 블록화
결과
1
2
3
4
5
6
7
8
9
10
11
12
< style >
ul li {
display : inline - block ;
background : # F00 ;
width : 100px ;
}
< / style >
- 항목1
- 항목 2
- 항목 3
inline화 했을 때의 샘플과는 다르게 이쪽은 확실히 width속성을 적용하고 있는 것을 확인 할 수 있습니다.
각 요소에 미묘한 빈틈이 있는 것은 또 다른 요인이므로 나중에 소개해 드리겠습니다.
float 속성 사용하기(비권장)
또 다른 방법으로 float 속성을 사용하는 방식이 있는데, 그것을 권장할 수는 없습니다.
float 속성을 사용하신 경우 블록 요소인지 아닌지에 관계없이 강제로 가로 배열이 되기 때문에 리스트 아이콘인지 그대로 되는 등 표시가 이상하게 됩니다.
뿐만 아니라 float 속성에서 설정한 속성은 자동으로 초기화 되지 않고 float 속성이 적용된 요소 이후에도 영향을 줍니다.
float 속성
결과
1
2
3
4
5
6
7
8
9
10
11
< style >
ul li {
float : left ;
}
< / style >
- 항목1
- 항목 2
- 항목 3
샘플 텍스트
샘플텍스트는 p태그에 둘러싸인 블록요소임에도 불구하고 왠지 리스트와 같이 옆으로 나열되어 있는 것을 확인할 수 있습니다.
이와 같이 float 속성을 사용할 경우, 뜻하지 않은 문제가 발생할 수 있기 때문에 그다지 추천하지 않습니다만, 사용하지 않을 수 없는 상황도 있기 때문에 이 경우 주의해서 사용을 하도록 하겠습니다.
리스트(li)를 나란히 Q&A
목록을 나열하는 방법은 display 속성을 사용하는 방법만 알아두면 충분합니다.
지금부터는 옆으로 나열했을 때 떠오르는 문제를 해결하는 방법을 알아보겠습니다.
가로 줄 간격을 조정하고 싶은 경우
나열된 요소의 크기가 아니고 간격을 조정하고 싶다면 margin 속성을 사용합니다.이쪽은 인라인 요소에서도 사용할 수 있는 방법입니다.
간격 지정
결과
1
2
3
4
5
6
7
8
9
10
11
12
< style >
ul li {
display : inline - block ;
background : # F00 ;
margin : 20px
}
< / style >
- 항목1
- 항목 2
- 항목 3
인라인(블록)화된 가로줄 리스트는 padding 요소가 적용되지 않으므로 주의합시다.
고르게 나란히 배열하고 싶은 경우
균등하게 나열하고 싶다면 인라인 블록화 시켜서 width 속성도 부여하겠습니다.
이때 li요소의 부모요소인 ul요소에도 width속성을 부여하여야 하기 때문에 잊지 않도록 하겠습니다.
고르게 나란히 늘어서서
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< style >
ul {
width : 100 % ;
}
ul li {
display : inline - block ;
background : # F00 ;
width : 30 % ;
}
< / style >
- 항목1
- 항목 2
- 항목 3
샘플의 경우 %를 사용하여 폭을 지정하고 있습니다만, 픽셀 지정도 가능합니다.
하지만, 리스폰시브 대응을 생각하면 다른 속성과 조합해 퍼센티지 지정하고, 2열 이상의 리스트에도 할 수 있는 설계가 바람직하기 때문에, 스마트폰에도 대응시키는 경우는 그다지 고정폭지정을 하지 않도록 합시다.
횡렬된 것을 중앙에 가지런히 하고 싶은 경우
나란히 배열된 것을 가운데로 정렬하고 싶다면 부모요소의 ul 요소에 text-align:center를 부여합니다.
속성명에 텍스트라고 들어가 있는데 중앙 정렬시 도움이 되는 속성입니다.
중앙 맞춤
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
< style >
ul {
text - align : center ;
}
ul li {
display : inline - block ;
background : # F00 ;
}
< / style >
- 항목1
- 항목 2
- 항목 3
그 밖에도 text-align: center 대신 margin: auto를 지정하는 방법이 소개되고 있기도 하지만, 적어도 인라인화(인라인 블록화)된 요소에 대해서는 margin: auto가 듣지 않으므로 주의합시다.
요소별 수수께끼 공백을 삭제하고 싶은 경우
여기까지의 샘플을 보면, 리스트의 각 요소 마다 수수께끼의 공백이 생겨 있는 것을 알 수 있으리라 생각합니다.
수수께끼의 공백
결과
1
2
3
4
5
6
7
8
9
10
11
< style >
ul li {
display : inline - block ;
background : # F00 ;
}
< / style >
- 항목1
- 항목 2
- 항목 3
이는 CSS에서 완전히 대처할 수 없으며 HTML을 수정해야 합니다.구체적으로는 여분의 공백이나 공행을 삭제하는 것으로 수수께끼의 공백을 삭제할 수 있습니다.
공백 삭제
결과
1
2
3
4
5
6
7
8
9
< style >
ul li {
display : inline - block ;
background : # F00 ;
}
< / style >
- 항목1
- 항목2
- 항목3
HTML을 자기 부담으로 짜고 있을 때 일어나기 쉬운 문제이고 아니면 해결방법을 잘 모르는 문제이기 때문에 여러분들이 기억을 하셔야 합니다.
정리
페이지 탑의 네비게이션 메뉴 등 리스트를 나열하고 싶은 기회가 꽤 자주 찾아옵니다.
그럴 때 실제로 나란히 배치하는 방법을 알고 있다면 매우 편리하므로 몰랐던 분들은 꼭 기억하고 돌아가시기 바랍니다.
반응형