HTML/CSS - <header>

header란?

[내 생각] HTML의 body 태그안에 최상단에 위치하여 사용자들에게 해당 문서(HTML)을 최대한 객관적으로 전달하고 어떤 내용들이 있는지 nav를 통해 리스트화 시키고, 때론 로그인/회원가입과 같은 시스템을 제공하면서 해당 웹 페이지의 이정표와 같은 역할을 한다고 생각한다.

 

<header> 태그는
일반적으로 말하는 웹 페이지의 맨 위에 있는 글로벌 헤더나,
글이나 콘텐츠의 서두[서론/서문/도입부]를 나타낼 때 사용합니다.

나는 내 생각을 정리하여 실제 이론과 비교하는걸 습관화 하려고 한다.

개발자는 너무나도 많은 정보의 사이에서 실제하는것과 실제하지 않는 정보를 가려내고, 결국 나의 성향이 코드로 보여지기 때문이다.

---

헤더를 다뤄야할까?

사실 header를 딥하게 다뤄야할까? 많이 고민했다. 하지만 초보자에게 웹페이지의 구조를 생각하며 모든 태그에 하나 하나 설명과 존재의 이유를 붙여주는데에 가장 기본이 되는것이라고 생각했고, 그것은 다행히도 정확하게 일치했다.

 

헤더의 구조에서 position태그의 명확한 사용 이유와 부모,자식 클래스의 관계를 많이 접했고, 이를 중점적으로 3번..4번 같은 페이지를 다시 만들기를 반복하며 다른 방식으로 접근했다.

 

이렇게 불필요한 행동을 한것은 사실 나는 너무나도 멍청해서 똑같은것을 반복해야하며, 같은 내용을 다른 방식으로 접근해보는것을 좋아하기 때문이다.. (정말 지금 생각해보니 토가 나온다..)

 

클래스를 각 가장 대표하는 태그로 클래스화 및 CSS 정리

위의 내용은 모든것을 position:relative 로 만든 내용이다.

아직 작성중에 있지만 1일 1포스팅이상을 준수하기 위해 무조건 배운것을 기록한다.

1. position:relative를 이용할 것.

2. 파일 분할을 대표하는 클래스로 분류해 볼 것.

---

기능별 구현

두번째로는 처음 html을 작성하며 코드를 익힐겸 제작하는 자기소개 HTMl 페이지이다.

1. position:fixed와 앱솔루트를 이용하여 개발 relative는 기본값이니 제외는 힘들었다.

2. 파일 분할을 기능별로 분류할 것.

---

이렇게 계속 진행하면서 느낀점은 파일 분할은 기능, 대표 태그 클래스로 나누기 그 무엇도 중요한것은 없었다.

제일 중요한 것은 다음과 같았다.

 

1. 개발전 확실한 구조를 파악하고 정리한 후에 진행할 것. 만약 개발하는 동시에 아이디어를 추가하는 스타일이라면 나는 무조건 클래스를 대표 클래스로 나누는것을 추천한다. 그 이유는 모든 코드를 두번 세번도 뒤집어야 하기 때문이다.(나도 알고싶지 않았다..)

2. 개발을 함에 있어서 GPT는 정말 정말 쓸모가 있으면서도 없었다. 일단 코드를 짜달라고 하는 족족 오류와 적용되지 않는 내용들... 아마 무조건 작동하는 코드일테지만 그 코드는 이미 모든것을 분류해버린 나에겐 정말 쓸모없는 참고자료일 뿐이었다.

때문에 작업간에 GPT보다는 구글링(나중가니까 구글링보단 GPT가 빠르더라 필요한 태그명을 검색하다보니...ㅎ)을 통해서 원하는 정보는 접하는 시간이 더 많았다.

3. 더욱 여러가지 방식으로 도전해봐야겠다. 처음 개발을 진행하고 두번째 진행을 할 때는 확실히 필요한 요소들이 눈에 보였고, 그에따라 응용하기도 하였고, 잘 안되는 내용은 처음과는 달랐다. 처음은 잘 안된다 그러면 완전 모르겠는것이었지만 이젠 "왜 안되는거지?" 라는 생각이 먼저 들고 "이게 안돼?"이런 생각이 들었다. 즉 80%는 되는데 20% 때문에 막혀서 GPT의 도움이 1도 도움안됬다. 

 

자...

다 정리 완료했다.

이제 코드를 다시 엎어봐야겠지?