iPad 웹사이트 제작

J.A.Y·2023년 9월 25일
클론 코딩
0

프로젝트

목록 보기
1/5

html, css, javascript로 만드는 iPad 웹사이트

[1] CSS 기본값 초기화 및 웹 폰트 적용하기

  1. 구글에 'css reset cdn' 검색해서 아래 코드를 가져온다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
  1. 폰트는 강사님께서 Apple SF Pro 폰트(유료)와 가장 유사하다고 하셨던 구글의 Roboto(영문), Noto Sans KR(한문)을 적용한다. 구글 폰트에 검색하면 html코드와 css코드를 쉽게 찾을 수 있다.
/* CSS 폴더를 따로 만들어 그 안에 css 파일을 추가한다.*/
/* css파일 연결 html코드 */
	<link rel="stylesheet" href="(파일 경로)" />
/* 폰트 크기, 높이, 줄바꿈 처리 값을 입력해 구체적으로 설정해준다*/

/* CSS */
body {
    font-size: 16px;
    line-height: 1px;
	font-family: /* 구글 폰트 */
    word-break: keep-all;
}

Word-break

텍스트가 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지, 아니면 말지 지정할 때 사용하는 속성이다.

normal
기본 줄 바꿈 규칙을 사용한다.

break-all
오버플로를 방지하기 위해 두 문자 사이에서도 줄 바꿈이 발생할 수 있다. (한중일 텍스트 제외)

keep-all
한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않는다. 단, 비 CJK 텍스트에서는 normal와 동일하다.

break-word (지원이 중단)
실제 overflow-wrap 속성에 상관하지 않고, word-break: normal과 overflow-wrap: anywhere를 설정한 것과 같은 효과를 낸다.

  1. 오픈 그래프와 트위터 카드로 웹페이지를 소셜 미디어로 공유할 때 유저에게 가장 먼저 내보일 정보를 지정한다. 코드는 아래와 같다. 
<!--Open Graph-->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="ooo (KR)" />
<meta property="og:title" content="ooo" />
<meta property="og:description" content="(컨텐츠 설명)" />
<meta property="og:image" content="./images/ooo.png" />
<meta property="og:url" content="(웹 url 링크)" />

<!--Twitter Card-->
<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="ooo (KR)" />
<meta property="twitter:title" content="ooo" />
<meta property="twitter:description" content="(컨텐츠 설명)" />
<meta property="twitter:image" content="./images/ooo.png" />
<meta property="twitter:url" content="(웹 url 링크)" />

[2]. Header 만들기 (메뉴바, 메뉴 아이콘, 드롭 메뉴...)

  1. index.html의 body태그 안에 header, inner, menu, a태그를 만든다.
<header>
    <div class="inner">
      <ul class="menu">
        <li class="(클라스 이름)"><a href="javascript:void(0)">(메뉴 이름)</a></li>
        <li class="000-starter"><a href="javascript:void(0)">(드롭다운 버튼 메뉴 이름)</a></li>

아직 아무런 css를 적용해주지 않은 상태이기에 메뉴들이 수직으로 쭉 정렬되어 나타난다.
완성된 헤더 모습을 만들기 위해 css의 flex속성을 아래처럼 적용한다.

flex로 메뉴 중앙 정렬하기

  1. 각 메뉴들을 중앙으로 정렬시켜줬다면 세부적인 설정을 해준다.
    • 글자 색상은 #f5f5f5, 헤더의 배경색은 #3a3a3a
    • 글자 underline 없애기 (text-decoration: none)
    • 글자 색이 선명해지는 hover 효과를 주기 위해 opacity는 약간 불투명하게
    • 헤더의 이너 최대 넓이값(max-width: ??px;)을 별도로 지정해 해당 값 아래로 줄어들면 메뉴의 가로 넓이가 알아서 조정되도록 설정
    • 이너 중앙 정렬하기 (margin: 0, auto)
  1. 메뉴들 중 'Appe', '검색', '장바구니' 텍스트를 아이콘으로 대체한다. (hover 효과 전에)
    • 우선 css에서 세 메뉴의 클라스를 묶고 화면상 출력할 아이콘의 비율을 조정한다.
    • 그런 뒤 각 컨텐츠의 배경을 아이콘으로 설정한다. 
