반응형 Web/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 - element 요소 정리 CSS를 작성할 때 기본적으로 알아두면 좋은 element에 대해서 정리해 본다. (현재 업데이트중...) Ctrl + F 키로 검색을 하면 보다 편하게 찾을 수 있다. 요소 설명 background-color 배경 색 border 테두리 스타일 color 글씨 색상 padding 세로 가로 크기 text-align 글씨 정렬 (가로 기준) text-decoration 글씨 표현 방식(기본값 링크시 밑줄) display 가로 세로등 element 표현 방식 font-size 글씨 사이즈 border-radius 모서리 라운딩 :hover 마우스가 위치할때 변화 transition-duration :hover시 전환되는 속도(기본값 0) box-shadow 배경 그림자 설정 float 그룹의 정렬 위치, .. 2022. 4. 3. CSS 마침표 "."의 의미 CSS에서 Style을 지정할 때 "."은 선택자로 특정 스타일을 지정하는 용도로 활용된다. . 기호는 class 값을 고유 선택자로 지정할 때 사용된다. 이러한 선택자는 HTML 태그에 고유 식별자를 지정해서 개별적인 디자인 효과를 줄 때 사용하므로 특정 스타일을 구분할 때 효과적이다. . 점 고유 선택자 나, 너, 우리라는 h1 태그를 달고 있는 글자를 출력하고자 한다. 이때 "나"라는 h1 태그에만 빨간색 효과를 주고자 한다면, class를 red를 지정하고, .h1라는 스타일 이름을 생성해 테스트를 해보도록 하자. 나 너 우리 아래와 같이 고유 식별자로 지정한 .h1를 통해 빨간색이 적용 된다. . 이 없는 건 바로 html 에 기본적 태그에 사용할 수 있다. 만약 위에 사용하고자 한다면, h1 .. 2022. 4. 2. Sass(SCSS)란, 사용법 HTML 의 화면의 디자인 적인 요소로 사용되는 CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로써, 웹 화면의 표현을 간편하면서, 레이아웃과 스타일을 정의할 때의 자유도가 높다고 할 수 있다. 그리고 편리하 사용성은 누구나 쉽게 접근하여 사용할 수 있지만, 들어갈 수록 그 복잡함도 함께 커지게 된다. 이러한 CSS는 W3C의 표준 스타일시트로 활용되고 웹 표현에 필수 요소 이기에 반드시 사용해야 하지만, CSS의 불편한 부분을 보완하고 편의성을 높인 CSS 전(Pre)처리기가 나오게 되었고, 이것이 Sass/SCSS이다. * CSS 전처리란 CSS가 동작하기 전, 즉 개발 단계에서 이 전처리 언어인 SCSS를 사용하고 실제 웹에서는 CSS로 변환해서 동작되는 것을 의미한다. Sass/.. 2022. 3. 29. 이전 1 다음 반응형
