css5 [Trouble Shootings #9] CSS - 말줄임 (...) 처리하기 전에 회사에서 진행하던 프로젝트 중에 텍스트가 해당 요소의 정해진 사이즈를 넘어가면 ... 으로 말줄임 표시 처리해야 하는 부분이 있었습니다. 구글링을 통해 간단히 해결할 수 있었습니다. 해당 부분의 css를 적용할 때, 아래 속성들을 추가하면 됩니다. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 블록 레벨 요소에만 적용된다고 합니다. 2022. 9. 24. [Trouble Shootings #5] CSS - list style 및 인덴트 HTML - CSS 를 이용하여 list style을 들여쓰기 방식의 리스트 아이템 형태로 만들고 싶을 때가 있습니다. 왜냐하면 그냥 디자인만 입히게 되면 indent가 올바르게 먹지 않고 다음 줄의 맨 앞에 붙어서 나오기 때문입니다. 이를 해결하기 위해서는 li 태그에 css로 text-indent를 적당히 -20px 정도 주고 padding-left를 20px 주면 됩니다. 그러면 올바르게 인덴트가 잘 됩니다. ex) - 안녕하세요 안녕하세요 (X) - 안녕하세요 안녕하세요 (O) 그리고 추가적으로 li 태그의 depth를 늘리고 싶을 때가 있습니다. 그럴 때는 list-style-position: inside; 로 처리하시면 됩니다. ex) - 안녕하세요 - 안녕하세요 2022. 9. 22. [웹 개발 입문 - CSS] 3장 - CSS Responsive (마지막) 3.1 Responsive (반응형) - 반응형: 사용자의 해상도에 따라 웹 페이지의 레이아웃을 최적화해서 보여주는 기술 - 웹 페이지의 레이아웃, HTML 요소, 콘텐츠가 사용자의 해상도(데스크탑, 태블릿, 스마트폰 등)에 따라 가장 알맞은 형태로 사용할 수 있도록 제공하는 기술 3.2 Viewport - 뷰포트: 모바일 웹에서 웹 페이지가 사용자에게 보여지는 영역 - 모바일에서 화면 사이즈 작아서 콘텐츠 스크롤 등 불편 해소 3.3 미디어 쿼리 - 스크린 크기별로 별도의 CSS 적용해서 사용자의 스크린 크기에 최적화된 스타일 적용 [Reference] Source Code - CSS ch 03 개발자의 품격 (유튜브) - CSS 2022. 2. 15. [웹 개발 입문 - CSS] 2장 - CSS Property 2.1 CSS Colors - 색상명 - 색상 값 - RGB 값 - RGBA 값 - HEX 값 - HSL 값 - Hue; 색조, 0~360, 360 (R) / 120 (G) / 240 (B) - Saturation; 채도, 0~100%, 회색 음영 (0%) - Lightness; 밝기, 0~100%, 검은색 (0%) - HSLA 값 - Alpha; 투명도, 0에 가까울수록 투명해짐 2.2 CSS Background - background-color - background-image - 속성 값은 url(" ") - background-repeat - background-image가 적용되는 HTML 요소의 크기보다 작은 경우 자동으로 이미지가 상하/좌우로 반복되어 나타남 - repeat-x, repeat.. 2022. 2. 15. 이전 1 2 다음 반응형