위와 같은 코드가 있다면 이미지 태그에서 alt 경우 이미지 로드가 안되었을 때, 사용할 수 있다. 이미지 로드가 되지 않았을 때, 혹은 시각 장애인을 위한 스크린 리더로 사용된다. 이미지가 로드가 되지 않았을 때, 사용자에게 중요한 정보를 전달하는 역할을 한다. 여기서 title은 마우스 호버를 했을 때, 이 이미지에 대한 설명을 보여줄 수 있는데,  이는 흔히 툴팁이라고 한다. 아래 사진을 보면 유튜브의 구독 버튼인데, 마우스를 올려 놨을 때 일정시간이 흐르게 된다면 아래와 같이 보여지게 된다. 둘다 어찌 보면 비슷한 기능을 하고 있다. 그래서 이거 둘다 사용해? 아니면 하나만 사용해? 라고 물었을 때는 당연하게 둘다 사용하자 이다.그 이유는 alt의 경우는 seo 측면에 이점을 가지고 있으며, ti..

1. 상대 단위란?상대(relative) 단위란 고정되지 않고, 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 여기서는 rem과 em를 다룰 것인데, 상대 단위에서 대표적인 것은 %, vw, vh 등이 있다. 반면 절대(absolute) 단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다. 대표적으로 px, pt를 들 수 있으며, 실생활에서는 cm, inch 등과 같은 것들이 있다. 2. em, rem 공통점여기서 em과 rem은 둘다 font-size 속석값에 비례해서 결정되는 상대 단위이다. 만약 font-size: 16px 일 경우 다음과 같이 브라우저에서 계산이 된다0.5em = 16px * 0.5 = 8px1em = 16px * 1 = 16px2em = 16p..

1. font-family : serif이는 보통 명조체를 뜻한다. 2. font-family: sans-serifsans가 붙으면 고딕체이다. font-family: 'arial', sans-serif; 이는 맨처음 arial를 적용하고 적용이 안될 시 쉼표(,) sans-serif를 적용한다 라는 뜻이다. 그리고 font-family: monospace가 있는데,이는 글자 간격이 동일한 것인데 보통 코드 관련 글씨는 이러한 적용을 받는다. 예를 들면) 1111, 2222, 3333, abcd 라는 글자가 있다면, 특성상 서로 다른 너비를 보여야 하는데, monospace를 하면 글자의 간격들이 동일해진다.  그리고 폰트를 적용할 시에 로컬 폰트가 있고 웹 폰트가 있는데, 로컬 같은 경우는 내 컴퓨터에..

1. 제어문제어문(control flow statement)은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.하지만 코드의 실행 순서가 변경된다는 것은 단순히 위에서 아래로 순차적으로 진행하는 직관적인 코드의 흐름을 혼란스럽게 만든다.따라서 제어문은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다. 가독성이 좋지 않은 코드는 오류를 발생시키는 원인이 된다. 나중에 살펴볼 forEach, map, filter, reduce 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하려고 노력한다.제..

object-fit: cover,cover: 이는 background-size: cover와 같은 기능을 하게 된다.빈 공간에 대해서 가로 혹은 세로로 늘려주지만, 공간에 맞게 늘린다. 하지만 필연적으로 가로를 늘리면, 세로가 잘릴 수도 있고, 세로를 늘리면 가로가 잘리 수도 있다.containcontain : 이것은 background-size: contain 와 같은 기능을 하게 되며, 이미지를 전체적으로 보여준다. 여백이 생기더라도 컨테이너 기준으로 해당 이미지를 무조건 연출하게 한다. 비율은 유지되며, 사이즈는 조정이 되어 보여지게 된다.위와 같은 내용으로, 어떤 이미지를 div공간 안에서 이미지의 전체 모습을 보여주게 하며, 여백이 생겨도 이미지를 전체적으로 보여주게 한다.

1. aspect-ratioaspect-ratio는 에전에 한 번 다룬 적이 있다. 여기서 좀 더 추가하자면aspect-ratio는 비율을 유지하는 블록 레벨 요소를 만드는 것이다. 예를 들면 16 대 9와 같은 비율을 만들어낸다. 이러한 비율을 유지하기 위해서 몇가지 속성을 더 추가해야 한다. min-height: 0auto를 주지 않는 이유는 auto의 경우 내부 콘텐츠 높이만큼 강제로 커지게 만드며, 유연하게 가능하지만 내부컨텐츠가 많아지면 요소 또한 커지게 되므로 auto을 주게되면 비율이 유지가 되지 않는다. 그래서 0을 주는 이유는, 내부 컨텐츠의 높이와 관계 없이 이미지가 aspect-ratio가 유지되게 한다.overflow: hidden이는 자식요소가 부모요소고와 분리되게 만드는 속성이다..