개발 기록 남기기✍️

Flex와 Grid의 차이점 Flex : 1차원 레이아웃 시스템(한 방향) Grid : 2차원 레이아웃 시스템(가로-세로) Grid 레이아웃을 만들기 위해선 Flex와 마찬가지로 Grid Container(부모 요소)와 Grid Item(자식 요소)가 있으면 된다. 컨테이너에 display : grid; 를 설정하면 컨테이너의 역할을 수행하고 자식 요소들은 아이템이 된다. ✅ grid를 주면 자식 요소들은 Block 속성이 된다! 근데 display: grid만 설정해서는 레이아웃에 변화가 일어나지 않는다. Grid 컨테이너 속성 속성 의미 display 그리드 컨테이너(Container)를 정의 grid-template-rows 명시적 행(Track)의 크기를 정의 grid-template-column..

position : Sticky sticky는 static 속성과 fixed 속성의 특징을 동시에 가지고 있다. sticky 속성은 필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정해줘야 한다. sticky로 설정된 영역은 설정된 위치(예 : top : 0px)에 도달하기 전까지는 static 속성처럼 행동하다가 스크롤 위치가 설정된 위치(임계점)에 다다르면 fixed 처럼 행동하는 속성이다. 예제 HTML 코드 Navigation static fixed sticky Long Text Area. CSS 코드 .container { width: 100%; height: 100%; display: flex; flex-direction: row; border: 2px sol..

Flexbox Froggy란 ? CSS 코드 게임으로 지시사항에 맞게 개구리들을 연잎으로 이동시켜주는 Flexbox 학습게임이다. flexbox의 개념을 쉽게 배울 수 있다. 가끔 CSS 만진지 너무 오래되어서 Flex 개념이 가물가물할 때 한 번씩 풀어보곤 한다! 여러분도 게임으로 Flex 쉽게 배워보세요😊 🐸 Flexbox Froggy로 이동 🐸 Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com ✨ 1~5번 답 공유 더보기 1번 justify-content: flex-end; 2번 justify-content: center; 3번 justify-content: space-around; 4번 justify-content: space-be..

선택자 우선순위 선택자 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다. 적용 순서에 따른 우선 순위 규칙 같거나 서로 다른 선택자 방식으로 동일 요소에게 동일 속성을 뒤쪽에서 다른 값으로 재정의할 수 있다. 서로 나누어진 CSS 코드인 경우 HTML 문서에 적용되는 순서에 따라 뒤쪽에서 동일 요소에게 동일 속성을 재정의 할 수 있다. 선택자의 종류에 따른 우선 순위 규칙 주요 단일 선택자 방식에서 id, class, tag 순의 우선 순위 우선 순위 규칙에 의해 경우에 따라 뒤쪽에서 동일 속성을 재정의 할 수 없다. 결합 관계(복합 선택자 패턴)의 경우에는 결합되는 선택자 방식의 정해진 점수를 합산하여 우선 순위를 정한다. !import..

px/pt에 대한 단위값의 이해 css 맨 처음에 브라우저의 폰트를 지정해줘야 한다. :root {font-size : 16px;} 16px == 12pt point는 인쇄 디자인에 쓰이고 px은 디스플레이에서 사용 px 단위는 절대 단위이므로 역동적 특성이 없어 사용자 접근성 낮음 %에 대한 단위값의 이해 부모요소 기준으로 값이 조정됨 em에 대한 단위값의 이해 16px == 12pt == 100% == 1em em은 최초에 설정된 font-size를 기준으로, 부모 요소를 따라 움직임. font-size의 em 값이 작아지면 font-size 뿐만 아니라 width, height 등에도 같이 적용됨 rem에 대한 단위값의 이해 font에서는 pixel보다는 rem으로 주로 표현 rem : 최상위 요소..

Font에 관한 속성들 font-weight : 서체의 굵기 font-weight 종류 : thin, ligher, normal, bold, bolder, black 숫자 100~900 으로도 굵기 조절 가능 font-weight는 font designer가 허용한 수치 내에서 조절 가능. 지정한 값이 없는 값일 때는 비슷한 값으로 자동으로 맞춰짐. font-style : 서체 기울기 font-style 종류 : normal, italic, oblique em, i, address 태그는 기본적으로 italic 체로 적용됨 font-size : 서체 크기 아무것도 지정하지 않았을 때 기본 16px 16px = 12pt font-size를 %로 값을 주면 부모 요소의 값에 따라 상대적으로 처리됨. px보다..

IR : Image Replacement ✔️ 웹 접근성 준수를 위해 이미지를 사용 시 대체 텍스트를 제공해야 함. ✔️ 단순히 스크린 리더 사용자 뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적. Bad - 스크린 리더가 읽을 수 없는 방법 img { display : none; } img { visibility : hidden; } img { width: 0; height:0; font-size:0; line-height:0; } 🟦 display : none → 화면에 아예 표시되지 않음 🟦 visibility : hidden → 화면에 표시되지 않으나 영역(width, height)은 차지한다. 🟦 font-size : 0 → 읽을 수 있지만, 폰트가 노출되기도 하며, block 요소..

img 태그 alt : src 주소에 오류가 있을 때 나타나는 이미지에 대한 자세한 설명 title : 이미지 위에 커서를 올렸을 때 나타나는 이미지에 대한 설명 background 속성 li {background-image:url("../img/flower.png"); background-repeat : no-repeat; background-position : 50% 50%; background-size : cover; } li {background: center no-repeat url("") background-size : cover; } ✔️ 기본적으로 background 요소는 부모 요소의 공간을 남기지 않고 해당 이미지를 반복해서 꽉 채워서 표현한다. background-repeat : x-..

Position ➡️ 요소의 위치를 결정하기 위한 속성 ➡️ 기능을 의미하는 position 속성 값 : static, relative, absolute, fixed ➡️ 위치 값을 설정하는 속성 : top, left, right, bottom ➡️ 앞/뒤의 배치를 설정하는 속성 : z-index position static - 가장 기본이 되는 값으로 위치를 설정하는 속성(top, left, right, bottom)과 z-index 기능이 동작하지 않음 relative - 자신을 기준으로 처리하는 속성으로, 위치를 설정하는 속성을 사용하더라도 주변 요소들에 영향을 미치지 않음 — top right left bottom 값 지정하면 원래위치로부터 얼마나 떨어져 있을지 설정 가능 absolute - 부모..

시멘틱 구조란? ➡️ 마크업을 사용하여 단순히 프리젠테이션이나 모양을 정의하기보다는 웹페이지에서 정보의 의미를 강화하고 단순한 구성의 형태보다, 의미 있는 요소를 생성하여 브라우저나 사용자가 그 태그의 사용의미를 잘 받아들일 수 있도록 하는 것. ➡️ div의 무분별한 사용을 막을 수 있다. HTML5에 새로 나온 시멘틱 구조태그의 종류 태그명 설명 여러 문단을 묶는 태그, 독립적인 콘텐츠를 정의할 때 사용 콘텐츠나 페이지의 외곽에 위치한 요소들을 묶는 태그, 보통 퀵메뉴나 스크롤탑버튼등에 사용 사용자가 보거나 숨길 수 있는 세부 콘텐츠를 정의할 때 사용 태그를 통해 보여지는 콘텐츠를 담는 태그로 사용 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정 태그로 정의한 일..