[Day 50] HTML / CSS 실습

📍목차
1. position
2. background
3. background_attachment
4. 선택자
5. font

visual studio

---

1. Position

• <div style="height: 1000px;"><div>
  스크롤 가능하게 아래로 늘린다.
• relative / absolute / fixed / sticky 의 차이 확인

---

2. Background

• 배경 이미지 넣어보기
  width / height를 지정하고 그에 따라 지정한 사이즈보다 작은 사이즈의 이미지라면 repeat된다.

---

3. Background_attachment

• display를 하지 않으면 텍스트가 아래로 떨어져서 겹친다.
• overflow: hidden
  텍스트가 배경 밖으로 넘친 것 숨기기
• overflow-y: scroll
  이미지 사이즈 내부에서 세로로 스크롤
• .attachment-fixed / scroll
  배경 고정된 상태로 텍스트 스크롤
• .attachment-local
  이미지와 텍스트가 함께 스크롤
• <div style="height: 1000px; width: 10px; background: blue;"></div>
  이미지 내부 말고 페이지 전체 스크롤을 만들어, 페이지 전체 스크롤로 attachment-scroll과 attachment-fixed의 차이를 확인

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

---

4. 선택자

• type 선택자
  h2{} / p{} 처럼 태그명으로 선언
• class 선택자
  .class명{} 형태로 선언
• 아이디 선택자
  #title{} 형태로 선언
  한 번만 사용 가능
• <span> 태그에 class 선언해서  텍스트 일부만 스타일 적용
• <br/> 줄바꿈 태그

---

5. Font

• class를 선언할 때, space로 여러개를 동시에 선언할 수 있다. 
• rem
  html{font-size: 16px}로 지정해뒀을 때, 그걸 기준으로 몇배 사이즈로 할지 정하는 것.
  ex. 2rem은 16*2=32가 된다.
• em
  부모요소 <div>가 베이스라인이 되고, 그걸 기준으로 몇배 사이즈로 할지 정하는 것
  ex. 기준이 될 <p>태그를 감싼 <div> 태그 써두기 → div의 폰트 사이즈가 10이면, 2em의 폰트 사이즈는 20

 

---

Contact Page

여러분이 평소 사용하는 서비스의 고객지원은 어떻게 이루어지고있나요?
고객 지원? 구매 문의? (애플서비스의)예약 일정 조율?
전체 페이지 형태인가요, 아니면 단순한 폼(Form)만 있는 구성인가요?
하나의 구체적인 상황을 떠올리고, 그 상황에서 가장 필요한 핵심 기능이 무엇일지 생각해보세요.
콘택트 페이지는 웹사이트에서 가장 많이 방문되는 페이지 중 하나이기 때문에, 가장 중요한 정보는 반드시 포함하되, 사용자가 길을 잃지 않도록 과도한 정보는 피하는 것이 중요합니다.

 

 

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

*NOL 인터파크 티켓과 쿠팡을 살펴보다가 편한점, 불편한점을 고려해서 섞었당 ㅎㅎ

💬 가장 내가 사용했을 때 편했던 경험을 바탕으로
자주 묻는 질문을 카테고리화 시켜서 빠르게 답을 찾을 수 있도록 하고,
필요한 내용이 없다면 검색으로 자세히 찾아볼 수 잇고,
플로팅 버튼으로 화면 하단에 fix 되어있는 상담하기를 누르고 세부적으로 전화/채팅을 골라서 문제해결할 수 있도록 만들어보았다.

개인적으로 쿠팡은 고객센터 찾기 어려웠다... 마이페이지 맨 아래 잘 안보이는 회색으로 작게 footer처럼 적혀있는.. 
게다가 상담하기 버튼이 눈에 띄지 않아서 고객센터를 찾아들어가도 살펴보며 찾아야되는게 불편해서 그런 점이 없도록 제작하려고 노력했다...!!!

다음엔 웹페이지 만들어서 호버효과도 만들어봐야징