[WebPage] 2. CSS 요소(Elements) - 웹 페이지 제작 강좌

3. CSS Elements

 3-1. CSS3 보더(Borders)

  - 보더란 쉽게 말해서 테두리에 지정되는 속성을 말합니다.

  1. 모서리가 둥근 보더

   - 기존 CSS2에서는 모서리가 둥근 보더를 사용하기가 매우 난감했습니다. 보더를 쪼갠 뒤, 각 모서리마다 서로 다른 이미지를 배치해서 모서리가 둥근 보더를 표현해야만 했습니다. 

   - But, CSS3에서는 모서리가 둥근 보더가 기본 스타일에 포함되어 있으므로 해당 프로퍼티를 이용하여 생성해 주면 됩니다.

  실습을 위해 기존의 작성한 FirstPage.html에 아래 코드를 입력합니다.

        <div>
            This box has rounded corners.
        </div>
 

  다음으로 보더를 지정하기 위한 CSS를 작성하겠습니다. 

div {
    border: 2px solid;
    border-radius: 25px;
}

  실행결과는 아래와 같습니다.

  2. 그림자가 있는 박스

   - 'box-shadow' 프로퍼티를 이용하여 박스에 그림자 효과를 부여할 수 있습니다.

   - 기본 문법은 아래와 같습니다.

  box-shadow: <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?

   - ?가 붙어있는 항은 생략이 가능합니다.

   

  기존 FirstPage.html은 건들지 않고 FirstStyle.css에서 수정하여 효과를 확인하겠습니다.

div {
    box-shadow: 10px 10px 5px #888888;
}
 

  3. 이미지를 이용한 테두리 패턴 보더

   - CSS3에서는 사용자가 제작한 이미지를 이용하여 테두리 패턴을 자동으로 생성해주는 보더 프로퍼티가 생겼습니다.

   - 이를 이용하면 기존의 단조로운 패턴에서 쉽게 벗어 날 수 있습니다.

   - 'border-image'는 3개의 필드를 가집니다. 기본 문법은 아래와 같습니다.

  border-image: url(주소) offset option;

   - 이미지 주소는 보더로 사용할 이미지의 주소를 말합니다.(ex. border.jpg)

   - offset은 마진이나 패딩처럼 시계방향으로 이동하는 이미지 offset입니다.

   - 마지막으로 option에는 stretch, repeat, round가 있습니다.

    ◆ stretch: 기본 값으로 이미지가 박스의 너비나 높이에 맞게 이미지 스케일을 조정

    ◆ repeat: 가로 세로 길이를 무시하고 반복

    ◆ round: 반복하지만 가로 세로 길이에 맞추어 반복

  기존 FirstPage.html은 건들지 않고 FirstStyle.css에서 수정하여 효과를 확인하겠습니다.

div {
    border-width: 30px;
    border-image: url(star.png) 30 round;
}

  아래와 같이 설정하고 이미지를 해당 프로젝트 내에 넣어줘야 합니다. 기존의 Aptana Studio workspace를 참조하여 넣어주세요.

  (* 따로 설정하지 않으신 분들은 문서 -> Aptana Studio 3 Workspace -> FirstProject 에 이미지를 넣어주세요)

  4. 브라우저 호환성

  

Property	IE	Firefox	Chrome	Safari	Opera
border_radius
box-shadow
border-image	X	-moz-	-webkit-	-webkit-	-o-

 3-2. 폰트(Fonts)

  - 웹을 디자인함에 있어서 실제적으로 많은 부분을 차지하는 것이 폰트입니다. 

  - 폰트에 따라서 전체적인 분위기 배치 등이 변하기 때문입니다. 

  - CSS3를 사용하면, 웹 제작 컴퓨터 환경과 관계없이, 개발자 또는 디자이너의 선택에 따라서 쓰고자하는 폰트를 손 쉽게 쓸 수 있습니다.

  - 사용하고자 하는 폰트를 온라인으로 구매하거나, 발견 했을 경우, 단순히 해당 폰트 파일을 웹 서버에 포함시켜서 편하게 사용 할 수 있습니다. 

  - 웹 페이지를 이용하는 End-User가 해당 폰트를 보유하고 있지 않다면, 자동으로 웹 서버에서 해당 폰트를 받아서 사용가능하게 합니다.

  1. 원하는 폰트 사용하기

   - '@font-face'를 이용하여 사용하고자 하는 폰트를 적용해보겠습니다. 먼저, 원하는 폰트를 사용하기 위해서 다음과 같이 해당 폰트의 이름을 지어줘야 합니다.

  FirstPage.html 에서는 간단하게 두 폰트를 비교하기 위해 아래와 같이 작성합니다.

 
        <div>
            This box has rounded corners. 나눔 고딕 체 입니다!!
        </div>
        <p>
            This box has rounded corners. 기본 폰트로 출력되는 p 태그입니다!
        </p>

  FirstStyle.css 에서 소스코드를 입력하여 폰트를 연결해서 적용해 봅시다. 

