코드로 엮는 이야기

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

테스트케이스(Test Case)는 소프트웨어 테스트의 기본 단위 중 하나로, 특정한 입력 조건에 대해 기대되는 결과를 확인하기 위해 설계된 테스트 절차입니다. 테스트케이스는 소프트웨어 개발 주기의 여러 단계에서 사용됩니다. 초기 개발 단계에서는 기능을 확인하기 위한 단위 테스트케이스가 사용되며, 통합 테스트 및 시스템 테스트에서는 더 큰 규모의 테스트케이스가 사용됩니다. 또한, 사용자 인수 테스트에서는 최종 사용자의 요구 사항을 충족시키는지 확인하기 위한 테스트케이스가 사용됩니다. 테스트케이스를 작성하고 실행하여 소프트웨어가 요구 사항을 충족하고 기대한 대로 작동하는지 확인할 수 있습니다. 이를 통해 버그를 발견하고 수정하여 소프트웨어의 품질을 향상시킬 수 있습니다. 테스트케이스는 일반적으로 다음과 같은..

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 등의 문자들이 디센던트 영역을 가집니다. 텍스트가 베이스라인 위에 있는 경우에도..

태그에 CSS 속성 중 하나인 width를 100%로 설정하면 해당 이미지가 부모 요소의 너비에 맞게 자동으로 크기를 조절합니다. 이것은 반응형 웹 디자인에서 일반적으로 사용되는 기법 중 하나입니다. 이미지의 크기가 부모 요소에 따라 자동으로 조절되므로, 모든 디바이스에서 일관된 사용자 경험을 제공하는 데 도움이 됩니다. 하지만 문제점이 있는데, 이미지 크기와 용량에 관련된 문제와 고밀집도 디바이스에서 흐릿하게 보이는 현상이 발생하는 문제가 발생합니다. 첫번째. 이미지 크기와 용량에 관련된 문제 모든 디바이스에서 동일한 이미지를 제공할 경우, 보통 데스크톱용으로 큰 이미지를 사용하게 되면 모바일 디바이스에서도 해당 큰 이미지를 불러와야 합니다. 모바일 디바이스에서는 불필요하게 큰 이미지를 다운로드해야 하..

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 요소는 항상 새로운 줄에서 시작하며, ..

텍스트가 여러 줄일 경우, 텍스트의 상하 간격이 너무 붙어 있으면 글을 읽기가 어려울 수 있기 때문에, 위쪽과 아래쪽으로 일정 크기의 여유 공간을 가지고 있습니다. 이러한 여유 공간을 leading이라고 합니다. line-height의 크기는 font-size와 leading을 포함합니다. font-size 속성은 글자 자체의 크기를 말합니다. line-height가 font-size보다 작으면 텍스트가 겹쳐 보이기 때문에 가독성이 떨어지므로 line-height는 font-size보다 크게 지정하는 편이 좋습니다. line-height은 주로 CSS에서 사용되며, 다음과 같은 방법으로 설정됩니다 선택자 { line-height: 값; } normal : : 기본값(보통 1.2) 고정된 값: px,em등..

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

반응형 페이지를 제작하려면 뷰포트(Viewport)와 미디어쿼리(Media Query)가 필요합니다. 뷰포트 설정을 통해 웹 페이지가 모바일 기기의 화면에 맞게 조정되도록 할 수 있습니다. 뷰포트는 pc 화면 비율을 모바일 비율로 바꾸어 주고 미디어쿼리는 화면 크기에 따라 CSS를 설정합니다. 1. 뷰포트 설정 width=device-width : 이 설정은 뷰포트의 너비를 기기의 화면 너비로 설정합니다. 즉, 기기의 실제 화면 너비에 맞춰 웹 페이지의 너비를 조정합니다. 이것은 모바일 기기에서 웹 페이지가 너비를 제대로 표시하고 사용자가 좌우로 스크롤할 필요가 없도록 도와줍니다. initial-scale=1.0: 페이지가 처음 로드될 때 초기 확대/축소 비율을 1.0으로 설정합니다. 즉, 초기 화면 배..