CSS3

[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

[HTML5&CSS3] 표시 속성

1. display 요소를 표시하는 속성 중 display는 요소를 어떤 형태로 표시할지를 지정하는 속성입니다. 이 속성에서 가장 많이 사용하는 것으로는 none, block, inline, inline-block이 있습니다. 그 외에 다른 것도 많지만 모든 브라우저마다 지원하는 내용이 달라 잘 사용되지는 않습니다. 먼저 none는 요소를 화면에 보이지 않게 합니다. block는 요소가 전체 영역을 모두 사용해 block형태로 보이도록 합니다. inline은 block과 달리 다른 요소와 같이 배치될 수 있도록 합니다. inline-block는 inline과 비슷하지만 요소에 width와 height속성을 사용할 수 있습니다. 2. visibility visibility는 요소를 보이거나 보이지 않게 하..

[HTML5&CSS3] CSS3 색상입력

색상은 기본적으로 red, blue처럼 특정 키워드를 통해서 설정이 가능합니다. abcdefg abcdefg 그러나 위와 같은 키워드 설정 말고도 숫자를 통해 색상을 더욱 정밀하게 조절할 수 있는데 이때 사용 가능한 색상 단위로는 첫 번째로 rgb가 있습니다. rgb는 순서대로 red, green, blue 색상을 의미하며 이들 각각의 색상값을 구분해서 지정합니다. 이때 각각의 값은 0부터 255까지 지정이 가능합니다. abcdefg abcdefg rgb와 비슷한 rgba도 있는데 이때 a는 투명도를 의미합니다. abcdefg abcdefg 투명도는 0.0 부터 1.0까지 설정이 가능하며 0.0에 가까울수록 투명도가 증가합니다. hex단위는 #000000 형태의 16진수 단위로 입력하며 2자리 단위로 R..

[HTML5&CSS3] CSS선택자 -3

1. 일반 구조 선택자 CSS3부터 지원하는 선택자로서 다음의 선택자 사용이 가능합니다. first-child 동위 관계에서 첫번째 요소 last-child 동위 관계에서 마지막 요소 nth-child(수열) 동위 관계에서 수열번째 요소 nth-last-child(수열) 동위 관계에서 뒤에서 부터 수열번째 요소 특히 수열의 경우 예제에서는 3n이라고 지정하였는데 이렇게 되면 3, 6, 9와 같은 순서의 요소를 선택할 수 있게 됩니다. 만약 3n+1처럼 했다면 1, 4, 7, 11과 같이 순서가 바뀌게 됩니다. 2. 형태 구조 선택자 형태 구조는 동일 요소가 존재할 때 페이지 내에서 등장하는 순서에 따라 선택 가능한 선택 자이며 사용 가능한 선택자로는 다음과 같은 것들이 있습니다. first-of-type..