(* 미리 준비된 폰트가 있어야 합니다. 네이버 나눔고딕을 이용했습니다. 보더 이미지 적용과 유사하게 같은 경로에 폰트를 이동)

@font-face {
    font-family: myFirstFont; /* 자신만의 폰트 이름 */
    src: url('NHN.ttf');
}

div {
    font-family: myFirstFont;
}
 

  2. 브라우저 지원

Property	IE	Firefox	Chrome	Safari	Opera
font-face

 - IE를 제외한 모든 브라우저는 트루타입 폰트(.ttf)와 오픈 타입 폰트(.otf)를 모두 지원합니다.

 - But, IE9에서는 @font-face를 지원하지만 임베디드 오픈 타입(.eot)만을 지원합니다. 

 - IE8 이하 버전에서는 모두 지원하지 않습니다.

 3-3. 트랜지션(Transitions)

   - 마우스를 클릭하거나 포커싱, 활성화 상태에 변화를 주는 것으로 변화가 부드러운 애니메이션입니다.

   - 아래 간단한 속성을 살펴보겠습니다.

    transition-property: 트랜지션 할 속성

    transition-duration: 트랜지션 지속 시간

    transition-timing-function: 지정한 시간동안의 트랜지션 속도 (타이밍 함수 값)

    타이밍 함수 값은 기본 값인 ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier 등이 있습니다.

  실습을 위해 FirstPage.html에 아래와 같은 소스 코드를 입력합니다.

        <a href="#" class="foo">CSS3 - Transition</a>
 

  다음으로 CSS 설정을 합니다.

a { text-decoration: none; }
a.foo {
    padding: 1em 2em;
    background: #00ff00;
}

a.foo:hover {
    background: #ffd700;
}
 

  간단하게 기본적으로 a 태그의 밑줄을 없애고 배경과 여백만 주었습니다.

  트랜지션을 위해 다시 CSS를 설정합니다. (* 크롬 환경이라 가정하고 진행했기에 -webkit-이라는 수식이 붙습니다)

a.foo {
    padding: 1em 2em;
    background: #00ff00;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
}

a.foo:hover {
    background: #ffd700;
}

 

  트랜지션 적용 결과 바로 전환되던 배경색이 0.5 초의 간격으로 서서히 변하는 게 보이 실 겁니다.

  1. 효과 지연하기

   - delay 속성 값을 추가해서 좀 더 시간을 지연시켜봅시다.

a.foo {
    padding: 1em 2em;
    background: #00ff00;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 0.5s;
}

a.foo:hover {
    background: #ffd700;
}
 

    직접 실행하셔서 지연된 효과가 어떤 반응을 보이는 지 확인하시길 바랍니다.

  2. 트랜지션 축약형 표현

   - 축약형 표기법은 property, duration, timing 을 한 번에 표기하는 것 입니다.

a.foo {
    padding: 1em 2em;
    background: #00ff00;
    -webkit-transition: background 0.5s ease;
}

a.foo:hover {
    background: #ffd700;
}
 

  3. 트랜지션 다중 속성

   - 다중속성은 여러 가지의 트랜지션 효과를 주기위해 쉼표(,)로 구분해서 지정하며, 트랜지션마다 지속 시간과 타이밍 함수를 다르게 적용 할 수 있습니다.

   - 아래 코드를 추가하여 반응을 살펴봅시다.

a.foo {
    padding: 1em 2em;
    background: #00ff00;
    -webkit-transition: background 0.5s ease, color 0.3s linear;
}

a.foo:hover {
    background: #ffd700;
    color: #fff;
}
 

  - 위 반응은 배경이 0.5초이니 배경이 변하기 전에 색상이 글자의 색상이 먼저 흰색으로 변하고 배경이 변합니다.

  4. 트랜지션을 부여할 수 있는 속성 범위

   

    background, color, height, width, outline

   - 위에 나온 5가지 속성에 대해 트랜지션 효과를 부여 할 수 있습니다.   

   - 각각의 효과를 모두 부여하고자 하면 'all'을 이용하여 적용할 수 있습니다.

  아래 예제를 통해 all을 적용해 보겠습니다.

a.foo {
    padding: 1em 2em;
    background: #00ff00;
    -webkit-transition: all 0.5s ease;
}

a.foo:hover {
    background: #ffd700;
    color: #fff;
}
 

  5. 브라우저 지원

Property	IE	Firefox	Chrome	Safari	Opera
transition

 * 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다