Skip to content

M-Moong/ID-NUMBER

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

227 Commits
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
tailwind.config.js
tailwind.config.js
 
 

Repository files navigation

[ 멋쟁이 사자처럼 🦁 프론트엔드 스쿨 6기 | HTML/CSS 팀프로젝트 ]

프로젝트 |   TAING

🔗  배포 주소 : https://taing.netlify.app/


OTT 서비스 웹사이트를 반응형으로 구현합니다.


main_work


📄 목차

  1. 팀 소개 | 13조 주민등록번호

  2. 개발 기간

  3. 구현 페이지

  4. 기술 스택

  5. 코딩 컨벤션

  6. 코드 리뷰

    1. 주요 이슈
    2. 메인 페이지
    3. 로그인 관련 페이지

  7. 문법 검사

  8. 크로스 브라우징

  9. 성능 최적화

  10. 프로젝트 한줄평


👥 팀 소개 |   13조 주민등록번호

프로필 이름 GitHub
신승민(팀장) https://github.com/M-Moong
고명현 https://github.com/gobeeisfree
김다인 https://github.com/kimInDa
신현주 https://github.com/shju0317

⏰ 개발 기간

2023년 6월 22일

  • 아이스 브레이킹

2023년 6월 23일

  • 기술 스택, 코딩 컨벤션, 접근성 체크리스트, 구현 페이지 범위 확정
  • 개발 환경 셋팅
  • 파트 배분

2023년 6월 24일 ~ 6월 25일

  • 개인 파트 구현

2023년 6월 26일

  • 개인 파트 함께 디버깅

2023년 6월 27일

  • 모두의 작업물 merge & 디버깅
  • 구현 페이지 추가 & 작업
  • README 작성

2023년 6월 28일

  • 과제 제출

🖥️ 구현 페이지

구분 모바일(320px) 태블릿(768px) 데스크톱(1920px)
메인
로그인
아이디 찾기
비밀번호 찾기
회원가입

🛠️ 기술 스택

HTML

CSS

   

Package Manager

Git

   


📖 코딩 컨벤션

CSS 프레임워크

  1. 주민등록번호조의 CSS 프레임워크는 Tailwind를 사용한다.

네이밍 규칙

  1. 커스텀 CSS 클래스명은 BEM 패턴을 사용한다. (예시) .form__input

  2. BEM패턴은 class에서 사용되는 방법론이므로 id나 label, name 에서는 카멜케이스를 사용한다.

들여쓰기 규칙

  1. tab 간격은 2칸으로 한다.

  2. 줄바꿈은 각자의 작업 방식에 따라 자유롭게 한다.

  3. CSS 주석 방식은 한 줄이든 여러줄이든 /* */ 로 한다.

  4. 따옴표는 “ “ 겹따옴표를 사용한다.


ℹ️ 코드 리뷰 |   주요 이슈

반응형 스크린

screens: {
  mobile: {'min': '320px', 'max': '767px'},
  tablet: {'min': '768px', 'max': '1199px'},
  desktop: {'min': '1200px', 'max': '1920px'}
}
  • 모바일,태블릿, 데스크탑에 따른 반응형 스크린을 위하여 tailwind.config.js 파일에 각 스크린의 크기를 지정합니다.

메인 페이지 section별 횡스크롤

scroll-test

<section>
  <h2>섹션별 제목</h2>
  <ul class="flex overflow-y-hidden scroll">
    <li class="shrink-0 w-[14.8vw] min-w-[139px] max-w-[285px]"><a href="#"><img /></a></li>
     .
     .
  </ul>
</section>
  • 섹션 내 콘텐츠를 ul 또는 ol을 사용하여 리스트화 합니다.
  • ul 또는 ol에 flex를 사용하여 콘텐츠 리스트를 가로 정렬 합니다.
  • 리스트 내부의 콘텐츠 li가 부모 ul 또는 ol의 범위를 벗어날 경우, 부모요소에 가려지면서 스크롤이 발생하도록 overflow-y-hidden 속성을 부여합니다.
  • css 스타일링으로 화면상에서 스크롤바를 숨깁니다. 
    .scroll::-webkit-scrollbar {
  display: none;
}
  • 각 콘텐츠의 크기가 부모의 flex box 크기가 아닌 뷰포트에 따라 크기가 변화하도록 각 콘텐츠 li에 shrink-0 속성을 부여하고 width 값을 vw단위로 지정합니다.

ℹ️ 코드 리뷰 |   메인 페이지

Head

