반응형 CSS6 CSS - pre 자동 줄바꿈 적용하기 웹개발시, 긴 텍스트등을 출력할 때 보기에 pre가 가장 적절하다. 그런데 pre 태그를 사용하면 기본적으로 줄바꿈이 되지 않는다. 줄바꿈이 되지 않은 상태: 인터넷 상에 다양한 코드가 있지만, 가장 확실한건 아래와 같이 pre 를 CSS에 적용하고 해결 되었다 pre { overflow: auto; white-space: pre-wrap; word-wrap: break-word; } 줄바꿈이 적용 상태: 2024. 3. 10. CSS - Select 비활성화, 기본값 설정 Select는 CSS에서 특정 요소를 지정하거나 선택하는데 사용하기 유용한 컴포넌트이다. 이를 보다 효과적으로 사용할 수 있는 옵션 2가지에 대해서 정리해 보도록 하겠다. 1. 비활성화 특정 옵션의 경우 화면 표시에 표시만하거나, 조건에 따라서 비활성화하는 방ㄱ으로 사용할 수 있다. 사용은 옵션에 disabled를 선언해 주는 것으로 간단히 사용할 수 있다. Category {#each types as t (t)} {t} {/each} 위 코드를 적용해 보면, 아래와 같이 기본적으로 Category를 보여줄 수 있다. 그리고 해당값은 실제 선택할 수 없도록 하여, 사용자의 잘못된 사용을 막을 수 있다. 2. 기본값 지정 다음은 자주 사용되는 값인 경우 기본적으로 선택하여 사용할 수 있도록 도움을 주는 옵.. 2022. 5. 8. CSS - grid 기본 이해, 2차원 배열하기 CSS를 사용할 때, 특정 화면 사이즈에 요소들을 배치해야하는 경우가 있다. 이때 효율적으로 작성할 수 있는 부분이 바로 CSS에서 제공하는 grid이다. grid는 행과 열을 통한 2차월 배열을 지원한다. 따라서 행과 열을 grid 작성시 지정해 줄 수 있으며, 해당 기준의 열과 행에 맞춰서 화면 배열이 만들어지게 된다. grid에서 열(grid-template-columns), 행(grid-template-rows)을 지정하는 옵션을 통해 조절 할 수 있는데 repeat를 이용해 반복 횟수를 지정할 수 있다. 한줄에 2개의 열을 100px씩 표시하고 싶다면 아래와 같이 지정 할 수 있다. test1 test2 test3 test4 아래와 같이 100px씩 2개의 버튼이 열을 만들어 구성된 것을 알 수.. 2022. 4. 26. CSS 마침표 "."의 의미 CSS에서 Style을 지정할 때 "."은 선택자로 특정 스타일을 지정하는 용도로 활용된다. . 기호는 class 값을 고유 선택자로 지정할 때 사용된다. 이러한 선택자는 HTML 태그에 고유 식별자를 지정해서 개별적인 디자인 효과를 줄 때 사용하므로 특정 스타일을 구분할 때 효과적이다. . 점 고유 선택자 나, 너, 우리라는 h1 태그를 달고 있는 글자를 출력하고자 한다. 이때 "나"라는 h1 태그에만 빨간색 효과를 주고자 한다면, class를 red를 지정하고, .h1라는 스타일 이름을 생성해 테스트를 해보도록 하자. 나 너 우리 아래와 같이 고유 식별자로 지정한 .h1를 통해 빨간색이 적용 된다. . 이 없는 건 바로 html 에 기본적 태그에 사용할 수 있다. 만약 위에 사용하고자 한다면, h1 .. 2022. 4. 2. SVELTESTRAP - Bootstrap 5, Svelte에서 사용하기 CSS를 많이 직접 작성해서 만드는 방법도 있지만, CSS Framework로써, 사전에 구성된 디자인 스타일을 이용하면 보다 손쉽게 화면을 구성할 수 있어서 기존에 필자 역시 웹 개발에 자주 사용하였다. 이번 Svelte를 진행하면서 기존 방식으로 활용할 수 있지만, Svelte에 최적화 된 BootStrap 버전인 SvelteStrap 에 대해서 얘기해 보고자한다. SvelteStrap은 Bootstrap 와 완벽하게 호환하여 Svelte에서 손쉽게 Bootstrap을 사용할 수 있도록 도와준다. 이를 사용하기 위해서 설치하는 방법은 npm을 이용해서 손쉽게 설치할 수 있다. 설치 npm install sveltestrap 이제 css 사용을 위해 main.js에 css를 import 시키도록 하자... 2022. 4. 2. .Net/core - 무료 Icon, Font Awesome 5 사용하기 기존에 glyphicon을 사용하다 일부 단조로움이 있어 찾아보던 중 Font Awesome에서 제공하는 아이콘이 더 다양하여 상황에 맞게 사용할 수 있을 것으로 판단, 이를 적용하면 글을 정리해 본다. https://asecurity.dev/entry/NET-core-31-ActionLink-glyphicon-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0?category=427489 .NET core 3.1 - ActionLink glyphicon 사용하기 Action Link를 통해 glyphicon을 이용하여 아이콘을 사용하고 싶을때 찾은 방법을 정리한 글이다. 1. CSS 및 폰트 추가 기본적으로 Bootstrap 4.x 버전부터는 라이센스 이슈로 glyphicon이 기본적으로.. 2020. 11. 13. 이전 1 다음 반응형
