HTMLㆍCSS 기초 강좌/CSS

#4 Lists 스타일링, Backgrounds

jaiyah 2019. 1. 21. 08:48

리스트(목록)를 스타일하는 방법과 CSS background 속성에 대해 자세히 살펴보겠습니다.





Lists 스타일링

HTML 목록과 관련된 속성

HTML 목록에는 <ul>, <ol>, <li>, <dl>, <dt>, <dd> 이 있는데 이와 관련된 스타일에 대해 알아보겠습니다.

목록과 관련된 속성은 다음과 같습니다.

  • list-style-type : upper-alpha | korean-hangul-formal ...
  • list-stye-position : outside | inside
  • list-style-image : url("star.svg")
  • list-style : square url("star.svg") inside [속기(shorthand) 유형 작성법]

HTML 속성을 사용한 순차 목록(리버스,항목) 설정

HTML
<ol start="9">
    <li>list-style-type : upper-alpha | korean-hangul-formal ...</li>
    <li>list-stye-position : outside | inside</li>
    <li>list-style-image : url("star.svg")</li>
    <li>list-style : square url("star.svg") inside [속기(shorthand) 유형 작성법]</li>
</ol>

<ol start="9" reversed>

<ol>
    <li value="2">list-style-type </li>
    <li value="4">list-stye-position</li>
    <li value="6">list-style-image</li>
    <li value="8">list-style</li>
</ol>

Related Info

  1. 리스트 스타일링
  2. 리스트 스타일 유형



여기서 잠깐!!(line-height 상속에 대해)

line-height(줄간격)은 단위에 따라 상속되는 것이 다릅니다. 단위에 따라 어떻게 상속되는지 알아보겠습니다.


em 단위를 사용한 경우

HTML
<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>consectetur adipisicing <span>elit. Odit, porro!</span></li>
</ul>
    
<style>
    ul {
        font-size: 18px;
        line-height: 2em;
        /* em을 px 로 환산하면 기준픽셀인 18px * 2em = 36px; */
    }
    li {
        font-size: 15px;
        /* line-height: 16px; */
    }
</style>

위 스타일에서 중요한 점은 부모 요소인 ul 의 폰트사이즈 18px 이 자손 요소로 상속된다는 점입니다.
그래서, li 요소에 36px 이라는 line-height(줄 간격)을 상속받게 됩니다.

즉, 자식 요소에 폰트사이즈인 자신의 글씨 크기를 기준으로 줄 간격을 계산하지 않고 부모 요소의 18px을 상속받은 값을 그대로 사용하게 됩니다. 하지만 주석 부분을 풀고 line-height: 16px; 다른 값을 재선언하게 되면 재선언된 값을 사용하게 됩니다.


단위없는 정수를 사용한 경우

HTML
ul {
    font-size: 18px;
    line-height: 2;
}
li {
    /*font-size: 15px;*/
    /*line-height: 16px;*/
}

위 코드와 같이 단위없는 정수로만 줄 간격을 선언하게 되면 em 단위와는 다르게 자식 요소에 부모값이 상속되게 됩니다.

그럼 자손 요소에 폰트사이즈가 재정의 되어 있다면 부모의 줄간격 값을 곱해서 계산하게 됩니다.

다시말해, li 요소에 폰트사이즈가 정의되어 있지 않다면18 * 2 = 36px 의 줄 간격이 표현되나,
li 요소에 폰트 사이즈가 재정의 되어 있다면 해당 요소 값인 15 * 2 = 30px 의 줄 간격이 표현되게 됩니다.


line-height 의 단위가 % 일 경우는 em 단위와 동일하게 표현됩니다.




Backgrounds(배경)

CSS 배경 속성인 background 를 사용하면 요소의 배경에 색상, 이미지, 위치, 반복, 고정 여부 등을 설정할 수 있습니다.

그리고 모던 브라우저에서는 배경 이미지의 시작점(origin)을 조정하거나, 클리핑(clipping) 영역을 설정할 수 있으며,

요소의 배경이 지정되는 공간은 요소의 content-box, padding-box, border-box 까지 포함이 되고,
margin-box 는 투명영역으로 배경 지정에서 제외됩니다.
모던 브라우저에서는 배경을 차지하는 영역을 background-clip 속성을 사용하여 변경할 수 있습니다.


배경과 관련된 속성은 다음과 같습니다.

속 성

설 명

background-color

