[동아리 소개 페이지 만들기] 2. 기본 페이지 틀 구현하기 - Header, Footer

1) Header 구현하기

Header에는 동아리의 로고와 네비게이션 바가 들어간다.

동아리 로고를 클릭하면 홈 화면으로 이동하고 나머지 링크들을 입력하면 해당 페이지로 이동한다.

동아리 로고

Header의 왼쪽에는 i태그를 이용하여 동아리의 로고를 넣었다.

link들

Header이 오른쪽에는 다른 페이지로 연결되는 link들을 넣었다. 이 과정에서 ui와 li 태그를 이용하였으며 미리 navigationLinks의 배열을 만들고 데이터 바인딩을 통해 map함수로 넣어 주었다.

2) Footer 구현하기

Footer에는 홈페이지의 정보와 다른 계정들이 들어간다.

왼쪽에는 개발자들의 정보, copyright문구를, 오른쪽에는 로고들, 관련 사이트의 아이콘을 넣어 주었다.

아이콘을 클릭하면 해당 사이트로 이동한다.

 

2. 문제 해결 과정에서 배운 것들

• 웹페이지의 기본 구성
  일반적인 사이트의 기본 구성에 대해 알 수 있었다.
  https://velog.io/@sanglee/HTML-%EA%B3%B5%EA%B0%84%EC%9D%84-%EB%A7%8C%EB%93%A4-%EB%95%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%ED%83%9C%EA%B7%B8-headr-main-footer
• 시멘틱 태그
  기본 Header와 Footer을 구현하는 과정에서 시멘틱 태그에 대해 공부하였다.
  https://wondrous-developer.tistory.com/182
• 기본적인 JSX
  https://ko.legacy.reactjs.org/docs/introducing-jsx.html
  

velog

시맨틱 태그

JSX 소개 – React

3. 느낀점

CSS를 적용하는 과정에서 삽질을 엄청 했다. 속성이 겹쳐서 적용이 안될 때가 많았는데 이 문제를 해결한 후 CSS의 속성에 대해 많이 알게 되었다. CSS는 노가다이다.....