그래도 일주일동안 진심이었던 DOM공부. 쉽지않았던 공부였다. 늦게나마
간단하게 정리해보기로 한다.
기본적인 HTML 구현.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div id="wrapper">
<header>
<!--.... -->
</header>
<section id="comment">
<!--.... -->
<!--.... -->
<!--.... -->
</section>
<section id="showTweet">
<section id="showTweet_new">
<button id='randomTweet' style="font-size: 20px; margin-top: 6px; margin-left: 35px;">check new tweet</button>
</section>
<section id="showTweet_timeline">
<div id="timeline_blank">
<ul id='dynamicTweet'>
<!-- <li>
<div class="timeline_name"></div>
<div class="timeline_time"></div>
<div class="timeline_comment"></div>
</li> -->
</ul>
</div>
</section>
</section>
</div>
<script src="script.js"></script>
<script src='data.js'></script>
</body>
</html>section중 id가 "showTweet"인 태그부분을 보자면 이렇다. 다른 부분은 개인 저작물이기 때문에 자세히 보여주진 못하지만, 그 태그안에서 두가지로 나누어 별명을 작성해보았다.
메인영역 showTweet의 전체적 스타일과 관련.
-
먼저, 트윗을 추가할 버튼영역 및 타임라인을 관리하는 주요영역들을 통틀어서, "showTweet". < 안의 리스트들의 가장 부모요소.
-
트윗을 추가하거나 관리할 영역을 "showTweet_new" < "showTweet"의 자식노드 중 가장 상위 자식 1
-
트윗이 추가되어서 보여질 타임라인 영역을 "showTweet_timeline" < "showTweet"의 자식노드 중 가장 상위 자식 2
-
타임라인 영역 중 안의 ul태그를 유동적으로 움직일수 있게 하기위해(트윗배열 전체의 스타일 지정위해) "showTime_blank" < "showTweet_timeline"영역의 firstElementChild.
메인영역 showTweet안의 실제 타임라인 관련.
-
트윗들을 붙여서 보여줄 li태그 짝꿍 ul태그는 "dynamicTweet" < 안의 li태그들이 유동적으로 늘어나고 줄어들것이기 때문에 이렇게 지음.
-
li태그들은 실제 트윗 리스트들이 달릴 "tweetList"
-
안의 정보내용들이 담길 실제 div태그들은 각각 "timeline_name"등으로 정해보았다.
##전체 div태그들을 가운데로 정렬시키기!
(시험 이후에)
그래도 트위틀러를 내가 이해해서 스스로 짜본것이 나는 대단한 경험이었다고 생각한다.
내가 남들보다 뒤쳐질지라도, 이해가 느릴지라도.. 그래도 내 힘으로 제출한게 어디인가.
너무 많이 아쉬운 결과이지만... DOM과 친해지지 못한 내 탓이다. 음.
