출처

HTML 삽입 미리보기할 수 없는 소스 앞서 공부한 Flexd와 Grid의 큰 차이는 아래와 같다. Flex보다 더 복잡한 레이아웃 표현이 가능하다. Flex는 한 방향 레이아웃 시스템(1차원) Gird는 두 방향(가로-세로) 레이아웃 시스템(2차원) Flex와 마찬가지로 컨테이너와 아이템이 있으면 된다. 부모 요소인 div.container를 Grid Contaienr, 자식요소인 div.item들을 Grid Item이라고 부른다. 컨테이너가 Grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각 아이템들이 어떤 형태로 배치되는 것. Grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작되며 1. 컨테이너에 적용하는 속성, 2. 아이템에 적용하는 속성 두 가지로 나뉜다. G..

@web's CSS 코드펜 레퍼런스 사이트입니다. wsss.tistory.com 애니메이션, 스크롤 이벤트, 마우스오버 등등 다양한 효과를 소개하는 사이트를 찾았습니다. HTML, CSS, JS 코드가 공개되어있어 유용할 거 같아 공유합니다 :> 출처

pseudo class(가상 클래스) 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다. :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :target :checked :first - 첫번째 요소 :last - 마지막 요소 :nth-of-type(n) - n번째 형제 요소(단일)를 선택 :first-child - 첫번째 자식 :last-child - 마지막 자식 :nth-child(n) n번째 형제 요소(단일)를 선택 :nth-child(odd) / :nth-child(even) - 홀수/짝수번째 자식 요소 선택 :nth-child(2n+1) -..

HTML 삽입 미리보기할 수 없는 소스 절대적 유닛: px 상대적 유닛: %, v*(뷰포트), em, rem 부모요소의 사이즈에 따라 사이즈가 변경되야할 때 : %, em 부모와 상관 없이 브라우저 사이즈에 반응해야할 때 : v*, rem 요소에 너비/높이에 따라 사이즈가 변경되야 할 때 : %, v* 폰트 사이즈에 따라 사이즈가 변경되야 할 때 : em, rem em: 부모 요소의 폰트 사이즈에 따라 사이즈가 결정됨. ㄴ 나의 컴포넌트가 부모 요소에 따라 유동적으로 변경되야 한다면 em. rem: root 요소의 폰트 사이즈에 따라 사이즈가 결정됨. ㄴ 나의 컴포넌트가 페이지 어디에서 사용되어도 동일한 크기를 유지해야 한다면 rem. * rem의 root란? rem의 r은 root, 즉 최상위 요소의 ..

HTML 삽입 미리보기할 수 없는 소스 초기 세팅: 먼저, header 안에 h1태그로 웹페이지 이름을, nav 요소로 네비게이션바 섹션을 구성한다. 보통은 nav 요소 안에 ul,li 태그로 지정하는 게 일반적이다. (예제에서는 간단한 표현을 위해 span 태그를 사용) header 요소의 자식요소 h1, nav 한 줄에 나타내기 - header { display: flex;} header { justify-content: space-between; } - h1과 nav 요소 사이에 적당한 공간감(좌/우에 각각 붙게) 주기 h1, nav { align-items: center; } - 요소의 수직 정렬을 맞춰줌 h1 { flex-grow : 1 } - h1 요소는 header 요소의 여유 공간을 독차지..