[hello world] 게임에 css 부분을 적용해봅시다.

같이 만들 게임이 궁금하신 분들은 아래 링크를 클릭해주세요.

tic tae toe라는 게임을 아시나요?

html의 기초가 궁금하신 분들은 아래 링크를 클릭해주세요.

html의 기초 문법 알아보기
필수로 채워야할 태그 알아보기
게임의 html 문서 완성하기

css 기초 문법이 궁금하시면 아래 링크를 클릭해주세요.

css 기초 문법 보기

저번 포스팅에서는 제목의 색을 스팀잇의 초록색으로 바꾸는 것까지 했습니다. 오늘은 css 부분을 다 완성시켜 보겠습니다.

우선 다른 설명들을 하기 전에 태그들은 각자의 크기를 가지고 있다는 것을 알아주세요. 가령 지금은 태그에 아무것도 나타나있지 않지만 border(경계선) 값을 주면 해당 태그가 가진 크기를 알 수 있습니다.

style태그 안에서 body태그에 border 값을 주면 body태그가 얼마나 큰 지 알 수 있습니다.

빨간색 부분이 바디태그의 크기입니다. 이런 태그의 크기를 당연히 조정할 수 있겠죠?

아래 부분을  스타일 태그 안에 넣어주세요. 
body{
    width: 300px;
    margin: 0 auto;
    background-color: rgb(194, 194, 194);
}

해당 코드를 넣으셨다면 그림과 같은 형태가 됩니다. 우리가 넣은 코드에 대해 설명하기 전에 태그들은 각자의 크기를 가지고 있다는 것을 다시 떠올려보세요. 그 크기를 자세히 나누면 4가지로 나눠볼 수 있습니다.

컨텐츠는 내용 부분을 컨텐츠라고 합니다.

<div>이 텍스트가 컨텐츠입니다.</div>

테두리는 우리가 아까 border 값을 주면 나타났던 선이구요. 경계선과 컨텐츠 사이의 여백을 패딩이라고 하고, 경계선 밖에서 다른 태그와의 여백을 마진이라고 합니다. 천천히 외우시면 됩니다 ^^...

위에서 margin에 값을 준게 기억나죠? 어떤 값을 줬나요? 0 auto라는 값을 줬습니다. 프로그래머들은 귀차니즘을 가진 사람들이 많습니다. 그래서 위, 오른쪽, 아래, 왼쪽에 각각 값을 주기보다 이렇게 2개만 값을 주면 첫 번째 값은 위,아래(우리는 여기에 0을 줬습니다.) 두 번째 값은 오른쪽, 왼쪽에 적용시키는 걸로 정한 겁니다.(여기엔 auto를 줬습니다. ) auto 값의 경우엔 이렇게 좌우에 auto를 주면 가운데로 이동합니다.

width는 태그의 가로크기를, height는 태그의 세로 크기를 조정합니다.
background-color는 배경색입니다. 다른 태그들과 달리 body에 배경색을 주면 페이지 전체의 배경색으로 적용됩니다.(혹시 body태그의 크기는 300px인데 문서 전체가 덮인 것에 궁금하시다면
body태그만 특수한 것이라고 생각해주세요.)

우리가 넣은 코드들이 조금은 이해가 되시나요?

.Square{
  width: 80px;
  height: 80px;
  border: 3px solid rgb(4, 214, 167);
  border-radius: 5px;
  font-size: 40px;
  text-align: center;
}
h1{
  color: rgb(4, 214, 167);
  border-bottom: 2px solid black;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
#message{
  font-size: 20px;
  margin-bottom: 15px;
}

컨텐츠-패딩-보더-마진에 대한 이해가 되신다면 나머지는 아주 단순합니다. font-size는 폰트(컨텐츠)의 크기를 조절하고, text-align은 문자 정렬입니다. border-radius는 원래는 사각형인 경계선을 모서리가 둥근 사각형으로 만들어줍니다. 패딩, 보더, 마진은 크기를 각각 줄 수도 있습니다. top, right, bottom, left를 붙여주시면요.

스타일 태그 안에 잘 넣으셨다면 저와 같은 모양이 됩니다. 맨 처음보다 조금은 깔끔해졌죠? 이제는 자바스크립트를 통해서 나머지 부분을 채우면 되겠군요! 다음 포스팅부터는 자바스크립트에 대해서 다루도록 하겠습니다 @^^@