header ul.menu li.apple-logo a,
header ul.menu li.search-starter a,
header ul.menu li.basket-starter a {
	width: 14px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: center;
}
/* 배경에 이미지 삽입 방법 */

background-imgae: url((이미지 또는 아이콘 경로));

Text-indent : Why the text-indent's value is '-9999px'?

'들여쓰기' 하거나 '내어쓰기' 기능을 가지는 속성

입력값이 양수이면 컨텐츠 박스를 기준으로 오른쪽으로 들여써지고, 음수일 경우엔 왼쪽으로 내어써진다. 값이 화면 크기보다 크면 아예 화면에서 보이지 않는다.

텍스트를 삭제하지 않고 이와 같은 방법을 사용해 화면에서 없애는 이유는 텍스트가 눈에 보이지 않을 뿐 그대로 남아있음으로써 아이콘 이미지와 함께 텍스트도 제공할 수 있기 때문이다.

대표적인 예시로 '시각장애인' 분들이 웹을 이용할 때 스크린 리더기라는 것을 사용하는데, 이 방법을 사용하면 스크린 리더기는 아이콘 대신 텍스트를 읽어준다. 즉, 메뉴 버튼이 아이콘으로 되어 있어도 시각장애인 분들도 해당 메뉴를 쉽게 찾을 수 있게 되는 것이다.

  1. 장바구니 드롭다운 메뉴를 아래와 같이 만들어준다.

  • 파란색 동그라미 표시가 있는 부분 만드는 방법 :

  1. 장바구니 아이콘을 클릭하면 드롭다운 메뉴들이 나타나고, 다시 클릭하면 드롭다운 메뉴들이 사라지도록 하기 위해 JS addEventListener을 활용한다.
    원리는 아래와 같다.

최상위 클라스를 선택하면 하위 클라스까지 이벤트가 모두 적용된다. 이를 '이벤트 버블링'이라고 한다.

stopPropagation() : preventing event bubbling

이벤트가 더 이상 상위 클라스까지 적용되지 않도록 해주는 코드이다.

classList : 특정 이벤트가 발생했을 때 html 클라스를 제어하다. (JS+CSS)

html의 클라스를 자바스크립트에서 제어할 때 사용하는 속성으로 예를 들어 부모 클라스에 자식 클라스가 들어있는지 확인하는 parent.classList.contains('child') 처럼 쓰일 수 있다. 또는 class를 별도로 추가하거나 제거할 수도 있다.

해당 기능을 이용해서 장바구니 드롭다운 메뉴에 전환 효과를 줄 수 있다.

For example:

/*css*/
.child {
	display: none;
    border: 10px solid;
}

.child.show {
	display: block;
}
//jvascript
const parentEl = document.querySelector('.parent')

const childEl = document.querySelector('.child')

parentEl.addEventListener('click', function () {
	if (childEl.classList.contains('show')) {
		childEl.classList.remove('show')
	} else {
		childEl.classList.add('show')
	}
});

Transition 자연스러운 화면 전환 효과

transition 드롭다운 메뉴가 자연스럽게 나타나고 사라지는 효과를 준다.

이때 display: none 대신 visibility: hidden을 사용한다. (반대로 나타나는 클라스엔 display: block 대신 visibility: visible을 사용한다.) 전자는 아무리 transition을 걸어줘도 효과가 적용되지 않는다.

화면 전환이 ~초에 걸려 이루어지도록 속성을 적용해준 뒤, opacity를 각각 0과 1로 설정해주면 투명도가 점차 올라가거나 낮아지면서 마치 메뉴가 천천히 나타났다가 다시 사라지는 것처럼 보인다.

profile
J.A.Y
Done is better than perfect🏃‍♀️
다음 포스트

첫 협업! 프로젝트 회고와 앞으로의 방향

0개의 댓글