Web

[HTML5&CSS3] 뷰포트(viewport)

웹페이지에서 클라이언트에 특정 정보를 전달하기 위한 목적으로 meta태그를 사용합니다. 이때 만약 모바일에서 웹페이지에 접근하는 경우 모바일 화면에 대한 적절한 대응을 위해 meta태그에 뷰포트(viewport)를 사용합니다. viewport에는 다음과 같은 속성을 입력해 모바일 화면에 대응될 수 있도록 합니다. width 화면의 너비를 의미하며 200, 300등의 값을 지정하거나 device-width로 장치의 화면에 맞출 수 있습니다. height 화면의 높이를 의미하며 200, 300등의 값을 지정하거나 device-height로 장치의 화면에 맞출 수 있습니다. initial-scale 화면확대비율로 1.0, 2.0등의 값을 지정합니다. user-scalable yes, no등의 값을 지정하여 임..

[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에서 배경 이미지를 여러 개 적용했고, 각각의 이미지에 대해 크기를 다르게 해야 한다면 각각의 값을 쉼표(,)로..