HTML & CSS (20) 썸네일형 리스트형 [CSS] 반응형 레이아웃의 기본, 중단점( styled-componets 에서 중단점 적용 팁) 들어가는 말오늘은 반응형 레이아웃의 기본이 되는 중단점에 대해 알아보고, 실제 styled-components 에 적용하는 방법과 사용 팁에 대해 정리해볼까 합니다.중단점이란 뭘까요?CSS에서 중단점(breakpoints)은 반응형 웹 디자인에서 화면의 크기에 따라 스타일을 변경할 수 있게 하는 기준점을 말합니다. 다양한 화면 크기(모바일, 태블릿, 데스크탑)에 맞는 스타일을 적용하기 위해 사용됩니다. 최근에는 중단점을 모바일 우선으로 두고, 스타일을 적용하고 있다는데 이를 어떻게 적용하고 있는지 향후 예시를 통해 알아볼 것입니다. 중단점 사용 방법중단점은 주로 미디어 쿼리(media queries)를 통해 정의합니다. 특정 화면 너비 조건에 따라 스타일을 적용할 수 있도록 하는 것이 미디어 쿼리입니다... a 태그의 텍스트가 길고, 모바일에서 레이아웃이 깨지는 문제를 경험했다면 이런 상황에 직면했다면기본적으로 a 태그에 입력한 텍스트는 너무 길면 개행이 되어서 문제될 일은 없습니다. 다만, CSS Reset 등의 도구를 사용하여 CSS 설정을 초기화한 경우, 아래와 같이 개행이 되지 않고 레이아웃이 깨지는 문제가 발생할 수 있습니다. 이 문제를 개선할 수 있는 CSS 속성에 대해서 소개하고자 합니다. 참고로, 아래에서 언급하는 두 가지 방법은 모두 동일하게 동작합니다. word-break 가 표준이 아닌 당시에 처음 나왔던 방식이라면 그 후 표준화되어 통일한 명칭이 overflow-wrap 입니다. 즉, 이 두 방식은 동일한 기능을 수행합니다. 해결방법 1 | overflow-wrap : break-word or anywherea {overflow-wrap: break-wor.. [HTML] SVG 가 SVG 로 불리는 이유와 렌더링 순서(작성중인 문서) 보호되어 있는 글입니다. [tailwindcss] NextJS & tailwindcss 에서 스크롤바 커스텀[간략 정리] tailwindcss 에서는 별도로 스크롤 바를 꾸밀 수 있는 유틸 클래스를 제공하지 않는다. 다만, NextJs 의 global.css 에서 별도로 스크롤바에 스타일을 적용할 수 있다. global.css 현재 불필요한 스타일 지정을 제거하고, global.css 파일을 살펴본다면 다음 형태와 같을 지도 모른다. @tailwind base; @tailwind components; @tailwind utilities; /* 생략 */ 위 옵션을 건드리지 말고, 다음과 같이 하단에 ::-webkit-scrollbar-* 를 지정하면 스크롤바를 커스텀 할 수 있다. /* 스크롤바 넓이 지정 */ ::-webkit-scrollbar { width: 5px; } /* 스크롤바 트랙 꾸미기 */ ::-webkit.. [CSS] & | SCSS 를 쓰지 않고도 CSS 도 중첩 사용이 가능하게 해줌 원래 SCSS 에서만 사용 가능했던 중첩(nesting) 이 CSS 에서도 사용이 가능해졌다. (이 사실을 모르고 사용하지 않는 경우가 많은 것 같다. ) 예를 들어, SCSS 에서는 다음과 같이 중첩이 가능했다. .section { h2 { color: #008080; } p { font-size: 16px; } } 하지만 이제는 CSS 에서도 다음과 같이 중첩 사용이 가능해졌다. .parent-rule { /* parent rule properties */ .child-rule { /* child rule properties */ } } 그러나, 현재 까지는 제한 사항이 존재한다. 바로 유형선택기에서는 사용이 지원하지 않는다는 점이다. 여기서 유형선택기(type selectors)란 아래와 같이 흔히.. [HTML] <pickture> | 브라우저 크기에 대한 최적화 용도로 사용하는 이미지 태그 보통 웹 사이트에서 이미지를 화면 상에 그리기 위해서 태그를 단일로 사용한다. 그리고 브라우저의 크기에 대응하기 위해 퍼센트(%) 나 vw 를 사용하거나 미디어 쿼리를 사용하기도 한다. 하지만 이런 경우에는 이미지의 종횡비가 깨지거나 화질이 깨지는 등의 문제가 발생할 수 있고, 이는 결국 사용자 경험에 부정적일 수 밖에 없다. 이 때, 이를 개선하고 방지하기 위한 기능을 제공하는 태그를 감싸고, source 태그와 함께 사용할 수 있다. 용도 예시1) 다양한 해상도에 대응하는 이미지 제공 pickture 태그를 사용하면, 다양한 해상도 및 뷰포트 크기에 대응하여 다른 이미지를 제공할 수 있다. 브라우저 크기에 따라서 사용자에게 최적화된 이미지를 제공할 수 있기 때문에, 결과적으로 로딩 시간을 단축하고 대.. [tailwindcss] 사용자가 정의한 값으로 스타일을 지정하려면 옵션-[사용자 지정 값 ] 아래와 같이 [ ] 대괄호 사이에 사용자가 지정하고자 하는 값을 직접 명시하면 된다. 아래 예시에 따르면 height 가 80vh 로 지정된다. {children} 참고 https://stackoverflow.com/questions/68725366/in-tailwind-how-to-set-height-of-a-div-to-80-of-the-screen [HTML/JS] 웹 접근성을 고려한다면, 꼭 알아야 하는 속성 aria-controls 와 aria-selected 에 대한 정리 WAI-ARIA 웹 개발을 할 때 편리한 레이아웃을 셋팅하여 사용성과 편의성을 증진시키는 것도, 화려한 화면과 인터렉션을 통해 살아움직이면서도 아름다운 사이트를 만드는 것도 웹 페이지에 접근하는 사용자에게 흥미를 유발하는 점에서 중요하지만, 간과하지 말아야 하는 점은 스크린 리더 및 보조도구를 사용하는 사용자의 웹 접근성을 보장하는 일인 것 같다. 특히, 아무런 의미 없는 태그인 , 의 무분별한 사용은 스크린 리더를 사용하는 사용자에게 웹 페이지의 유의미한 정보를 제공해주지 못하기 때문에 되도록 사용을 지양하는 것이 좋다고 하는데, 그럼에도 불구하고 사용해야 하는 상황에서는 웹 접근성을 향상시키기 위해 사용되는 WAI-ARIA (Web Accessibility Initiative - Accessible .. 이전 1 2 3 다음
