정리공간

어떤 칸에 글자가 너무 많은데 자리는 한정적일때 말 줄임을 쓰곤 한다. 이 말줄임 표시를 해보자. 네이버 메인화면에서 예시를 가져왔다. 광고아님! 스타일을 입혔더니 이렇게 한줄로 줄여진다. .text_test { text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; } 여기서 -webkit-line-clamp 을 2로 하면 두 줄로 말줄임이 된다.

체크박스나 라디오버튼의 input을 누르면 라벨 style을 변경하고 싶었다. 예를들어 아래와 같은! 구글링 해보니 CSS에 + 연산자를 쓸 수 있었다. input[type=checkbox]:checked + label { background-color: orange; } 근데... 동작하지 않았다. + label 없애고 앞부분만 쓰면 잘 적용됐는데 "+ label" 만 붙이면 동작을 안했다. 뭐가 문제지.. vue 프로젝트로 하고있는데 vue에서는 지원 안하는건지 이리저리 찾다가 원인을 찾았다. +label 을 하려면 태그가 태그 뒤에 있어야 한다. 계속 보다보니 다른 글에서는 다 label과 input이 따로따로였다. 나는 label이 input을 감싼 상태였어서 적용이 안된거였다. 내 코드 가나다 ..

keyframes : 애니메이션이 동작할 전체 영역(시작과 끝) keyframes을 지정한 그 영역 안에서 애니메이션이 작동한다. => 전체적인 틀을 만듦! 특징 시작과 끝 사이에 중간 상태를 원하는 만큼 지정할 수 있다. 입력없이 스스로 작동할 수 있다. 반복이 가능하다. keyframes 사용방법 CSS 파일에 @keyframes 애니메이션이름 { } 형태로 작성한다. 시작과 끝은 퍼센트(%)와 from~to 두 가지 방법으로 지정할 수 있다. @keyframes ballBounce { 0% { top: 20px; } 50% { top: 400px; } 100% { top: 20px; } } Animation 속성 name : 내가 만들 애니메이션의 이름 duration : 애니메이션 작동 시간. 단..

1. CSS Transition 시작과 끝 두개의 상태만 지정할 수 있는 단순한 연출. 어떠한 입력이 있어야만 작동한다. ex)버튼을 눌렀을때, 마우스를 올렸을때 등 버튼을 눌렀을때 어떤 컴포넌트가 부드럽게 등장 하는 등 간단한 작업에 사용하기 좋다. 사용방법 CSS에 transition속성으로 직접 구현 button { display: inline-block; transition-property: all; transition-duration: 0.5s; } button:active { transform:translate(50px, 50px); } 이동하는 버튼 2. CSS Keyframe Animation ▷ transition과 비교해서 가능한 것! 시작과 끝 사이에 중간 상태를 원하는 만큼 지정할 ..

1. 이미지 형식 .jpg : 사진. 생삭과 명암을 다양하게 표현. .gif : 256색상 사용, 작은 아이콘, 작은 이미지 사용. .png : 투명한 배경색을 사용할 수 있고, 웹에서 많이 사용한다. 2. 이미지 경로 상대 참조: 현재 위치에서 올라가는 방법. ex) images/5.jpg 절대 참조 : 루트를 기준으로(JSP에서는 webapp) 찾아가는 방법. ex) ../folder/1.jpg 3. 이미지 태그 : src : 이미지 파일의 경로 alt : 이미지가 안보일때 나오는 이름. 4. 이미지 크기 픽셀 : 화면을 이루는 빛(하나의 점). 해상도는 점(빛)의 개수를 의미한다. % : 이미지 크기가 브라우저 크기에 따라 변동한다.

1. 제목 태그 2. 문단 : 3. 진한 글자 : , 4. 기울이기 : 5. 밑줄 : 6. 취소선 : 7. 글자 작게 : 8. 위첨자 : 9. 아래첨자 : 10. 들여쓰기 : 11. 줄바꿈: 12. 수평 밑줄: 13. 적은 그래도 출력 : 원하는 모양대로 출력한다고? 14. 공백 : &은 "앤퍼센트"라고 부른다. 15. 꺽새() : 16. 카피모양(©) : © 17. 앤퍼센트 모양(&) : &

태그에 href="주소" 속성을 주면 해당 주소로 이동한다. 1. url 이동 네이버 2. 파일로 이동 html01폴더 안의 Test01 3. 사진 연결 사진 연결 4. 다운로드 download 속성 사용. 사진다운로드 5. 새창열기 target="_blank" 속성 사용. 원래 링크를 누르면 해당 페이지가 변하면서 이동이됐는데, 새창과 함께 이동하는 옵션이다. 새창으로 열기 사진을 새창으로 열기 6. 문서 내의 특정 위치로 이동 가고싶은 위치에 id="이름" 을 지정하고 에 href="#이름">을 하면 해당 id이름을 가진 태그로 이동한다. 12월 3일로 이동 12월 3일

선택 입력 사용하는 두 가지 방법. 1. 태그 사용 내용1 내용2 내용3 2. 과 사용 1옵션 2옵션 3옵션

1. 테이블 요소 테이블을 만들겠다. -> 테이블 범위 표시 테이블 제목 테이블 헤더 그룹 지정. 행 구역 지정, 이나 를 포함해야한다. 헤더 셀 표시. 테이블 바디 그룹 지정. 셀 하나하나 지정 테이블 제목 과일색깔 사과빨강 바나나노랑 2. 열과 행 합치기 열 합치기: rowspan="숫자" 행 합치기: colspan="숫자" 지원 양식 개인정보 이름 학과 학번 연락처 지원분야

버튼 만드는 방법 4가지! 방법1 . input태그에 type으로 button을 지정하고 value에 글자를 넣으면 그 글자대로 버튼이 생긴다. 방법2 . submit은 태그의 결과 전송 용도로 주로 쓰인다. input태그에 type으로 submit을 지정하고 value글자대로 버튼이 생긴다. submit 타입은 데이터를 아무런 검증없이 보내기때문에 자바스크립트에서 검증을 한 후 데이터를 전송해야한다. 방법3 . 버튼태그 흔히 많이 쓰는 방법이다. 방법4 . 는 일반 text를 쓸때 사용하는 태그로, 위의 세 가지 방법과는 달리 눌리는 기능이 없다. 그래서 CSS로 뒷배경 색깔을 넣어서 버튼처럼 보이게 만든 후 기능을 달아서 사용한다.' 버튼 같지 않지만 버튼이 될 거야. 태그와 같이사용해서 버튼기능을 ..