전체 글

[HTML5&CSS3] 그림자 효과

1. text-shadow 글자에 그림자 효과를 부여합니다. 속성의 값을 부여하는 순서는 '오른쪽 부분, 아랫부분, 그림자 진한 정도, 색'이며 그림자를 여러 개 부여하고 싶다면 해당 순서에 맞춰 표현하고자 하는 그림자 개수만큼 속성을 부여합니다. 2. box-shadow 박스에 그림자 효과를 부여합니다. 속성에 값을 부여하는 순서는 text-shadow와 동일합니다.

[HTML5&CSS3] 위치

1. position 요소의 위치를 설정합니다. position의 속성을 absolute로 잡으면 left, top, right, bottom속성을 이용해 요소의 위치를 직접 지정할 수 있습니다. 이 외에 static속성은 다른 태그와의 순서에 따라 위에서 아래로 자동 배치되며 이때는 위치를 임의로 설정할 수 없습니다. relative는 본래 자신이 위치해 있던 위치를 기반으로 좌표가 설정되며 fixed는 absolute와 비슷하지만 스크롤의 상태에 영향을 받지않고 고정된 좌표를 사용하게 됩니다. 2. z-index 여러개의 요소가 겹칠 때 앞으로 드러나는 순서를 지정하는 속성입니다. 기본적으로는 뒤에 나오는 요소가 앞으로 위치하게 되는데 위에서 처럼 z-index의 값을 임의로 부여하면 요소가 앞으로 ..

[HTML5&CSS3] float

보통 이미지와 글자가 같이 있는 기사나 블로그 글을 작성할 때 이미지와 글자를 배치하는 용도로 사용하는 속성입니다. float속성을 사용하지 않은걸 예로 들면 위와 같이 되지만 float속성을 사용하면 위와같이 이미지와 글자의 레이아웃을 구성할 수 있습니다. 속성의 값으로는 left와 right를 사용할 수 있으며 인접한 태그를 왼쪽 혹은 오른쪽에 배치할 수 있도록 합니다.

[HTML5&CSS3] 폰트

1. font-size 글자의 크기를 지정합니다. 단위로는 small, large와 같은 키워드나 10px, 20em과 같은 수치 단위를 적용할 수 있습니다. 2. font-family 글자의 폰트를 지정합니다. 만약 폰트의 이름이 'Font Awesome 5 Free'과 같이 여러 단어로 구성된 형태라면 따옴표(')를 사용해서 폰트를 지정해야 합니다. 또한 지정한 폰트가 사용자의 컴퓨터에 설치되어 있지 않거나 기타 이유로 해당 폰트가 적용될 수 없는 경우를 대비하여 다음과 같이 여러 개의 폰트를 지정하는 경우도 있습니다. 위 예제에서는 첫번째 지정된 Arial 폰트가 없으면 두 번째 Font Awesome 5 Free 찾게 됩니다. 3. font-style 폰트의 기울기를 설정합니다. 4. font-w..

[HTML5&CSS3] 배경

HTML 문서의 배경 이미지를 지정하는 속성으로는 background-image가 있습니다. 기존에는 이미지를 하나만 지정할 수 있었으나 CSS3부터는 여러 개 중첩하여 사용할 수 있습니다. 이미지를 중첩하면 제일먼저 지정된 이미지가 앞에 나오고 뒤이어 지정된 이미지가 뒤의 순서로 나오게 됩니다. 예제에서는 첫 번째 이미지가 나무이며 뒤의 이미지가 꽃입니다. 배경 이미지는 필요하다면 크기를 조절할 수 있으며 크기 조절은 background-size 속성을 사용합니다. 크기를 2번에 걸쳐서 지정해 줄 수도 있는데 이렇게 되면 2번째 값은 높이를 의미하게 됩니다. 만약 background-image에서 배경 이미지를 여러 개 적용했고, 각각의 이미지에 대해 크기를 다르게 해야 한다면 각각의 값을 쉼표(,)로..

[HTML5&CSS3] 테두리

1. border-width / border-color / border-style 테두리 관련 속성은 border-로 시작하며 width는 테두리, color은 색상, style은 테두리 형태를 지정합니다. 테두리를 표시하려면 이 3가지 속성을 모두 지정해야 합니다. 위 3가지 속성은 다음과 같이 width, style, color 순서로 하여 한 줄로 한꺼번에 처리할 수 있습니다. border- 스타일도 필요하다면 top, bottom, left, right방향으로 개별적인 지정이 가능합니다. 2. border-radius CSS3전용 속성으로 완만한 테두리를 만들 수 있습니다. border-radius는 속성의 값을 하나만 입력하면 전체를 같은 값으로 하여 둥근형태를 만들지만 다음과 같이 왼쪽 위, ..

[HTML5&CSS3] 크기와 여백

1. width / height 가로와 세로 크기를 지정합니다. width와 height는 내부에서 글자를 표시하는 영역의 크기를 조절합니다. 그런데 box-sizing 속성을 사용하면 width와 height의 크기 기준을 border까지 포함한 크기로 바꿀 수 있습니다. 2. margin / padding margin과 padding는 여백과 관련된 속성으로 border를 기준으로 안쪽을 padding, 바깥쪽을 margin으로 볼 수 있습니다. 참고로 margin은 margin-bottom으로 아래쪽, margin-left로 왼쪽, margin-right로 오른쪽, margin-top으로 위쪽 영역을 개별적으로 지정할 수 있습니다.

[HTML5&CSS3] CSS3 크기입력

크기와 관련하여 CSS3에서 사용 가능한 단위는 %, em, cm, mm, inch, px 등이 있습니다. 하지만 이들 중 %, em, px만 자주 사용하고 다른 것은 사용빈도가 다소 낮습니다. %는 우선 기본적인 크기에서 상대적인 크기를 결정하는 단위입니다. abcdefg abcdefg em은 배수 단위입니다. 따라서 1em은 1배, 1.5em은 1.5배를 의미합니다. 이 역시 상대적인 크기입니다. abcdefg abcdefg px는 픽셀단위 크기이며 %와 em과는 달리 절대적인 크기를 설정하도록 합니다. abcdefg abcdefg