이전 글: HTML로 웹 그림판 틀 만들기 - 얼기설기 #1🔗
그동안 얼기설기를 열심히 만들었습니다.
사실 만들다 보니 생각보다 재미있어서 블로그에 올린 진도보다 훨씬 앞서 나가버렸습니다...
벌써 선도 그려지고 꾸물거리기까지 하는데, 일지는 이제 css 차례라니...
아무튼 이대로 가다가는 글이 영영 개발 속도를 따라잡지 못할 것 같네요.
그래도 기록은 남겨야 하니까, 우선 시간을 조금 되돌려서 css 이야기부터 시작하겠습니다.
지난번에 했던 걸 간단 요약하자면 html을 이용해 얼기설기의 기본적인 틀을 만들었다.
제목과 설명, 펜과 지우개 버튼, 저장 버튼, 그리고 캔버스까지.
하지만 아직 아무것도 꾸미지 않은 상태라 화면이 많이 허전했다.
특히 캔버스가 투명하니 어디까지가 그림을 그릴 수 있는 영역인지 알아보기 어려웠다.
그러니 이번에는 css를 적용해 보기로 했다.
아직 처음이라 쉽게 하기 위해서 style.css가 아니라 index.html 파일에서 해보라길래 그렇게 해봤다.
canvas {
border: 1px solid black;
}
캔버스에 테두리를 넣어봤는데 확실히 보기에 나아진 것 같다.
그런데 캔버스의 가로가 생각보다 컸구나?
코드로만 width="800" height="600" 하는 거보다 더 와닿는 것 같다.
다음 연습은 캔버스 내부의 배경색 바꾸기.
canvas {
border: 1px solid black;
backgrond-color: white;
}
앗 실수. 왜 안되나 했더니 backgrond에서 u를 빼먹었다.
그리고 애초에 흰색이라서 확인도 힘든 상태구나.
색이 잘 적용되었는지 제대로 보기 위해 white 대신 lightgray를 적어봤다.
겸사겸사 오타도 수정했다.
적용 자체는 잘 되긴 했는데 부담스러워서 다시 white로 바꿔줬다.
계속 쭉쭉 이어가서 다음으로는 버튼들의 크기와 간격을 조절해 봤다.
button {
padding: 10px;
margin-right: 8px;
}
지금은 디자인 초안을 따라서 만든다기보다는 기초를 배우고 있는 것이니 나중에 세세하게 수정해 보자.
이제 화면을 중앙에 위치하도록 바꿔볼 생각이다.
무슨 소리냐고 할 수 있겠지만,
사실 지금까지 그림판은 화면의 왼쪽에 딱 붙어있었어서 고개를 돌려서 봐야 했다.
그래서 비주얼적으로도 별로고 목도 불편했다.
그동안은 이미지의 크기가 과도해질까 봐 필요한 부분만 크롭 했기 때문에 미처 보여주지 못한 부분이다.
그런데 지금 있는 요소들만 해도 제목, 설명, 버튼 3개, 캔버스... 일일이 옮기면 불편하니까 전부 하나로 묶는 편이 좋다고 한다.
.app {
width: 900px;
margin-left: auto;
margin-right: auto;
}
처음에는 margin-right의 하이픈을 빼먹어버려서 중앙에 맞춰질 거란 기대와 다르게 오른쪽 벽에 딱 붙어버렸다.
오타인 부분은 무시되고 margin-left만 적용되었으니까.
오타를 수정하니 중앙으로 이동하긴 했지만 묘~하게 왼쪽으로 치우쳐진 느낌이 들었다.
그저 착각일까 아니면 실수일까?
아까 캔버스에 테두리를 씌웠던 것처럼 .app에도 테두리를 씌워서 확인해 보기로 했다.
원인이 보였다.
바깥의 상자(빨간선 부분)는 정상적으로 정중앙에 배치되었지만 정작 내용물은 왼쪽에 붙어있던 것이었다.
#drawing-canvas {
border: 1px solid black;
background-color: white;
display: block;
margin-left: auto;
margin-right: auto;
}
그래서 캔버스에 display, margin-left, margin-right 이 세 줄을 추가해 줬다.
새로 배우는 display: block;이란 요소를 블록 형태로 배치하는 설정이라나?
솔직히 잘 이해가 안 됐긴 하지만 일단 캔버스는 가운데로 이동했다!
이어서 제목은 가운데 정렬, 펜과 지우개, 저장 버튼은 캔버스의 왼쪽 테두리에 맞추기로 했다.
모습은 이렇게 변했다.
이번 화는 여기서 대강 마무리하려고 한다.
나는 html, css는 간략하게만 배울 생각이었다.
왜냐하면 얼기설기의 본체인 꾸물거리는 선을 구현하기 위한 javascript가 더 중요하다고 생각했기 때문이다.
비주얼은 기능이 어느 정도 갖춰진 뒤 따라오면 되는 거 아닐까 싶었다.
막상 css를 배우는 과정은 꽤 재미있었던 것 같다.
코드 한 줄을 넣을 때마다 시각적인 요소가 추가되는 게 좋았다.
마지막으로 복습할 겸 이때까지 배운 것들을 활용해서 사이트를 스스로 꾸며보기로 했다.
하지만 배운 거라곤 테두리 두르기라던가, 버튼의 크기를 조절한다던가, 여백 조절 같은 거라 할 수 있는 건 별로 없었다!
아직 귀여운 폰트나 그림은 어떻게 넣는지 모르고...
그래도 허허벌판이던 첫 버전을 다시 보고 나니 나름 성장한 것 같아서 기쁘다.
이제 아래의 링크로 들어가면 이번화에서 최종적으로 어떻게 만들었는지 볼 수 있다☆
