HTML & CSS (19) 썸네일형 리스트형 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 .. [SCSS/SASS] 기초 사용법 정리 https://sass-lang.com/guide/#variables Sass: Sass Basics CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help sass-lang.com sass 환경설정 1) 설치방법 npm install -g sass 2) 기본 컴파일 방법 아래와 같이 입력하면 해당 scss 파.. 이전 1 2 3 다음