<title>TAING</title>
<meta name="description" content="타잉 오리지널 콘텐츠, 방송, 영화, 해외시리즈까지! 재미를 플레이해보세요.">
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
  • title로 HTML 문서 전체의 제목을 나타냅니다.
  • meta의 content 속성으로 검색 엔진에서 해당 사이트의 정보를 표시하고 검색 될 수 있도록 합니다.
  • link의 shortcut icon 속성으로 파비콘을 설정하여 꾸며줍니다.

Main

header

main_header_markup2

  • header의 마크업 순서는 키보드 사용자와 스크린리더 사용자의 접근성을 고려하여 로고 제목, 검색, 네비게이션의 순서로 합니다.
  • 시안의 순서로 바꾸어 주기 위해 header에 flex를 지정해주고 2번 ol의 order를 2로 지정합니다.
  • 1번 로고는 클릭 시 메인 페이지로 이동할 수 있어야 하므로 a의 background-image로 넣어주고 aria-label로 대체 텍스트 "타잉"을 지정합니다. 페이지의 대제목이 될 수 있도록 h1을 부모요소로 합니다. 
    <h1>
  <a href="#" aria-label="타잉" class="bg-[url('/images/icon-logo.svg')] bg-no-repeat"></a>
</h1>
  • 2번 검색 아이콘은 button의 background-image로 넣어주고 aria-label로 대체 텍스트 "검색"을 지정해 줍니다.
  • 2번 프로필 사진은 클릭 시 마이페이지로 이동할 수 있도록 a로 마크업 하고, background-image로 프로필 이미지를 넣어준 뒤 aria-label로 대체 텍스트 "마이페이지"를 지정해 줍니다.
  • 3번 네비게이션은 mobile:hidden으로 모바일에서는 보이지 않게 합니다.
  • 3번 네비게이션을 스크린리더 사용자에게 메인메뉴 임을 알려주기 위하여 <h2>메인메뉴</h2>에 sr-only 속성을 사용합니다.

타이틀 배너

title banner

  • article 태그 안 메인이 되는 이미지를 figure 태그안에 배치하고 figcaption으로 설명을 적어 배치합니다.
  • 해당 이미지에 대한 자세히보기 button 첫번째, 다음으로 슬라이드 기능으로 동작할 이전, 다음 화살표 모양 button 그리고 마지막으로는 pagination 기능을 할 button 순으로 마크업 합니다.
  • 이전, 다음 화살표 모양 button은 해당 기능이 이미지의 좌·우의 각 세로 어디를 눌러도 동작할 수 있도록 height에 100%를 지정합니다.
  • 접근성
    • 이전, 다음 화살표 모양 button에 aria-label 값으로 각각 이전 슬라이드, 다음 슬라이드를 지정합니다.
    • pagination 기능을 할 button에 aria-label 값으로 각각 n번째 슬라이드를 지정합니다.

티빙에서 꼭 봐야되는 콘텐츠

image
  • h2로 섹션의 제목을 구성했습니다.
  • ol>li로 각 이미지들의 리스트를 구현하였고, <a>로 figure를 감싸 링크 형식으로 작성하였습니다.
  • <img>와 <figcaption>을 <figure>로 감싸 독립적으로 포스터에 제목을 나타냈습니다.
  • 횡 스크롤은 overflow-y-hidden을 주어 좌우 이동될수있게 표현하였습니다. (section별 횡스크롤)

Quick VOD

image
  • h2로 섹션의 제목을 구성했습니다.
  • ol>li로 각 이미지들의 리스트를 구현하였고, <a>로 figure를 감싸 링크 형식으로 작성하였습니다.
  • 포스터의 제목과 설명은 dl>(dt+dd)*2의 구조로 dt는 aria-label로 숨김처리를 하였고, dd가 무슨 역할인지 설명할수 있도록 작성하였습니다.

실시간 인기 프로그램

favorite

  • 순위와 프로그램명을 a 태그 안에 배치해 링크 영역에 속할 수 있도록 합니다.
  • 순위와 프로그램명을 dl 태그로 구성하고 화면에 보이지 않는 부분은 dt 태그, 보이는 부분은 dd 태그에 정의합니다.
    • dt의 텍스트 노드에 빈 값을 주고 aria-label에 각각 순위, 프로그램명 이라는 값을 줍니다. 
      <dl>
  <dt aria-label="순위"></dt>
  <dd>1</dd>
  <dt aria-label="프로그램명"></dt>
  <dd>황혼: 빛과 그림자</dd>
</dl>

인기 LIVE 채널

