Twittler(Twitter clone) 구현하기 - (2) HTML (selector 지정)

Twittler(Twitter clone) 구현하기 - (2) HTML (selector 지정)

 

** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) **

 

개요에서는 twittler를 동적으로 구현하기 위한 javascript를 활용한

구현 목표를 집중적으로 다루었으나, 구현되는 기능들을 잘 보여줄 수 있는 HTML도 정말 중요하다.

 

이미, twittler mock-up을 구현해 보았기 때문에 쉽게 만들 수 있다고 생각하지만

javascript와의 조화를 생각한다면 아직도 고민해야할 부분들이 많다.

(실제 그렇게 삽질을 오래도록 했었다.. )

 

구현해야할 기능들을 분리하여 생각하기

 

1) HTML 구성

HTML/CSS 로 mock-up을 구현했던 기억을 되짚어가며, 화면 구성의 뼈대가 되는 영역을 크게 4가지로 구분하였다.

그 후에는 각 영역별로 표시되는 값들이 어떻게 위치하여야 하는가를 생각하며 HTML tag를 구상하였다.

 

tag 작성시에는 지정된 영역에서 한 줄의 폭을 다 차지하는 <div> tag와,

한 줄 안에서 폭을 분할하여 요소를 배치할 수 있는 <span> tag를 어떤 항목에 부여하여야 할 것인가에 대해 고민을 했다.

 

 

2) CSS

디자인적인 요소들은, javascript로 프로그래밍을 마친 후에 꼼꼼하게 보려고 생각했고

구현 중에는 구분하여 볼 수 있을 정도로만 기본적인 속성을 지정하였다.

 

처음 페이지를 열었을 때 렌러딩되는 tweet 정보 중에, 시간을 표시하는 부분은

CSS의 float기능을 사용하여 한 줄 안에서 영역을 구분하여 배치하였다.

 

 

3) Selector

사실 과제를 마친 후에야 순서대로 정리를 하고 있지만, selector에 대해서는 깊이 생각하지 못한 채 코드를 작성했던 기억이 있다.

다른 코딩을 하게 될 때에는, 중간에 수정을 하더라도 처음부터 부여할 selector에 대해 지정을 해두고 코드를 작성하는것이

좋은 방향이라고 생각한다.

 

이번 과제에서 id / class를 지정하는 이유는 두 가지.

 

    첫 번째, CSS 속성 부여를 위해서.

        box의 색상이나, 요소의 배치 등을 수정함에 있어 selector 지정은 CSS 속성 부여에 많은 편의를 제공한다.

        실제 twittler과제에서는 손이 많이 가지 않는다고는 하지만, CSS 파일에 8개의 id 또는 class를 지정하여 디자인 속성을 설정하였다.

        CSS는, 수정하면 그 효과가 화면에 바로 보이게 되어서 feedback을 받기 쉬운 장점이 있다.

 

        id는 HTML 코드 안에서 유일한 요소에,

        class는 중복되는 요소들에 대해 일괄적으로 속성을 부여하기 위해 사용한다.

        twittler에서는, render 되는 tweet들이 각각 같은 형태로 추가되기 때문에 rendered tweet은

        모두 같은 속성을 지정할 수 있도록 'class' 를 부여하였다.

 

 

    두 번째, javascript로 가져올 데이터들을 알맞은 위치에 잘 배치하기 위해서.

        data.js에서 javascript 함수를 통해 불러오는 데이터를 tweet rendering 창에 배치하는 때에도 selector가 중요한 기능을 한다.

        (template을 활용하였던 포스팅을 작성하며, selector를 어떻게 연계하여 활용하였는지 자세하게 다루어 볼 예정이다.)

 

 

다음 세 번째 twittler 해결기에서는 본격적으로 javascript 함수 구현을 위해

DOM(Document Object Model)을 구성해 나갔던 기억을 되짚어보겠다.

 

** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) **