배경색을 설정합니다. (기본값: transparent)

background-image

요소의 배경에 표시할 배경 이미지를 설정합니다. (기본값: none)

background-position

배경이 요소 배경 안에 표시되어야 하는 위치를 설정합니다. (기본값: left top)

background-repeat

배경을 반복할지 여부를 설정합니다. (기본값: repeat)

background-attachment

내용이 스크롤 될 때 요소의 배경 동작을 설정합니다. (기본값: scroll)

background

모든 background 속성의 축약 속성으로
위에 기술한 5가지 배경 속성을 모아 작성하는 속기법입니다.

background-size

배경 이미지의 크기를 동적으로 조정할 수 있습니다. (기본값: auto)

background-clip

배경 이미지를 클리핑(오려내기) 하는 영역을 설정할 수 있습니다. (기본값: border-box)

background-origin

배경 이미지의 시작 위치를 특정 영역으로 설정할 수 있습니다. (기본값: padding-box)

background-size, background-clip, background-origin 속성은 CSS3 에 새로 추가된 속성입니다.

css
div { background-color:#00ff00; }

div { background-image:url(bg.gif); }

div { background-position:left top; }

div { background-repeat:repeat-y; }
    
div { background: #ff0000 url(bg.gif) top left no-repeat; }

background-color

html, body 요소에서부터 em, a 같은 인라인 요소까지 문서 안에 있는 거의 모든 요소에 배경색을 지정할 수 있습니다.

배경색은 상속되지 않으며 기본값은 투명(transparent)입니다.

기본값이 투명인 이유는 요소의 색상이 지정되어 있지 않다면 요소의 배경색이 투명해야 부모 요소들이 그 아래로 보이게 되기(가짜 상속) 때문에 투명이 기본값이 됩니다.


background-image

background-image 속성은 배경 이미지를 설정합니다

이미지 경로를 url('') 에 작성하면 해당 경로에 있는 이미지가 표시됩니다.

이때 요소 박스(배경 지역)가 이미지보다 더 클시 이미지는 반복되어 표시됩니다.


background-position

background-position 속성은 배경 이미지의 시작 위치를 지정합니다.

일반적으로 백그라운드 이미지는 좌측(왼쪽) 위부터 이미지를 표시합니다.

이때 이 속성을 사용하면 이미지의 좌표를 원하는 위치에 놓을 수 있으며, 좌표값은 공백(띄어쓰기)을 기준으로
x, y 좌표를 지정하여 사용할 수 있습니다.


background-position 속성값은 다음과 같습니다.

  • background-position: X% Y%; : x는 수평(left, right)값이며 y는 수직(top, bottom)값
    top left 는 0% 0%(기본값), right bottom 은 100% 100%, center 는 50%
  • background-position: Xpos Ypos : x는 수평(left, right)값이며 y는 수직(top, bottom)값
    top left 는 0 0(0일 때 px 생략 가능), right bottom 은 해당 영역의 가장 큰 픽셀값이고
    % 와 px 값은 함께 사용 가능합니다.

background-repeat

background-repeat 속성은 배경에 이미지를 넣었다면 이미지를 한 번만 넣을지 반복해서 넣을지 여부를 지정할 수 있습니다.

일반적으로 컨테이너 박스보다 작은 이미지를 적용할 시 이미지가 반복되어 출력됩니다

이때 이 속성을 사용하면 이미지의 반복 여부 및 반복할 방향을 정의할 수 있습니다.


background-repeat 속성값은 다음과 같습니다.

  • repeat : 기본값(default), 배경이미지를 수직 수평 모두 반복
  • repeat-x : 배경이미지를 수평(좌우)으로 반복
  • repeat-y : 배경이미지를 수직(상하)으로 반복
  • no-repeat : 배경이미지를 반복하지 않고 한 번만 나타냄

background 단축 속성(속기형)

background 는 속성값 간에 순서에 상관없이 지정할 수 있지만 background: red url(bg.gif) 50px 10px no-repeat; 순으로 많이 사용합니다.

그리고 한 가지 주의할 점은 background-position 값을 선언할 경우에 가로,세로 값 순서로 선언해야 합니다.


단축속성을 사용하는 경우에 가장 많이 하는 실수가 있습니다.

h1, h2 { background: green url(bg.gif) 10px no-repeat;}

h2 { background: red;}

위 코드에서 h2 를 단축속성인 background 를 선언하여 사용하면 background-image 는 전에 선언된 값을 지우고
기본값인 none 으로 재선언된다는 점을 주의해야 합니다


background-size

background-size 는 배경 이미지 크기를 조절하는 속성입니다. 

background-size: auto | length | cover | contain | initial | inherit

background-size 속성값은 다음과 같습니다.

  • auto : 기본값으로 배경 이미지 원래의 width, height 를 그대로 표시합니다.
  • length : px, cm 등의 단위로 배경 이미지의 width 와 height 설정할 수 있으며,
               % 를 사용할 경우는 너비와 높이를 부모 요소에 비례한 % 값으로 지정하고,
               첫번째 값은 width, 두번째 값은 height / 한가지 값만 지정하면 나머지는 자동인 auto 설정됩니다.
  • contain : contain 값을 지정하면, 배경 이미지의 가로, 세로 모두 엘리먼트보다 작다는 조건하에 가능한한 크게 조정됩니다.
                     이미지의 가로, 세로 비율을 유지하기 때문에 배경 이미지의 크기는 엘리먼트의 크기보다 항상 작거나 같습니다.
                     너비와 높이가 내용 안쪽에 알맞은 방식으로 이미지를 가장 크게 조절합니다.
  • cover : 값을 cover 로 지정하면 배경이미지의 가로, 세로 길이 모두 엘리먼트보다 크다는 조건하에 가능한한 배경 이미지를 작게 조정합니다.
                  가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 엘리먼트의 크기보다 항상 크거나 같습니다.
                  즉, 배경 지역이 배경이미지로 완전히 덮이도록 이미지를 가능한한 크게 해서 표시합니다.
                  때문에 이미지의 일부분이 보이지 않을 수도 있음에 주의해야 합니다.

백분율로 크기를 정할 때의 기준은 이미지 크기가 아니라 배경을 사용하는 요소의 크기입니다.


background-clip 속성

background-clip은 배경(이미지나 배경색)을 어느 부분(박스)영역까지 표현할 지를 지정하는 속성입니다. 

background-clip: border-box | padding-box | content-box | initial | inherit;

background-clip 속성값은 다음과 같습니다.

  • border-box : 테두리 영역과 그 안쪽 영역을 채웁니다.
  • padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.
  • content-box : 내용 영역과 그 안쪽 영역을 채웁니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

background-origin

background-origin 은 배경 이미지가 어느 위치에서 기원점을 기준으로 잡느냐를 정의하는 속성입니다.

다시 말해, 배경 이미지의 시작에 대한 기준점을 설정하는 것이 background-origin 입니다.

background-origin: border-box | padding-box | content-box | initial | inherit;

이 속성 역시 border, padding, content 세 영역 중에서 시작 위치를 지정합니다.

  • padding-box : 기본값이며, 배경 이미지는 padding box 에 관계하여 시작 위치를 지정합니다.
  • border-box : 배경 이미지가 border box 에 관계하여 시작 위치를 지정합니다.
  • content-box : 배경 이미지가 content box 에 관계하여 시작 위치를 지정합니다.

background-attachment 속성값이 fixed 이면, background-origin 속성이 무시됨에 주의.



스프라이트 이미지(Sprite Images) 기법

일반적으로 여러 가지의 작은 이미지들을 하나의 이미지로 합쳐서 해당 요소마다 background-position 속성을 이용하여 여러 가지 이미지 중에 사용하려는 한 가지 이미지만을 보이도록(표시)하는 기법을 이미지 스프라이트 기법이라고 합니다.

이러한 이미지의 사용은 웹사이트의 로딩 시간을 단축시킬 뿐더러 가상 선택자인 :hover, :active 등을 사용하여 이미지를 변경할 시에 이미지 로딩으로 인한 끊김 현상이 나타나지 않도록 할 수 있습니다.

이때 주의해야 할 점은 X 좌표가 100px 인 부분의 이미지를 사용하려고 할 경우 음수를 붙여서 -100px 처럼 사용해야 한다는 것입니다. 이는 이미지의 좌표를 왼쪽으로 당겨야 오른쪽에 이미지가 보이기 때문입니다.
다시 말해, 0좌표로 끌어오는 것입니다.

스프라이트 이미지는 확장성 CSS 이미지 버튼, 탭 디자인, 메뉴 오버 등에서 여러 테크닉으로 사용할 수 있는 유용한 테크닉입니다.



Jaehee's WebClub


저작자표시 변경금지