오늘부터 나도 웹개발자 - 1-1
화면을 만들어보자 (Html editor 사용하여 게시판 만들기)
html로 파일을 만들어 보았다면,
이제 각각의 태그의 속성을 익히는 시간이 필요합니다
이건...개인의 노력이므로
저번 글에서 링크한 w3 튜토리얼을 참고하여 열심히 익히시길 바랍니다
특히, 강조하고 싶은 점은
반드시 복사,붙여넣기가 아닌 직접 손으로 한자 한자 타이핑하여 익히시길 권합니다.
처음의 개발 습관은 끝까지 가는 법인데,
대부분 눈으로 이해하였다고, 손으로 타이핑하는 걸 게을리 하고,
매번 복사,붙여넣기를 하며 익힌 것들은 사실은 내 것이 되지 않을 때가 많습니다
한 예로,
저는 개발을 한 2년쯤 쉬었어요
완전히는 아니고, 아주 띄엄띄엄 간단한 코드를 봐주는 것 말고는 한 게 없었던 시간이었는데,
급하게 다시 개발을 해야할 때가 왔는데 너무 걱정이 됐습니다
왜냐면 머리속이 하얗고 잘 할 수 있을지 걱정되더라구요
그런데 왠걸, 손가락이 그많은 단축키와 언어들을 다 기억하고 있더라구요
아주 놀라웠던 경험이었습니다. 공부할때도 깜지(?)를 하는 이유도 알 것 같았구요 ㅎㅎ
아무튼..그렇게 하나하나 태그를 익히시길 권장합니다
나중에 개발을 하다 보면, html 태그인지, js인지 , css인지 , jsp를 고쳐야 하는지 감도 못잡는
초보 수준에 들어서거든요
그럴 때 착실히 하나하나 예제 해보신 분들은 이해가 될 겁니다
그리고 또, 퍼블리셔가 준 코드를 복사한 후 로직을 짰는데 화면이 틀어지거나 깨질때
전 다 지우고 다시 짜곤 하거든요. 그리고 스타일을 입힙니다.
그게 훨씬 시간이 빠를 때가 있어요.
서론이 길었네요
아무튼 하나 하나 속성을 익히셨다고 생각하고,
이제 게시판 html을 만들거에요
리스트랑 등록폼 2개를 만들건데,
전 에디터를 사용할 겁니다
https://htmlg.com/html-editor/
리스트
<html>
<body>
<p>게시판</p>
<p></p>
<table border="1" style="border-collapse: collapse; width: 100%; height: 42px;">
<tbody>
<tr style="height: 21px;">
<td style="width: 9.9944%; height: 21px; text-align: center;">No</td>
<td style="width: 24.4401%; height: 21px; text-align: center;">제목</td>
<td style="width: 30.0392%; height: 21px; text-align: center;">분류</td>
<td style="width: 35.5263%; height: 21px; text-align: center;">등록일</td>
</tr>
<tr style="height: 21px;">
<td style="width: 9.9944%; height: 21px; text-align: center;">1</td>
<td style="width: 24.4401%; height: 21px; text-align: center;">테스트</td>
<td style="width: 30.0392%; height: 21px; text-align: center;">테스트 분류</td>
<td style="width: 35.5263%; height: 21px; text-align: center;">2022.1.25.</td>
</tr>
</tbody>
</table>
</body>
</html>
이 html을 list.html로 저장해두고 다음에 css와 js 에서 사용할 거니 저장을 합니다
자 보시면 style 속성에 폭,높이,글자 정렬에 대한 것들이 비슷하거나 똑같게 반복되고 있죠?
그렇게 코딩을 하다 보면, 만약 변경할 일이 생기면 어떻게 될까요
모든 html을 다 뒤져서 변경해야겠죠. 그래서 귀찮기 시작한 거에요
개발을 하면서 아셔야 할 건, 개발은 귀차니즘을 최소화 하기 위해
누군가 부단히 라이브러리와 프레임워크를 만들고,
우린 그걸 또 사용하면서 편히 개발을 할 수 있단 거에요
그래서 저런 스타일 정의 등을 편하게 하기 위해 css란 게 있습니다
스타일을 클래스로 정의하고 정의된 클래스를 적어주면 그 스타일이 적용되는 거죠
전체적으로 스타일이 바뀐다면 정의된 클래스만 바꿔주면 한번에 따라 바뀌겠죠?
이렇게 하나하나씩 익혀야 할 것들이 추가됩니다 ㅎㅎ
아무튼 저렇게 html 소스를 만드는 것으로 이번은 마무리 하도록 하겠습니다
제 글은 실습 위주이긴 하지만 필요성과 개발 관련된 얘기들이 좀 더 많을 수도 있고,
아닐 수도 있어요. 저도 잘 모르겠어요 아직은 ...
너무 계획적으로 하다 보면, 글 쓸 엄두가 안나서 생각나는 대로 큰 틀 안에서만
의식의 흐름대로 쓰는 글이라, 아마 발전하면서, 제 생각들도 정리되겠죠
이 글은 저의 기록이니까 일단 흘러가보고 다듬도록 하겠습니다.