live

  • 실시간 인기 프로그램 섹션과 동일한 구성으로 마크업
  • 순위와 채널명, 프로그램명, 시청률을 a 태그 안에 배치해 링크 영역에 속할 수 있도록 합니다.
  • 순위와 채널명, 프로그램명, 시청률을 dl 태그로 구성하고 화면에 보이지 않는 부분은 dt 태그, 보이는 부분은 dd 태그에 정의합니다.
    • dt의 텍스트 노드에 빈 값을 주고 aria-label에 각각 순위, 프로그램명 이라는 값을 줍니다. 
      <dl>
  <dt aria-label="순위"></dt>
  <dd>1</dd>
  <dt aria-label="채널명"></dt>
  <dd>JTBC</dd>
  <dt aria-label="프로그램명"></dt>
  <dd>JTBC 뉴스룸</dd>
  <dt aria-label="시청률"></dt>
  <dd>27.9%</dd>
</dl>

오직 티빙에만 있어요, 이벤트

only_markup event_markup

<section>
  <h2>섹션 제목</h2>
  <ul class="flex gap-[10px] overflow-y-hidden scroll">
    <li class="shrink-0 w-[18vw] min-w-[145px] max-w-[346px]">
      <a href="#">
        <img src="이미지 경로" alt="대체 텍스트"/>
      </a>
    </li>
    .
    .
  </ul>
</section>
  • section의 제목을 h2로 마크업 합니다.
  • 콘텐츠 목록은 순서가 없는 ul과 li로 마크업 합니다.
  • 각 콘텐츠는 클릭 시 해당 프로그램의 정보 페이지로 넘어가야하므로 img의 부모 요소로 a를 마크업 합니다.
  • ul에 overflow-y-hidden 속성을 이용하여 횡스크롤이 생기도록 합니다. (section별 횡스크롤)
  • img의 alt 속성을 이용하여 스크린 리더 사용자에게 해당 이미지의 대체 텍스트를 줍니다.

광고

광고

<section class="mobile:pr-[8px] tablet:pr-[40px] desktop:pr-[70px] mobile:py-4 tablet:py-7 desktop:py-9 ">
  <h2 class="sr-only">광고</h2>
  <figure class="min-w-[304px] max-w-[1780px]">
    <img src="/images/sports-1.jpg" />
    <figcaption class="sr-only">타빙 스포츠 경기 생중계 UFC 월드복싱 슈퍼매치 분데스리가 AFC 챔피언스리그</figcaption>
  </figure>
</section>
  • 해당 section의 제목인 "광고"를 h2로 마크업하고 sr-onyl(a11yHidden) 속성으로 스크린 리더에 정보를 제공하면서 화면에서는 숨깁니다.
  • 광고 이미지는 figure를 부모 요소로 하여 img로 마크업 합니다.
  • img에 대한 대체 텍스트로 figcaption 을 마크업하고 화면에는 보이지 않도록 sr-onyl(a11yHidden) 속성을 부여합니다.

footer

image
  • 가로 구분선의 위의 요소들은 flexbox를 주어 좌우로 배치를 하였습니다.
  • 가로 구분선은 아래요소의 border-top을 주어 나타내었습니다.
  • div>ol>li 도 flexbox를 주어 가로로 배치를 하였고, 밑줄있는 요소는 a태그의 underline을 주어 밑줄을 표현하였습니다.
  • mail요소는 a 태그에 mailto를 주어 바로 메일을 작성할수 있도록 하였습니다.
  • 아래의 아이콘은 a 태그에 image를 넣어 구현하였습니다.


ℹ️ 코드 리뷰 |   로그인 관련 페이지

로그인

login_markup

  • 로그인 페이지에는 서버로 전달되어야 하는 정보(아이디, 비밀번호 등)가 있기 때문에 form태그로 마크업합니다.

  • 아이디와 비밀번호 input에 label을 지정하여 어떤 입력란인지에 대한 정보를 제공합니다. label에는 sr-only 클래스를 지정하여 스크린리더는 읽되 화면에는 보이지 않도록 합니다.

      <!-- 아이디 -->
<div class="w-[38vw] min-w-[288px] max-w-[732px] h-[5vw] min-h-[46px] max-h-[96px]">
  <label for="userId" class="sr-only">아이디</label>
  <input id="userId" name="userId" class=" form__input border p-4 outline-none rounded login__txt w-full h-full"
    type="text" placeholder="아이디" required />
  </div>

  • border를 지정하여 focus를 받고 있는 요소를 알 수 있도록 합니다.

    /* focus되면 빨간색 border 적용 */
