Study/css 2

[css] overflow / text-overflow / 말줄임 표시하기 / 한 줄 효과 / 두 줄 효과

게시판 목록처럼 미리보기 형식으로 간략하게 내용을 보여주려고 할 때 말줄임 표시를 하는 경우 사용. 말줄임 표현하는 방법 / 한 줄 효과 지정된 영역을 넘어갈 때 말줄임( … ) 표현을 하기 때문에 width 값이 필요. width 값을 지정해야 하기 때문에 텍스트 영역에는 display:block 이나 display:inline-block 등 속성을 변경해주거나 block요소(p 태그)를 사용해 주어야 함. .box { display: block; overflow: hidden; text-overflow: ellipsis; white-space: no-wrap; } 말줄임 표현하는 방법 / 두 줄 효과 2줄 이상에서 말줄임 표현을 할 때 사용할 속성. 위의 예시는 항상 한 줄에서 영역을 넘어갈 때 말줄..

Study/css 2024.01.07

[css 기초] 선택자 / 선택자 우선순위 / 우선순위 계산

특정 요소를 선택하여 스타일을 적용할 수 있는 요소 HTML 페이지 안의 특정요소를 어떻게 렌더링 할 것인지 브라우저에게 알려주는 역할 css 선택자 css 선택자들 입니다. (빠진 요소들이 있을 수 있음!) 예시 ID 선택자 #id { ... } Class 선택자 .class { ... } tag 선택자 div { ... } 속성 선택자 input[type=”text”] { ... } 전체 선택자 * 하위 선택자 div ul 자식 선택자 div > ul 인접 형제 선택자 (바로 뒤따르는 요소만) div + ul 일반 형제 선택자 (뒤따르는 요소 전체) div ~ ul 가상클래스 선택자 -동적선택자 ::link ::visited ::active ::hover ::focus 가상클래스 선택자 -구조선택자 ..

Study/css 2024.01.03