[인스타UI클론][기획] 헤더 파트

Yungsang Hwang·2022년 4월 28일

clonecoding_instagram

목록 보기

1/4

작성 규칙

🟠 작성 상태
✅ 작성한 날짜를 기록함으로써 리마인드
✅ 작성한 프로젝트를 기록함으로써 프로젝트를 찾아볼 수 있음
✅ 작성 상태를 기술함으로써 수정된 이력 버전과 완성여부를 확인

🖋 기능 설명
✅ 레퍼런스 링크
✅ 사용된 기술에 대해 스스로 설명

🔨 프로젝트 적용
✅ 기획내용 작성, 작성한 계기를 기술
✅ 프로젝트에 사용한 코드를 한 줄씩 리뷰하는 것으로 코드 전체 이해 증명
✅ 코드를 설계한 내용과 왜 이렇게 작성했는지
✅ 완성 코드를 코드펜으로 보여주기

🟠 작성 상태

🟠 작성 날짜 : 0428, 2022

🟠 적용 프로젝트 : 클론코딩 - 인스타그램 UI, 반응형 웹 - 미디어 쿼리

🟠 작성 상태 : 작성중

🖋 기능 설명

🖋 레퍼런스 링크

🖋 기능에 대해 설명

▶

🔨 프로젝트 적용

🔨 프로젝트 기획, 작성 계기

🙄 HTML 헤더 기획서

🧿 하위구조 (괄호안의 문자열조합은 인스타그램에서 사용되는 클래스로 레퍼런스 참조를 위해 작성)

* 뼈대 구조 역기획
*
*   1. 헤더 header
*       - 헤더 전체로 묶어 가독성 올리기
*
*       2. 헤더 내부 묶음 div
*           - 헤더에서 내부 전체를 묶는 용도
*
*           3. 내비게이션 바 nav
*               - nav 태그를 적어서 가독성을 올려주기
*
*               4. 내비게이션 바 div
*                   - 내비게이션 바의 크기, 안쪽/바깥 여백
*
*                   4.1. 내비게이션 바 랩 flex div
*                       - 내비게이션 바 하위 태그의 아이템을 가운데로 정렬
*
*
*   5. 헤더 홈버튼 div
*
*       5.1. 페이지를 이동할 주소가 들어간 a 태그
*
*           5.2. 아이콘과 검색까지의 간격을 나누는 flex div
*
*               5.3. 아이콘 이미지를 넣는 div
*
*   5. 헤더 검색 div
*
*       5.1. 검색 아이콘, 글자 padding div
*
*           5.2. 검색 input tag
*
*           5.2. 가짜 검색 input tag
*
*               5.3. 가짜검색 인풋 flex div
*
*                   5.4. 검색 아이콘 i
*
*                   5.4. 검색 가짜 플레이스홀더 span
*
*           5.2. 검색 이후 내용 지우기 아이콘 div
*
*           5.2. 최근 검색항목 div
*
*               5.3. 최근 검색항목 뼈대 div
*
*   5. 헤더 아이콘즈 div
*
*       5.1. 아이콘 flex div
*
*           5.2. home 아이콘 div
*
*               5.3. home 아이콘 i
*
*           5.2. explore 아이콘 div
*               
*               5.3. explore 아이콘 i
*
*           5.2. plus 아이콘 div
*               
*               5.3. plus 아이콘 i
*
*           5.2. heart 아이콘 div
*               
*               5.3. heart 아이콘 i
*
*           5.2. profile 아이콘 div
*               
*               5.3. profile 아이콘 i

✅ CSS 스타일

백그라운드 (윈도우 데스크탑 1920.1080세팅)
1.헤더 파트
+++가로 100%, 세로 60px
+++흰색의 배경
+++위아래로 연회색의 보더 실선 1px
2.내비게이션 바
+++max-width : 975 px
+++padding : 20 px
+++display: flex
+++flex-direction : row
3.홈버튼 div
+++width : 333.5 px
+++height : 39 px
+++disply : flex
3.1.홈버튼 아이콘 이미지 div
+++가로세로
3.검색버튼 div
+++width : 268 px
+++height : 36 px
4.검색인풋 태그
+++가로 268 세로 36
+++fontsize : 16px
+++padding : 0 16px
5.검색인풋내부
6.검색인풋내부 내부 아이콘 배치 부분
+++display:flex
7.검색 아이콘
+++box-sizing : border-box
+++align-items : stretch
7.검색내용 지우기 아이콘
+++가로세로 20
!! 그만 더 길게 작성하기. 물고 늘어지지 말고 최대한 간결하게
3.아이콘 div
+++width : 333.5px
+++height : 24px
4.아이콘배치
+++아이콘 크기는 24x24
+++아이콘 마다 왼쪽 바깥여백 24px

✨ 내가 느낀 특이점

헤더 부분에서 아이콘을 포함한 상위 태그에서 간격까지 잡음 + FLEX 설정
간격 안에서 하위태그(이미지, 아이콘)가 오른쪽, 왼쪽으로 딱 붙는 CSS 설정

HTML 바디 기획서

하위구조

