Poiemaweb HTML5 6~10

List & Table

찬찬히 기초부터 들여다보기를 잘했다. 기존에 헷갈렸던 부분들은 대부분 풀네임을 보면 이해가 되는 경우가 대부분이다. ul과 ol 활용방법은 알고 있었으나 이번에 다시 한번 확고하게 정리된다.

• ul : unordered list
• ol : ordered list

특히 마음에 들었던건 type 어트리뷰트 활용에 대한 구분이 명확해졌다는 점이다. 실제 문서에서도 많이 활용되고, 실제로 데이터셋을 화면에 뿌려주거나 할때도 일일이 타이핑하는 것이 아닌 이 type 어트리뷰트를 통해 풀어내면 구조적으로나 편의성에서나 모두 유용할 것으로 보인다. 그리고 start 어트리뷰트 역시. reversed는 활용도는 그리 높지 않아 보인다. 

• 1 : 숫자
• A : 대문자 알파벳
• a : 소문자 알파벳
• I : 대문자 로마숫자
• i : 소문자 로마숫자
• start : 입력값부터 카운트 시작.

그런데 의문과 고민 하나. 특정한 양식을 지정해서 이를 ol에 커스텀하게 적용하는 방법은 없을까? 예를 들어
가 나 다...
① ② ③...
⑴ ⑵ ⑶...

아, 그리고 중요한 요소 또 하나. value 어트리뷰트는 li에 강제로 값을 부여. 이 부분은 스텝 방식의 메뉴를 구성한다고 했을 때 유입경로나 데이터값에 따라 hidden 및 skip 요소가 발생하는 경우 활용할 수 있다. (심리스하게 구조를 짜면 그럴일은 별로 없겠지만) 그래도 이 부분도 잊지 말아야할 부분으로 보인다. 나중에 괜히 엄한 고생말고.

 

table은 음... 글쎄 조금 애매하다. 결국 div로 구성하거나 별도 grid 라이브러리를 활용하는 경우가 많을것 같아서. tr, td 도배하는 일은 최대한 없도록 ㅎㅎ 사전 구성을 하도록 하는것이 중요할듯.

 

Image & Multimedia

multimedia 쪽이야 이골이 나있고... 다만 video에서 poster 어트리뷰트는 흥미로웠다. html5에선 이게 제공되었었구나. 해당 경로를 잘 구성해놓으면 섬네일 방식으로 화면상의 어색함은 확실히 줄어들듯. 향후 적극 활용해야겠다.

 

Forms

여기서부터 시작이구나 ㅋ

 

기획자로서 항상 개발자에게 아쉬웠던 부분이 이곳이었다. 사용자에게 가장 최적의 입력경험을 선사하는 것은 기획자가 모두 정의하기에는 항상 2% 부족했었다. 다만 얕은 식견으로 프로퍼티를 어떻게 세팅해서 제공해야 하는지에 대한 인식이 있었는데 이 부분에 대한걸 이젠 스스로 체크할 수 있게 되었다. 특히 모바일까지 대응해야하는 프로덕의 경우 입력폼은 언제나 고민거리였고, 레퍼런스 체크 할때도 이 부분이 꼼꼼하게 구현되지 않은 부분들을 보면 혀를 끌끌 차던 터였다.

 

이 부분을 꼼꼼히 챙겨야지. 특히 Admin 세팅할땐 언제나 중요한 부분.

다만 이번 학습 내용에서 validation check 부분까지는 다루지 않아서 향후 더 들여다볼 부분이다.