오늘부터 나도 웹개발자 - 1-2
화면을 만들어보자 (css 사용하여 게시판 꾸미기)
지난 시간에 만들었던 list.html의 table 속성에 정의했던 style 부분을 css로 따로 빼서 정의하도록 하겠습니다.
css에 대한 정리도 w3school을 보면 잘 정리되어 있으니 따로 공부하시기 바랍니다
https://www.w3schools.com/css/
그 중 제일 자주 쓰는 css 스타일은 이런 겁니다
https://www.w3schools.com/css/css_important.asp
<style>
.button {
background-color: #8c8c8c;
color:# white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color:#yellow;
}
</style>
이렇게 정의한 뒤 html 태그에서 불러 쓸때는 class나 id로 불러서 씁니다
class로 불러쓰려면 .classname으로 쓰고 id로 불러 쓸 경우는 #idname으로 쓰죠
이 형태는 프론트 개발을 할때 자주 쓰기 때문에 알아두세요
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
저희 예제는 그렇게까지 할 스타일이 없어서
각각에 중복되었던 속성을 각 table, tr, td 속성으로 구분하여 정의해주면 적용하는 수준으로 만듭니다
지난 시간 저장했던 list.html을 아래와 같이 변경합니다
이렇게 정의한 뒤 table, tr, td에 뭔가를 추가 적용하거나 변경할때 아래 소스를 다 뒤져서 변경하는 것보다
정의된 css만 변경해주면 편리하겠죠?
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
height: 42px;
}
tr {
height: 30px;
}
td {
text-align: center;
height: 30px;
}
</style>
</head>
<body>
<p>게시판</p>
<p></p>
<table border="1" >
<tbody>
<tr >
<td style="width: 9.9944%; ">No</td>
<td style="width: 24.4401%; ">제목</td>
<td style="width: 30.0392%; ">분류</td>
<td style="width: 35.5263%; ">등록일</td>
</tr>
<tr style="">
<td style="width: 9.9944%; ">1</td>
<td style="width: 24.4401%; ">테스트</td>
<td style="width: 30.0392%; ">테스트 분류</td>
<td style="width: 35.5263%; ">2022.1.25.</td>
</tr>
</tbody>
</table>
</body>
</html>
이렇게 정의한 뒤 table, tr, td에 뭔가를 추가 적용하거나 변경할때 아래 소스를 다 뒤져서 변경하는 것보다
정의된 css만 변경해주면 편리하겠죠?
이렇듯 모든 웹개발의 라이브러리, 프레임워크 등등이 늘어나는 이유는 좀 더 편하게 개발을 하기 위해서
변경은 손쉽고 빠르게 그리고 자주 쓰는 건 안정성 있는 소스 형태로 반복해서 쓰고 싶은
개발자들의 훌륭한 게으름 DNA 때문이죠
그래서 라이브러리, 프레임워크 말이 어려워 보여도 그냥..자주 쓰고 그러다 보니 패턴화 되고 안정적인 소스구나. 또는 이걸 쓰면 개발이 편리하겠구나라고 생각해 보시면 됩니다
추후 점점 개발을 하게 되면,내가 구현하려던 게 라이브러리 또는 프레임워크로 존재해서 놀랄 경우가 생길텐데 그럴 정도가 되면 진짜 개발자가 될 준비가 끝난 거겠죠?
일단 제가 css를 깊이 알기 싫어해서 ㅎㅎ 여기까지 하고 다음은 자바 스크립트에 대해 얘기해 보겠습니다