*   1. 메인 body
*
*   2. 스토리필드 field_story
*
*       3. 프레젠테이션 div   wrap_presentation
*
*           4. 프레젠테이션 프로필 div   presentation_profile
*
*               5. 프로필 이미지 div   presentation_profile_image
*
*               5. 프로필 이름 a     presentation_profile_name
*
*       3. 스토리카드 div    wrap_storycards
*
*           4. 스토리카드 상단 div   storycards_top
*
*               5. 스토리카드 상단 flex div    storycards_flex
*
*                   6. 스토리카드 상단 프로필 div    storycards_profile
*
*                       7. 스토리카드 프로필 이미지 div    stroycards_profile_image
*
*                       7. 스토리카드 프로필 이름 div     storycards_profile_name
*
*                   6. 스토리카드 상단 옵션 div     storycards_option
*
*           4. 스토리카드 중단 div     storycards_middle
*
*               5. 스토리카드 중단 캐러셀 div     storycards_carresel
*
*                   6. 스토리카드 캐러셀 이미지 div storycards_carresel_image
*
*               5. 스토리카드 중단 이미지 넘기기 아이콘 div     storycards_nextimage
*
*               5. 스토리카드 중단 태그 유저 아이콘 div       storycards_taguser
*
*               5. 스토리카드 중단 음소거 아이콘 div     storycards_muteicon
*
*               5. 스토리카드 중단 아이콘즈 div        storycards_icons
*
*                   6. 스토리카드 아이콘즈 flex div      storycards_icons_flex
*
*                       7. 스토리카드 레프트 아이콘 div        storycards_icons_left
*
*                           8. 스토리카드 레프트 아이콘 하트 div     storycards_icons_left_heart
*
*                           8. 스토리카드 레프트 아이콘 코멘트 div    storycards_icons_left_comment
*
*                           8. 스토리카드 레프트 아이콘 익스플로어 div      storycards_icons_left_explore
*
*                       7. 스토리카드 미들 아이콘 div         storycards_icons_middle
*
*                           8. 스토리카드 미들 아이콘 스테이터스 div   storycards_icons_middle_status
*
*                       7. 스토리카드 라이트 아이콘 div        storycards_icons_right
*
*                           8. 스토리카드 라이트 아이콘 북마크 div        storycards_icons_right_bookmark
*
*           4. 스토리카드 하단 div     storycards_bottom
*
*               5. 스토리카드 하단 좋아요 div     storycards_bottom_likes
*
*                   6. 스토리카드 하단 좋아요 스팬      storycards_bottom_likes_span
*
*                   6. 스토리카드 하단 좋아요 개수      storycards_bottom_likes_count
*
*               5. 스토리카드 하단 스토리 div     storycards_bottom_story
*
*                   6. 스토리카드 하단 스토리 아이디 div     storycards_bottom_story_user
*
*                   6. 스토리카드 하단 스토리 내용 div      storycards_bottom_story_simple
*
*                   6. 스토리카드 하단 스토리 더보기 버튼 div      storycards_bottom_story_morebtn
*
*                   6. 스토리카드 하단 스토리 작성일자 div    storycards_bottom_story_post
*
*               5. 스토리카드 하단 댓글 div      storycards_bottom_comment
*
*                   6. 스토리카드 하단 댓글 이모지 추가 div       storycards_bottom_comment_emoji
*
*                   6. 스토리카드 하단 댓글 인풋 div           storycards_bottom_comment_input
*
*                   6. 스토리카드 하단 댓글 게시버튼 div     storycards_bottom_comment_postbtn
*
*   2. 푸터필드 field_footer
*
*       3. 푸터 flex div  footer_flex
*
*           4. 푸터 프로필 div       footer_profile
*
*               5. 푸터 프로필 flex div  fotter_profile_flex
*
*                   6. 푸터 프로필 이미지 div       footer_profile_image
*
*                   6. 푸터 프로필 유저 div    footer_profile_user
*
*                       7. 푸터 프로필 유저 닉네임    footer_profile_user_nickname
*
*                       7. 푸터 프로필 유저 이름     footer_profile_user_name
*
*                   6. 푸터 프로필 전환 div        footer_profile_user_change
*
*           4. 푸터 추천 div        footer_recommend
*
*               5. 푸터 추천 상단부    footer_recommend_top
*
*                   6. 푸터 추천 소개     footer_recommend_top_intro
*
*                   6. 푸터 추천 보기     footer_recommend_top_view
*
*               5. 푸터 추천 중단부    footer_recommend_middle
*
*                   6. 푸터 추천 플렉스 div    footer_recommend_middle_flex
*
*                       7. 푸터 추천 리스트 묶음 div     footer_recommend_middle_list
*
*                           8. 푸터 추천 리스트 이미지 div       footer_recommend_middle_list_image
*
*                           8. 푸터 추천 리스트 유저 div     footer_recommend_middle_list_user
*
*                               9. 푸터 추천 리스트 유저 닉네임     footer_recommend_middle_list_user_nickname
*
*                               9. 푸터 추천 리스트 유저 추천이유        footer_recommend_middle_list_user_reason
*
*                           8. 푸터 추천 리스트 팔로우 div        footer_recommend_middle_list_follow
*
*           4. 푸터 정보 div        footer_info
*
*               5. 푸터 정보 내비게이션 div          footer_info_nav
*
*                   6. 푸터 내비게이션 리스트         footer_info_list
*
*               5. 푸터 정보 회사이름 div           footer_info_corp