개발하자(DevHaja)

FrontEnd/CSS

[CSS] '...' 처리하는 방법 (text-overflow : ellipsis)

📋 text-overflow text-overflow 란 박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성입니다. text-overflow 속성은 아래 두가지를 모두 충족할 경우에만 적용됩니다. overflow 속성값이 hidden, scroll, auto 일때 (visible 제외) white-space: nowrap ✔ '...' 처리하는 방법 [HTML] 텍스트 내용이 박스를 넘어가게 될때 ...을 사용하는 방법입니다. [CSS] .text{ width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } overflow: hidden : 넓이가 100px을 넘어가는 내용에 대해서 보이지 않게 처리 text-ov..

FrontEnd/CSS

[CSS] box-sizing

📋 box-sizing? box-sizing 속성은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 속성 값에는 content-box와 border-box가 있습니다. ✔ content-box 컨텐츠 영역을 기준으로 크기를 정합니다. border, margin, padding은 따로 계산되어 전체 영역이 설정값보다 커질 수 있습니다. ✔ border-box 테두리를 기준으로 크기를 정합니다. border, margin, padding을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있습니다. ✔ initial 기본값으로 설정합니다. ✔ inhreit 부모 요소의 속성값을 상속받습니다.

FrontEnd/CSS

[CSS] Reset.css

📋 reset.css ? 웹 표준, HTML5를 마크업 하면서 크로스 브라우징을 위해 기본적으로 css를 설정하는것을 말합니다. ✔ reset css 코드 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody..

FrontEnd/CSS

[CSS] 블렌드 모드(mix-blend-mode)

📋 mix-blend-mode 란? 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정하는 속성입니다. mix-blend-mode에는 다양한 속성이 있습니다. 하나하나 직접 사용해보는걸 추천드립니다. .item{ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-b..

FrontEnd/CSS

[CSS] 스크롤바 커스텀(Scrollbar Custom)

📋 스크롤바 스타일 커스텀(Scrollbar Style Custom) 스크롤바 스타일에 대한 웹표준은 존재하지 않습니다. webkit 브라우저(크롬, 오페라, 사파리)에 한해서 가상요소를 사용하여 커스텀을 해줍니다. 스크롤바와 관련된 가상요소는 여러가지가 있지만 주로 사용하는 아래 3가지가 있습니다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 각 스크롤 영역 전체, 막대(thumb), 여백(track)을 뜻합니다. 작성된 코드로 확인해보겠습니다. 현재 제 티스토리에 적용되어있는 코드입니다. body::-webkit-scr..

FrontEnd/CSS

[CSS] 크롬(chrome) 이미지 흐릴 때

크롬은 이미지 랜더링 문제가 있습니다. 웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 괜찮지만 원본 해상도보다 확대, 축소 되는 경우에는 이미지가 흐려집니다. 📋 image-rendering image-rendering이란 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 크기가 변경된 이미지에 적용됩니다. ✔ -webkit-optimize-contrast 이미지 랜더링 방식을 변경해줍니다. 크롬, 사파리 등의 브라우저에서 대비를 최적화하여 흐려지는 문제를 어느정도 해결해줍니다. 제가 사용해 봤을 때 이 방식이 제일 효과 있었습니다. 📋 transform ✔ translateZ transform: translateZ(0)을 이용하여 깊이감을 없애줍니다. 약간의 효과는 있었지만 image-..

FrontEnd/CSS

[CSS] css 선택자(selector)

📋CSS 선택자(selector) 란? 어느 요소에 스타일을 적용할지 알려주는 방식이 css 선택자 입니다. ✔ 선택자의 종류 1. 전체 선택자 전체 선택자는 *을 사용하여 나타냅니다. html 모든 태그에 적용됩니다. *{ margin: 0 auto; } 2. 태그 선택자 태그 선택자는 태그의 이름을 사용하여 나타냅니다. 태그명이 선택자와 같은 태그들에 적용됩니다. div{ margin: 0 auto; } 3. 클래스 선택자 클래스 선택자는 .클래스명을 사용하여 나타냅니다. 클래스명이 같은 태그들에 적용됩니다. .className{ width: 100%; } 4. ID 선택자 ID 선택자는 # 아이디명을 사용하여 나타냅니다. ID명이 같은 태그들에 적용됩니다. #IdName{ color: #ff0 } ..

FrontEnd/CSS

[CSS] 상대 단위(em/rem)

📋 상대 단위란? 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. 대표적으로 em, rem, %, vw, vh 등이 대표적인 css의 상대 단위입니다. 📋 절대 단위란? 어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다. 대표적으로 px 이 있습니다. ✔ em em은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 값이란 현재 스타일 지정 요소의 font-size 값을 의미합니다. 즉 현재 요소의 font-size 값이 16px이라면 2em은 32px을 의미합니다. .content{font-size: 16px;} .content{ font-size: 1.5em; /* 24px */ margin: 2em; /* 32px */..

FrontEnd/CSS

[CSS] display 속성 (flex)

display : flex 속성은 하나의 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex 속성이 적용된 container가 부모 요소인 flex container 가 되고, 하위 요소인 item은 자식 요소인 flex item 이라고 부릅니다. ✔ flex container 속성 flex-direction, flex-wrap, justify-content, align-items, align-content ✔ flex item 속성 flex, flex-grow, flex-shrink, flex-basis, order ✔ flex-direction item 요소들의 방향을 결정 하는 속성입니다. .container { flex-directi..

devwoodie
'FrontEnd/CSS' 카테고리의 글 목록
상단으로

티스토리툴바