게시판 만들기
우선, head 태그안에서 제 마음대로 css를 꾸며보았습니다.
- table태그는 외부로써, 선과 배경색, 가운데 박스정렬을 적용시켰어요!
- td태그는 태이블의 내부 선속성을 따로 적용시켜줬어요!
- h1태그의 가운데로 텍스트정렬, 배경색을 적용시켰어요!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table{ /*외곽선: 전체선 */
border: aqua solid 3px;
margin: 0 auto; /* 상하 0 좌우중앙정렬 */
background-color:pink;
}
td{ /*내부선: 행마다 낱개선 */
border: black solid 1px;
}
h1{
text-align: center;
background-color: silver;
}
</style>
</head>
|
이제, body 태그안에서 구체적인 기능과 틀을 적용시키면 될 것같아요.
- funcition함수를 통해 번호:제목:작성자:조회수 형식으로 입력하고, spilt로 분리.
- 또 다른 function함수안에서 반복을 통해서, 분리된 값들을 <td>안에 저장
- 전체적인 포문으로 함수들을 호출.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!-- 지역변수로만 이용 -->
<body>
<h1>게시물 출력</h1>
<table>
<script>
function inputBoard() {
var board = prompt("번호:제목:작성자:조회수 형식");
var boardArr = board.split(":");
return boardArr;
}
function boardTR(b) {
var resultTR = "<tr>";
for ( var i in b) {
resultTR += "<td>" + b[i] + "</td>";
}
resultTR += "</tr>";
return resultTR;
}
for (var i = 1; i <= 5; i++) {
var boardArr = inputBoard();
var tr = boardTR(boardArr);
document.write(tr);
}
</script>
</table>
</body>
|
코드를 짜다보면, 다양한 방법으로 풀 수 있기때문에 정답의 길을 여러개라고 하잖아요! 그렇기 때문에 꼭 위와같이 풀지 않아도 됩니다. 아직도 손에 잘 안익다보니까, 코드를 더 많이 짜는 연습을 해야하나봐요.
※ 무엇보다도, 여러분! 개념이 부족하니까 코딩보다는 개념을 마스터하고 코딩해야지라는 생각보다는 개념공부를 하면서 자기수준에서 어려운 난이도의 코딩을 하나하나씩 풀어보면서 개념공부를 하는 것이 더 큰 도움이 된다고 생각합니다. 저 또한 개념공부만 주구장창하다가 코드를 작성하려고 하니까 백지상태로 깜깜하게 손을 대지를 못하겠더라구요. "당연지사 전공학생이 아니니까 아직 지식이 부족해서 그래" 라고 할 수도 있지만! 그렇다기에는 효율적인 방법이 아니였다라는 것이 더 맞다고 보거든요. 그래서 코딩공부를 하시는 분들에게 매일 개념공부를 했다면, 직접 기초든지 심화과제라든지, 뭐라도 안보고 직접 타이핑하면서 짜려고 생각해보는 시간이 정말정말 필요하다는 것을 재차 말씀드려요!
대화가 산으로 간 거같습니다.
위와 같은 내용을 메소드의 형태를 바꿔서 아래와 같이도 작성을 할 수 있기때문에 참고하시면 좋을 것 같아요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!-- 전역변수로 다 변경 -->
<body>
<h1>게시물 출력</h1>
<table>
<script>
var boardArr;//:구분 4개 배열
var resultTR;// tr.td....
function inputBoard() {
var board = prompt("번호:제목:작성자:조회수 형식");
boardArr = board.split(":");
//return boardArr;
}
function boardTR() {
resultTR = "<tr>";
for ( var i in boardArr) {
resultTR += "<td>" + boardArr[i] + "</td>";
}
resultTR += "</tr>";
//return resultTR;
}
for (var i = 1; i <= 5; i++) {
inputBoard();//전역변수값 변경
boardTR();
document.write(resultTR);
}
</script>
</table>
</body>
|
그리고 코딩을 처음 공부하시는 분들에게 가장 접근하는 좋은 자세는 많은 코드를 보고 분석하는 것이에요. 여러 코드를 보면서 다양한 정답을 직접 분석하고 넓혀나아가면서 내 것을 만들 수 있다고 하잖아요! 코딩뿐 아니라 나만의 개발제품이라던가 자기소개서라든가 어느 분야든 다 똑같은 애기지만! 코딩 또한 마찬가지이기때문에, 못한다고 좌절하지 마시고 직접 분석을 통해서 설명을 할 수 있도록 하는 것도 실력이랍니다. 그렇게 차곡차곡 공부를 하시면 꼭 뭐라도 이루실거에요 ㅎㅎ
<코딩결과>
5번 입력창이 나올때마다 :구분자를 통해 아래와 같이 입력하게 됩니다.
그리고, 아래와 같은 게시물 출력이 됩니다
'WEB 기초 > Script' 카테고리의 다른 글
| 9. 함수란, (변수의 종류까지 정리) (0) | 2018.04.12 |
|---|---|
| 8. 구구단 구하기 (테이블 이용) (0) | 2018.04.12 |
| 6. 배열 (0) | 2018.04.12 |
| 5. 로그인_창 만들기 (0) | 2018.04.12 |
| 4. 조건문을 이용한 메뉴판 (0) | 2018.04.12 |