코드로 엮는 이야기

'nth-child'와 'nth-of-type'은 CSS에서 요소를 선택하는 데 사용되는 가상 클래스입니다. 이 두 클래스의 공통점과 차이점은 다음과 같습니다. 1. 공통점: 요소 선택: 둘 다 요소를 선택하기 위한 가상 클래스로 사용됩니다. 요소의 순서: 요소의 순서를 기반으로 선택할 수 있습니다. 2. 차이점: 대상 범위: 'nth-child': 이 가상 클래스는 부모 요소의 모든 자식 요소를 대상으로 선택합니다. 'nth-of-type': 이 가상 클래스는 동일한 타입의 요소 중에서 선택합니다. 선택 범위의 제한: 'nth-child': 모든 자식 요소를 대상으로 하므로 선택 범위가 더 넓습니다. 'nth-of-type': 동일한 타입의 요소 중에서 선택하므로, 선택 범위가 더 좁습니다. 예시 /*..

focus : 사용자가 특정 요소에 포커스를 주었을 때 적용되는 스타일을 정의하는데 사용됩니다. 사용자가 키보드나 마우스 등을 사용하여 요소에 포커스를 주었을 때 해당 요소에 적용할 스타일을 지정할 수 있습니다. focus-within : 부모요소가 포커스를 가진 자식 요소를 가지고 있고 그 자식요소 중 하나에 포커스가 되었을 때 부모에 스타일이 적용됩니다. 즉, 자식요소에 포커스시 부모요소의 스타일 지정합니다. focus는 선택된 요소의 부모요소에 대한 스타일 지정이 불가능하지만, focus-within의 경우, 선택된 요소의 부모요소에 대한 스타일 지정이 가능합니다. focus-visible : focus-visible은 focus와 달리, 키보드 등의 장치를 사용하여 포커스를 받은 경우에만 적용됩니..

SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽을 나타내는 XML 기반의 마크업 언어입니다. SVG는 확장 가능한 벡터 그래픽 형식이므로 이미지가 확대 또는 축소되어도 해상도가 유지됩니다. 이는 다양한 디스플레이 크기와 해상도에 대해 일관된 렌더링을 제공합니다. 즉, 화면이 확대되거나 축소되어도 화질이 깨지지 않는다는 장점이 있습니다. 또, SVG는 CSS 및 JavaScript를 사용하여 애니메이션을 추가할 수 있어 이를 통해 동적인 그래픽 요소를 만들어 사용자 경험을 향상시킬 수 있습니다. 주요 SVG 속성 : width 및 height: SVG 이미지의 가로 및 세로 크기를 지정합니다. viewBox: SVG 이미지의 뷰박스를 지정합니다. 이는 이미지의 보이는 영역을..

인라인 요소는 기본값으로 vertical-align:baseline을 가집니다. 따라서 인라인 요소는 베이스라인(baseline)에 맞춰 정렬됩니다. 베이스라인(Baseline)은 텍스트의 기준선으로 영문 소문자 중 일부 (예: a, e, m, n 등)는 대부분 베이스라인 상에 위치합니다. 텍스트의 기본 정렬은 이 베이스라인을 기준으로 이루어집니다. img 태그는 인라인 요소(inline element)입니다. img 태그가 인라인 요소기 때문에 베이스라인에 맞춰 정렬됩니다. img 태그 여백은 디센던트(descent) 공간에서 발생합니다. 디센던트는 글자의 아래쪽으로 내려가는 부분을 가리키며, 일반적으로 g, j, p, q 등의 문자들이 디센던트 영역을 가집니다. 텍스트가 베이스라인 위에 있는 경우에도..

box-sizing 속성은 CSS에서 박스 모델의 크기 계산 방법을 지정하는 데 사용됩니다. 박스 모델의 크기는 페이지 레이아웃을 구성하고 디자인하는 데 중요합니다. 웹 페이지의 요소들은 박스 모델을 기반으로 합니다. 각 요소는 내용 영역, 안쪽 여백, 테두리, 외부 여백 등의 요소들로 이루어진 박스로서, 이러한 속성들을 통해 레이아웃을 구성하게 됩니다. 요소들을 어디에 배치하고 어떤 크기로 표시할지 결정하는 데에 박스 모델의 크기가 중요합니다. 박스 모델을 구성하는 세 가지 중요한 요소 padding : 요소의 내용(content)과 테두리(border) 사이의 여백을 지정합니다. border : 요소의 내용을 감싸는 외부 테두리를 정의합니다. margin : 요소의 테두리(border)와 인접한 요소..

display: inline; 줄바꿈 없이 문장의 흐름에 따라 한 줄에 배치됩니다. inline 엘리먼트로 이나 , 태그 등이 있습니다. 태그의 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문에 width와 height를 지정할 수 없습니다 margin과 padding의 상하 여백은 적용되지만 좌우 여백은 적용되지 않습니다. display: inline-block; inline-block 요소는 inline과 block 요소의 중간 형태입니다 block요소 처럼 width와 height, padding, margin 등의 속성을 설정할 수 있으며 inline요소 처럼 줄바꿈 없이 문장의 흐름에 따라 한 줄에 배치됩니다. display: block; block 요소는 항상 새로운 줄에서 시작하며, ..

이미지 스프라이트(Image Sprite)는 웹 디자인 및 웹 개발에서 사용되는 기술로, 여러 개의 이미지를 하나의 이미지 파일로 결합하여 관리하는 방법입니다. 주로 웹 페이지에서 여러 개의 이미지를 불러와야 할 때 사용되며, 각 이미지를 따로 요청하는 대신 하나의 이미지만 요청하면 되므로 네트워크 요청을 줄이고 페이지의 성능을 향상시키는 데 도움이 됩니다. 이미지 스프라이트(Image Sprite)는 img 태그가 아닌 css의 background-image로 이미지를 처리하기 때문에 alt 속성을 지정해줄 수 없다는 문제가 있습니다 따라서 큰 의미가 없는 단순한 이모티콘이나 로고의 경우에 이미지 스프라이트(Image Sprite)기법을 사용하는 것이 좋습니다. 이미지 스프라이트를 사용하는 방법은 다음..