커스텀시트 만들기⑤:CSS와 스타일

이 글과 다음 글에 나누어, HTML에 놓은 요소들을 어떤 스타일로 보여줄 것인지를 CSS의 코드로 지정하는 방법에 대해 설명합니다. 그래서 display와 flex, grid 등은 다음 글에 있고, 이 글에서는 간단한 디자인적인 속성만을 살펴봅니다.

width와 height

요소의 가로 폭과 세로 길이를 지정합니다. px, pt, em, cm, % 등 여러가지 단위를 지원하고, calc(100% - 20px) 같은 식으로도 쓸 수 있습니다. 여기에 min-이나 max-를 앞에 붙여서 min-width: 400px; 처럼 최소/최대를 지정하는 것도 가능합니다. display가 block이라면, width의 기본값은 100%로 보입니다.

margin, border, padding

먼저, border는 테두리입니다. 그 바깥에 있는 margin은, 바깥쪽 여백을 말합니다. border의 안에 있는 padding은 안쪽 여백을 말합니다. 지금, 크롬이나 사파리를 쓰고 계시다면 아무 인터넷 사이트를 켜서 개발자 도구(Ctrl+Shift+I)를 켜 보세요. 마우스에서 우클릭>검사를 눌러도 됩니다. 그리고 아래쪽을 쭉 내리면, 이런 화면이 있습니다. 앞으로 자주 등장하는 내용이니, 꼭 이해하셔야 하는 개념이에요.

border-radius, line-height

테두리 선을 둥글게 깎아줍니다. border-radius: 5px;로 지정한다면 4방향에, 지름 5px의 원이 두 변의 모서리에 닿는 모양과 같습니다. border-radius: 50px 20px 7.5px 0px;로 지정한 모습은 다음과 같습니다. 시계 방향으로 돌면서 4방향을 하나씩 지정하는 순서가 됩니다. 이것은 margin이나 padding에도 같은 식으로 적용됩니다. line-height는 줄간격입니다.

color, font-family, font-weight, font-style

color는 글자의 색상이고, font-family는 글꼴, font-weight는 글자의 두께(굵게 등), font-style은 기울임 등의 스타일입니다. color는 rgb(255, 0, 100)의 형태로 쓰거나, 16진수 코드의 #FF80C0, 또는 html의 컬러 이름을 검색해서 transparent로 쓸 수 있습니다. 투명도를 넣고 싶다면 rgba(230, 230, 230, 0.5)의 형태로 써서, 맨 마지막 값이 1.0일때 선명한 100%, 0.1일때 희미한 10%의 농도로 보이게 지정합니다.

text-align, text-shadow

text-align는 문단 정렬입니다. 오른쪽 또는 왼쪽, 가운데 정렬, 양쪽 정렬(justify), 부모 요소와 동일(inherit)하게, 언어의 쓰기 방향(start/end)에 따라 정렬할 수 있습니다. 만약 이 정렬이 하지 않고 그 요소가 가운데에 배치되기를 원한다면 margin을 auto로 지정하세요. 그리고 아마 롤꾸에서 많이 보셨으리라 생각하는 text-shadow는, 네온 효과처럼 글자 뒤에 그림자가 생기는 것입니다. text-shadow: 5px 1px 2px #000000;라고 적으면, 5px크기의 검은 그림자가 x축 방향(오른쪽)으로 1px, y축 방향(아래쪽)으로 2px 밀려나서 글자의 뒤에 배치됩니다.

background-color, background-image, background-repeat, background-size

background-color는 배경의 색상입니다. background-image를 써서 그림을 깔아주면, background-repeat에서는 그것을 바둑판식으로 배열하거나, background-position으로 정 가운데에 띄워놓을 수 있습니다. 그라데이션 색상으로 꾸미려고 한다면, background-image:  linear-gradient(90deg, gray, white, green); 라고 써서 회색-흰색-녹색의 그라데이션이 90˚의 각도로 기울어지게 만들 수 있습니다.

z-index, opacity, position

html로 쌓아올린 요소들은, 가장 자식인 속성이 맨 위에 오는 구조로 쌓아올려지는 것처럼 보입니다. 이 레이어의 우선도를 임의의 숫자로 지정하는 것이 z-index입니다. 그렇게 쌓인 요소들을, rgba에서 투명도를 지정하지 않아도 통째로 반투명하게 만들 때에는 opaciy를 사용합니다. 마지막으로, position이라는 속성은 그 문서의 전체 흐름 내에서 이것의 배열이 다른 요소들과 어떻게 조화를 이룰지(무시하고 겹쳐있을지, 순서대로 줄을 서듯 흘러갈지)를 결정합니다.

input[type="number"]의 버튼 없애기

type이 number인 <input>은, 숫자를 조절할 수 있는 위/아래 삼각형 버튼이 생깁니다. 이것을 강제로 없애거나 왼쪽 방향에 붙이거나 한다면 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;} 같은 코드를 적어서 제거할 수 있습니다.

input의 outline

입력칸에 무언가 입력하기 위해 커서를 놓았을 때, 그 테두리가 굵은 검은색 선으로 강조되어 보이는 경우가 있습니다. 그것을 비활성화 시키려면 input:focus에 대해 outline: none;으로 지정하면 됩니다. 이와 같이, 특정 요소를 클릭(:focus)하거나 마우스를 올리는(:hover) 경우, 체크된(:checked) 경우 등의 상황에서만 작동하는 서식에 대한 지정을 하기 위해서는 CSS선택자를 이용합니다.

 

CSS의 선택자

커스텀시트 만들기③:CSS에 연결해보기에서는, 어떤 class 이름을 가진 요소에 대한 서식을 지정할 때 .(이름)의 형태로 썼었습니다. 그리고 그 요소에 대한 자식 요소들을 호출할 때는 띄어쓰기를 하고, (부모) (자식)의 형태로 다시 어떤 요소인지를 말했습니다. A라는 요소의 옆에 있는 요소 B를 선택할 때는 A+B라고 부르고, A의 직계 자식 중 첫번째 요소만을 선택하고 싶을 때는 A>div:first-child 라는 선택자를 사용합니다. 당장 외우기에는 너무 많아서 혼란스러울지 모르지만, 반드시 알아둬야 하기에 재미있는 게임의 형태로 공부할 수 있는 사이트를 소개합니다.

CSS Diner