같이 만들 게임이 무엇인지 궁금하신 분들은 아래 링크를 클릭해주세요.
html의 기초가 궁금하시다면 아래 링크를 클릭해주세요.
오늘은 css에 대해서 알아보도록 하겠습니다.
문서를 꾸미는 것은 css가 하는 일입니다. 나중엔 따로 문서를 만들어서 html 문서에 불러오도록 하겠지만 지금은 style태그에 직접 삽입해보도록 하겠습니다.
<head>
/*다른 태그들은 생략 */
<style>
여기에 삽입하면 됩니다!
</style>
</head>
꾸미려면 무엇이 필요할까요?
"무엇"을 "어떻게" 꾸민다는 것인지 알려주는 것이 필요합니다. '무엇'에 해당하는 것은 'css 셀렉터'입니다. 어떤 태그를 꾸밀지 선택하는게 'css 셀렉터'라고 생각하시면 됩니다.
가령 우리는 태그에 id와 class를 주었습니다. 해당 값으로 태그들을 선택할 수도 있고, 태그를 직접 가리킬 수도 있습니다.
#s1은 id가 s1인 태그를 뜻합니다.
.square은 class가 square인 것을 뜻합니다.
h1 만 적으면 html에 있는 모든 h1을 나타냅니다.
tr td 라고 적으면 tr 태그 밑에 있는 td태그를 나타냅니다.
무엇을 꾸밀지 선택할 수 있으니 이제 어떻게 꾸밀지만 알려주면 됩니다.
css는 효과들을 괄호 안에 다 넣고, 하나의 효과가 끝날 때 마다 세미콜론을 주면 됩니다.
{
color: black;
}
이와 같은 형태입니다.
둘을 합쳐볼까요?
tic tac toe Gazua라는 제목을 한번 꾸며보도록 하겠습니다. 스팀잇 마크의 경우 색깔이 rgb(4, 214, 167)입니다.
h1{
color: rgb(4, 214, 167);
}
스타일 태그 안에 저렇게 효과를 주면 어떻게 변하나요 ?
이렇게 제목이 예쁜 색으로 변했습니다 !
css 효과는 다양합니다. 하지만 쓰지도 않을 효과들을 외우는건 시간 낭비죠.. 필요한 효과가 생길때마다 하나씩 알아가시면 충분합니다. 저희가 만드는 게임의 경우 8가지 정도의 효과가 들어가는데 이 8개를 시작으로 필요할 때마다 하나씩 외워가시길 바랍니다.
아니면 해당 링크는 마이크로소프트에서 자주 사용하는 css효과들을 정리해둔 것입니다. 참고하셔서 공부하시는 것도 좋을 것 같습니다. 다음 포스팅에서는 이제 css 효과주는 방법을 알았으니 css 부분을 다 만들어보도록 하겠습니다.