<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
/* CSS 폴더를 따로 만들어 그 안에 css 파일을 추가한다.*/
/* css파일 연결 html코드 */
<link rel="stylesheet" href="(파일 경로)" />
/* 폰트 크기, 높이, 줄바꿈 처리 값을 입력해 구체적으로 설정해준다*/
/* CSS */
body {
font-size: 16px;
line-height: 1px;
font-family: /* 구글 폰트 */
word-break: keep-all;
}
텍스트가 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지, 아니면 말지 지정할 때 사용하는 속성이다.
normal
기본 줄 바꿈 규칙을 사용한다.
break-all
오버플로를 방지하기 위해 두 문자 사이에서도 줄 바꿈이 발생할 수 있다. (한중일 텍스트 제외)
keep-all
한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않는다. 단, 비 CJK 텍스트에서는 normal와 동일하다.
break-word
(지원이 중단)
실제 overflow-wrap 속성에 상관하지 않고, word-break: normal과 overflow-wrap: anywhere를 설정한 것과 같은 효과를 낸다.
<!--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 링크)" />
<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속성을 아래처럼 적용한다.
max-width: ??px;
)을 별도로 지정해 해당 값 아래로 줄어들면 메뉴의 가로 넓이가 알아서 조정되도록 설정margin: 0, auto
)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((이미지 또는 아이콘 경로));
'들여쓰기' 하거나 '내어쓰기' 기능을 가지는 속성
입력값이 양수이면 컨텐츠 박스를 기준으로 오른쪽으로 들여써지고, 음수일 경우엔 왼쪽으로 내어써진다. 값이 화면 크기보다 크면 아예 화면에서 보이지 않는다.
텍스트를 삭제하지 않고 이와 같은 방법을 사용해 화면에서 없애는 이유는 텍스트가 눈에 보이지 않을 뿐 그대로 남아있음으로써 아이콘 이미지와 함께 텍스트도 제공할 수 있기 때문이다.
대표적인 예시로 '시각장애인' 분들이 웹을 이용할 때 스크린 리더기라는 것을 사용하는데, 이 방법을 사용하면 스크린 리더기는 아이콘 대신 텍스트를 읽어준다. 즉, 메뉴 버튼이 아이콘으로 되어 있어도 시각장애인 분들도 해당 메뉴를 쉽게 찾을 수 있게 되는 것이다.
addEventListener
을 활용한다.최상위 클라스를 선택하면 하위 클라스까지 이벤트가 모두 적용된다. 이를 '이벤트 버블링'이라고 한다.
이벤트가 더 이상 상위 클라스까지 적용되지 않도록 해주는 코드이다.
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 드롭다운 메뉴가 자연스럽게 나타나고 사라지는 효과를 준다.
이때 display: none
대신 visibility: hidden
을 사용한다. (반대로 나타나는 클라스엔 display: block
대신 visibility: visible
을 사용한다.) 전자는 아무리 transition을 걸어줘도 효과가 적용되지 않는다.
화면 전환이 ~초에 걸려 이루어지도록 속성을 적용해준 뒤, opacity
를 각각 0과 1로 설정해주면 투명도가 점차 올라가거나 낮아지면서 마치 메뉴가 천천히 나타났다가 다시 사라지는 것처럼 보인다.