전체 글 (21) 썸네일형 리스트형 [css] 말줄임 컨텐츠 길이가 길어질 경우, 말줄임 태그 사용 - 텍스트 말줄임 1. 너비 2. white-space: nowrap; 한줄 3. overflow: hidden; 넘침 4. text-overflow: ellipsis; (****) - 여러줄 말줄임 -> 접두어 (크롬, 사파리만 사용 가능) display: -webkit-box; -webkit-line-clamp: 줄수; -webkit-box-orient: vertical ★ 너비가 필수, 보통 아래 3가지 세트 ★ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 예시1) 예시 2) [css] box-shadow/text-shadow box-shadow / text-shadow : box/text에 그림자 넣을 때 사용 - box-shadow: 가로위치(+,-) 세로위치 -> 거리값(+,-) 블러 색상; - text-shadow: 가로위치(+,-) 세로위치 -> 거리값(+,-) 블러 크기 색상; .box1 { /* box-shadow: 가로위치(+,-) 세로위치 -> 거리값(+,-) 블러 색상; */ box-shadow: 10px 10px 0 #dcdcdc; text-shadow: 5px 5px 0 #dcdcdc; } - 크기 색상 inset : 안쪽 그림자 [css] overflow, visibility 1. 넘침관리 (overflow) : 요소의 콘텐츠가 너무 커서 요소의 크기에 맞출 수 없을 때의 처리하는 방법 * 문법 - overflow: visible; -> 기본값 - ★ overflow: hidden; ★ -> 사이즈, 크기만큼 인식 마스크 원리랑 비슷 - overflow: scroll; -> 무조건 스크롤 - overflow: auto; -> 넘치면 자동 스크롤 생성 - overflow-x -> x(가로)축만 관리 - overflow-y -> y(세로)축만 관리 예시) 2. visibility (숨김처리) : 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨김처리 * 문법 - visibility: visible; -> 기본 - visibility: hidden; -> 숨김 - 숨김 : 화면에.. [css] border-radius * border-radius 요소 테두리 경계의 꼭짓점을 둥글게 만드는 기능 - 젠코딩 : bdrs - 방향 순서 (시계방향) border-top-left-radius : 상단 왼쪽 모서리를 둥글게 border-top-right-radius : 상단 오른쪽 모서리를 둥글게 border-bottom-left-radius : 하단 왼쪽 모서리를 둥글게 border-bottom-right-radius : 하단 오른쪽 모서리를 둥글게 참고 링크 https://9elements.github.io/fancy-border-radius/#18.100.100.22--378.378 [css] 줄간격, 줄바꿈, 영문 대소문자, 공백 1. 줄 간격 / 바꿈 관련 기본 세팅값 1) 본문 : 14px -> 예전 기준 15px ~ 18px (18px 같은 경우 프로모션 페이지에 자주 사용 / 일반적으로는 사용 잘 X) : 행간 1.5 ~ 1.8 (1.8 사용 시 가독성이 좋아지나, 줄이 생기고 디자인상 문제가 생김) 16px / 1.6 : 자주 사용 14px / 1.5 -> 예전 기준 2) 제목 : 20px 이상이면 생각해보자 행간이 넓어지게 됨 보통 1.2 ~ 1.3배 크기가 너무 클 시 (50px) 1배도 괜찮음 2. 영문 대소문자 text-transform: none; text-transform: capitalize; text-transform: uppercase; (**) text-transform: lowercase; 3. 공백 .. [css] 밑줄, 세로 가운데 정렬 1. 밑줄 - 주로 text-decoration: underline; / border-bottom 사용 - text-decoration: underline; 사용 시 밑줄 : 장식용으로 사용 X - text-decoration: underline과 같은 경우 1) 포털사이트 : 네이버, 다음, 네이트 접근성 준수해야 할 때 2) 링크 마우스 올렸을 경우 만 사용하며, 평소에는 사용 X => 밑줄 사용 시 border-bottom 사용 (**) # 특이사항 (1) a 태그 - a태그는 기본 성격이 밑줄이 들어감 -> text-decoration: none; (필수 사용) - a태그는 컬러가 상속되지 X - a까지 경로 설정 후 컬러 변경 (2) .line .line { text-decoration: lin.. [css] 단위 # 단위 - px : 1픽셀을 1로 하는 단위 -> 0일 때는 px단위를 생략할 수 있습니다. - em : 폰트의 높이를 1로 하는 단위 ( 모바일, 반응형에 많이 사용 ) - % : 기준이 되는 크기에 대한 비율 - rem : 루트인 html의 값을 기준으로 계산.( 모바일, 반응형에 많이 사용 ) https://www.toolo.kr/pxtoem/ 1. % % : 크기 -> 부모가 무조건 100% 기준 처리한다 % : 자간 -> 자신의 폰트크기가 100% 기준 letter-spacing % : 행간 -> 자신의 폰트크기가 100% 기준 line-height 예1 ) 블럭 % 크기 조절 예2 ) 텍스트 % 크기 조절 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 -> 텍스트 크기 % : 부모 기.. [css] 다중클래스 * 다중클래스 (멀티클래스) Multi-class 분류 문제는 하나의 그림에 하나의 객체만 있어야 하고, 그리고 그 객체는 2개 이상의 카테고리에 속하는 경우 공통되는 클래스가 많을 경우 사용 class="공통클래스명 그 다음 많이 쓰는 클래스명(기능/성격에 따라 다름) 클래스명" -> 권장 3개 정도 예 ) 1. 공통 : box 2. 색상 : red, green, blue 3. 크기 : w200, w300, w400 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 이전 1 2 3 다음
