본투비곰손

한줄 일때 .txt_line { width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 한줄 이상일때 line-clamp .line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

Front-end/CSS 2023. 6. 12. 22:01

appearance 브라우저가 가지고 있는 고유의 button또는 select의 arrow 모양을 없애거나 변형 할 때 사용한다. 여러가지 속성이 있지만 모든 브라우저에 동일한 화면을 구현하기 위해 appearance : none 속성을 사용한다. 선택사항1 선택사항2 선택사항3 선택사항4 선택사항5 선택사항1 선택사항2 선택사항3 선택사항4 선택사항5 123 123 appearance : none 속성을 이용하여 화살표를 이미지나 아이콘으로 변경하여 꾸며준다.

Front-end/CSS 2023. 6. 12. 21:59

white-space 요소가 공백 문자를 처리하는 법을 지정 nomal : 연속공백을 합치고 한줄이 길어서 넘칠경우 자동으로 줄바꿈 (일반적인 스타일) 줄끝의 공백 없앰 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum rem inventore voluptatum magnam perspiciatis, reprehenderit consectetur quos sequi velit qui, eligendi necessitatibus saepe quidem, cum autem ipsa. Adipisci, nihil eaque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum nisi ..

Front-end/CSS 2023. 6. 12. 00:09

object-fit img 또는 video 요소와 같은 대체요소의 크기를 조절하여 요소에 맞출것인지 지정 fill : 요소 컨텐츠 박스에 맞춰 컨텐츠 크기를 조절 (억지로 늘어나 비율 깨짐) contain : 컨텐츠의 비율을 유지하면서 박스 내부에 들어가도록 크기를 조절한다 (컨텐츠가 모두 보이게 줄어들어 박스와 비율이 맞지 않으면 여백이 생김) cover : 컨텐츠의 비율을 유지하며 박스 내부를 가득 채운다. ( 박스와 비율이 맞지 않으면 컨텐츠가 잘림) none : 컨텐츠의 크기를 조절하지 않음 scale-down : none 와 cotain중 컨텐츠의 크기가 작아지는 값을 선택

Front-end/CSS 2023. 6. 12. 00:07

background background는 가장 많이 사용하는 CSS속성이다. 배경색을 주거나 배경이미지를 배치하는등에 사용된다. 1. background-color 배경색을 정해주는 속성으로 hex코드 또는 rgb,rgba등으로 지정해 줄 수 있다. hex코드-#aaaaaa rgb-(170, 170, 170) rgba-(170, 170, 170,1) a값은 명도이다. 0에 가까울수록 투명해지고 1에 가까울수록 진해진다. 2. background-image background-image : url(이미지 경로)을 사용하여 원하는 이미지를 배경에 넣을 수 있다. 단, 크기가 다르다면 반복적으로 이미지가 채워진다. .bg{ width: 500px; height: 500px; margin: 10px; backg..

Front-end/HTML 2023. 6. 10. 00:14

animation 별도의 동작 조건없이 스스로 애니메이션 효과를 발생시키는 속성 1.사용방법 @keyframes 원하는이름{ %값{css속성} } 선택자{animation:원하는이름 시간s 반복 횟수} 페이지를 출력하면 원하는시간을 %값으로 배분하여 5회 왕복 한다. 0%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 0초 돌아올때 10초//도착지부터 시작함) 20%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 2초 돌아올때 8초) 50%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 5초 돌아올때 5초) 80%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서..

Front-end/HTML 2023. 6. 7. 22:32

table태그 표를 만들어 주는태그 1. table 표의 시작을 알리는 태그 ul,section,form 과 같은 역할 2. caption 표의 제목을 나타내는 태그로 width의 갑이 없어도 표의 최대길이로 설정되며 글자가 중앙정렬 된다. 3. th 표의 서브 제목으로 작성된글자가 굵게 표시되며 중앙정렬 된다. 4. tr , td 행태그, 열태그 5. colspan 가로열을 병합해주는 태그로 과 같은 형식으로 사용한다. 6.rowspan 세로열을 병합해주는 태그로 과 같은 형식으로 사용한다. 7. scope th에만 사용하는 속성으로 가로 또는 세로열의 제목을 정의해준다. scope="row" 가로 제목 정의 / scope="col" 세로 제목 정의( 브라우저가 명확하게 th성격을 인지) 메인제목 서브..

Front-end/HTML 2023. 6. 7. 00:01

스프라이트 이미지 여러개의 이미지를 하나로 모아 이미지 파일의 리퀘스트를 줄이는 방법으로 하나로 합쳐진 이미지에서 필요한부분(주로 아이콘)을 추출하여 사용하는 개념이다. 파일명이 sprite.png인 하나로 합쳐진 이미지 한장 원하는 크기를 만들어주고 background-image:url("sprite.png")사용하여 이미지를 불러오고 background-position:0px 0px 을 사용하여 필요한 아이콘을 지정 한다. background: url('css_sprites.png') -10px -10px 속성을 이용하여 동일하게 사용 할 수 있다. 출력물은 아래와 같다. 대표사진 삭제 사진 설명을 입력하세요. 가로 , 세로 px 값을 변경하여 원하는 이미지를 찾아 적용하면 된다. 가각의 이미지를 하..

Front-end/HTML 2023. 6. 6. 23:59