분류 전체보기

[HTML5&CSS3] 벤더 프리픽스(vendor prefix)

특정 CSS속성이 표준으로 제정되기 이전에 실험적인 기능들이 각 브라우저별로 인식하게 하기 위한 접두사입니다. 위 예제의 경우 transform CSS를 사용하기 위해 각 브라우저별로 벤더프리픽스 접수사를 사용한 것을 확인할 수 있습니다. 여기서 -ms-는 익스플로러 -webket-은 크롬, 사파리와 대응되며 -moz-는 파이어폭스, -o-는 오페라인데 현재는 -webket-으로 변경되으니 참고 바랍니다.

[HTML5&CSS3] 선형 그레디언트(linear-gradient)

색상에 선형 그레디언트(linear-gradient)를 표현하려면 linear-gradient 함수를 사용할 수 있으며 해당 함수는 CSS3전용입니다. 첫 번째 속성의 값은 그레디언트를 그릴 각도이며 이어서 시작 색상 및 위치(% 단위)와 종료 색상 및 위치를 지정하면 됩니다.

[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는 속성의 값을 하나만 입력하면 전체를 같은 값으로 하여 둥근형태를 만들지만 다음과 같이 왼쪽 위, ..