1. justify-content / align-contentjustify-content, align-content의 초기값은 stretch이다.여기서 원래 초기값은 normal이지만, flexbox에서는 flex-start, grid는 stretch이다.-> normal로 설정된 이유는 범용적으로 사용할 수 있게 개발자들이 설정해둔 것이다. 원룸(가상 컨테이닝 블록)자체의 너비가 최대치로justify-content: stretch;align-content: stretch; 위와 같이 부모 컨테이너 안에서 이렇게 정렬이 된다. 아래와 같이 컨테이닝블록이 설정이 되어있다.  2. justify-items / align-itemsjustify-items : stretch(초기값) -> 아이템 1개 내부에서의..

Flex vs Grid2. Flexbox(Flexible Box Layout)1차원 레이아웃 : flexbox는 한 방향(가로 또는 세로)으로만 아이템을 배치하는 데 최적화된 레이아웃 시스템이다. 주로 하나의 축(수평 또는 수직)에서의 정렬과 배치에 적합하다.아이템 정렬 : Flexbox는 개별 아이템 간의 공간 분배와 정렬에 유연한 옵션을 제공한다. 예를 들어 아이템을 중앙 정렬하거나 균등하게 간격을 두는 것이 매우 쉽다.순서 변경 : Flexbox는 DOM 순서와는 별개로 레이아웃에서 아이템의 순서를 쉽게 변경할 수 있는 기능을 제공한다.사용 사례 : Flexbox는 작은 UI 요소의 레이아웃(예: 버튼 그룹, 네비게이션 바, 카드 목록)이나 한 방향으로 배치해야 하는 간단한 레이앗에 적합하다.3. ..

위와 같은 코드에서 비디오를 재생하려면autoplay =”autoplay”를 넣어야 한다.→ 근데 안되는 경우도 있다. 소리가 있다면 재생이 되지 않는다. muted=”muted”→ 음소거 처리를 해야 영상 재생이 된다 loop=”loop”→ 재생을 계속하겠다. 위 속성들은 값이 생략이 가능하다.autoplaymutedloop이렇게 값 생략이 가능하게 속성만 사용 가능하다.

위와 같은 코드가 있다면 이미지 태그에서 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를 하면 글자의 간격들이 동일해진다.  그리고 폰트를 적용할 시에 로컬 폰트가 있고 웹 폰트가 있는데, 로컬 같은 경우는 내 컴퓨터에..