오늘은 저번에 Login 페이지 구현에 이어서 그와 연동되는 main홈페이지를 제작하였다.
사실 나는 주말에 계속 코딩을 진행해서 따로 페이지를 만들었었다.
오늘의 포스팅 주제는 다른 홈페이지가 어떤식으로 코딩되고 구동되는지 알아보기 위함이다.
중점적으로 볼 사항은 아래와 같다.
1. 코드를 어떻게 묶었는가
2. <header>, <article>, <section>, <footer>, <nav>와 같은 시멘틱 태그들을 어떻게 적절하게 사용하는가?(사실 article, section은 드물 가능성이 높다)
3. JavaScript를 사용했다면, 어떻게 사용했는지와 HTML을 어디에 어떻게 무엇을 담는지
4. 전체적인 구동 방식과 레이아웃 설정
사실 그 외에도 배워봐야할 점은 많겠지만 많이 먹으면 배에 탈이나는법..
배울 수 있는 양을 배워 확실하게 기록하고 남겨가자!
참고한 사이트는 다음과 같다.
https://freehtml5.co/preview/?item=words-free-html5-bootstrap-template-multi-purpose
Words: Free HTML5 Bootstrap Template Multi Purpose - FreeHTML5.co
We use technologies like cookies to store and/or access device information. We do this to improve browsing experience and to show (non-) personalized ads. Consenting to these technologies will allow us to process data such as browsing behavior or unique ID
freehtml5.co
글씨가 정말 이게 맞나 싶겠지만 노력한 결과다 무시하지 않기를... ;o
일단 나는 나름 오픈소스로 나와있는 HTML을 열어서 확인해본 결과다..
<nav>는 다른 홈페이지로 연결되는 [Home, Work, Blog, about, contact]를 <li>로 묶은 구조였다.
좀 신기한건 이게 <body>의 첫 시작이길래 대체 어떻게? 이렇게 생각했는데... 이건 햄버거 메뉴를 정의해놓듯이 해놓은것이었다.(천잰가..?)
이후에 <header>로 시작을 하는데 header에는 정말 간단한 [twitter, facebook, instagram, dribbble(??), youtube]의 아이콘들이 들어있었다. (해외는 확실히 twitter가 유명한가..? 맨앞에 있네..)
이후부터가 <aside>인데 이게 이 홈페이지의 로고가 박혀있었다..(충격!!)
<div>로 본문을 처리하고 각종 사진과 우린 이런것들을 할 수 있어요! 템플릿으로 쓰세요!와 같은 느낌이었고,
마지막에 <footer>가 있었다. 개인적으로 내가 느끼기에는 본문의 내용들에 가장신경을 쓴 느낌이고 2순위가 footer 같았다.
footer는 3가지 종류로 나누어 구분을 지었는데, <ul>로 묶어 다시한번 다른 홈페이지들 + API + 팩스/이메일을 묶었다.
<div>묶은 내용은 약간 할말이 없었나 하고픈말을 적어놨더라
<p>내용은 흔히 알고있는 회사와 우린 어떤 언어를 사용했고 어디서 만든내용인지가 들어있었다.
다음으로는 CSS다.
CSS는 5가지로 나누었더라...
그래서 그런가 내용이 너무너무 방대했다. 7000줄이 넘어가는 녀석도 있었다..
물론 다 읽지 않았다. 이해하기도 힘들뿐더러 다합쳐서 거의 20000줄인데 어찌 다 찾아가며 읽겠나... 이건 GPT도 절레절레 할거다.
크게 애니메이션처리, 아이콘+폰트처리, 부트스트랩, 반응형 슬라이드, body레이아웃으로 나누었었다.
마지막으로 JavaScript다.
7가지로 나누었는데... 내가 개인적으로 생각하기엔 JQuery 시리즈는 인터넷에서 라이브러리를 추가한게 아닐까..? 생각한다.
부트스트랩, WayPoint(스크롤이벤트처리), 카운터(숫자 계산 모음), Flexslider, Main스크립트로 나뉘었다.
여기서 번외로 JQuery의 사용량은 점차 줄고 있다곤 하지만...여전히 한국의 기업에서는 많이 채택되어있는 기술이다.
내가 리액트를 배운다고해서 기업에 가면 무조건 사용할 수 있을것이라는 생각을 버려라.
개발자는 무슨 언어를 만나더라도 해결책을 풀이하는 과정의 시간을 돈으로 받는 직업일테니까 그냥 나는 해결책을 풀이하는 과정이 돈을 버는 과정이라고 생각하기로 했다...
그리고 해결책을 도출하는건 생각보단(?) 재미가 있다. (아마도?)
'딥 다이브(Front-End 8회차)' 카테고리의 다른 글
| [JS] const와 let의 차이 (0) | 2025.11.27 |
|---|---|
| 2025-11-21 / HTML의 개요 (0) | 2025.11.21 |