.form__input:focus{
border: 2px solid #ff153c;
}

  • input에 required속성을 주어 아이디와 비밀번호를 입력하지 않고 버튼을 누를 경우 메시지를 띄우도록 합니다. image-2

  • background-image로 체크이미지를 표현할 경우 해당 이미지에는 탭할 수 없습니다. 키보드로도 접근할 수 있도록 input요소와 background-image의 크기와 위치를 조정합니다.
    image-1

      <!-- 자동 로그인 --> 
  <div class="flex relative mt-4 mb-10">
    <input
      class="auto-login appearance-none absolute top-1/2 -translate-y-1/2 w-[26px] h-[26px] checked:bg-checkbox-checked"
      type="checkbox" id="autoLogin" name="autoLogin" />
    <label for="autoLogin" class="pl-9 bg-checkbox-default bg-no-repeat bg-left text-lg">자동 로그인</label>
  </div>

  • border-right를 지정하여 아이디 찾기와 비밀번호 찾기 사이의 구분선을 표현합니다.

    image-3


아이디 찾기

  • input을 type="email"로 지정하여 이메일 형식으로 입력하지 않는 경우 메시지를 보여줍니다.

    image-5

  • before와 after 가상요소를 사용하여 구분선을 표현합니다. 구분선이 가운데에 위치하도록 my-auto를 지정합니다.

    <!-- 구분선 -->
      <div class="flex w-[38vw] min-w-[288px] max-w-[732px] my-24 text-base text-gray-700 align-middle before:content-[''] before:flex-grow before:h-[1px] before:bg-gray-700 before:my-auto before:mr-4
      after:content-[''] after:flex-grow after:h-[1px] after:bg-gray-700 after:my-auto after:ml-4">또는</div>

    image-4


비밀번호 찾기

  • form 태그 안에 전체요소를 감싸는 fieldset으로 영역을 지정합니다.

  • legend는 화면에 표시되지 않기 위해 sr-only class를 추가합니다.

  • div으로 스타일링 할 영역을 감싸줍니다.

  • p 태그에는 비밀번호 찾기에 대한 텍스트를 작성합니다.

  • sr-only 속성 추가로 화면에 보이지 않는 label 태그와, placeholder에 아이디를 포함한 input 태그로 화면과 같이 구현합니다.

  • <form>
    <fieldset>
      <div>
        <p></p>
        <label></label>
        <input/>
        <button></button>
      </div>
    </fieldset>
</form>

회원가입

image
  • form 태그에 flexbox를 요소를 추가해 item들이 세로정렬을 할수 있게 구현하였습니다.
  • Legend와 p태그를 이용하여 제목과 설명을 배치하였습니다.
  • 아이디와 비밀번호 박스의 구성은 div>label+input+div로 구성하여 배치하였습니다.
  • 약관사항의 요소들은 flexbox의 column으로 배치하였습니다. 각 아이템들은 text는 label로 구성하였고, checkbox이미지는 input으로 구성했습니다.
  • input의 타입은 checkbox로 설정하였고, checked시 이미지를 교체하여 체크표시가 되게끔 구현했습니다.

🔎 문법 검사

구현한 페이지들에 문법 검사를 시행한 결과 에러가 없음을 확인합니다.

메인

main_checker

로그인

login_checker

아이디 찾기

findId_checker

비밀번호 찾기

findPassword_checker

회원가입

join_checker


💻 크로스 브라우징

각 모던 브라우저 Chrome, Firefox, Safari, Edge 환경에 맞춰 구현됨을 확인합니다.

browsers-chrome Chrome browsers-firefox FireFox browsers-safari Safari browsers-edge Edge

⚙️ 성능 최적화

Core Web Vitals를 사용하여 웹사이트의 성능 최적화를 검사합니다.

데스크톱

checker-desktop

휴대전화

checker-mobile


📝 프로젝트 한줄평

프로필 이름 한줄평
신승민(팀장) 프로젝트를 통해 HTML과 CSS에 대해 좀더 고민할수 있는 시간을 가져서 좋았습니다. 그리고 다른 사람들과 하는 협업에 대해 많이 배운것 같습니다.
고명현 UI 구현을 하며 아직 많이 부족하다는 것을 깨달았고, 그 부분을 좋은 팀원분들과 채워나갈 수 있는 좋은 시간이었습니다.
김다인 함께 길을 찾는 즐거움.
신현주 프로젝트를 하며 협업에 대해 많이 알아가는 좋은 시간이었습니다.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages