css3

[2022/01/03]국비지원 CSS3 12 animation

animation : name duration timing-function delay interation-count direction fill-mode play-state steps name : 모션 이름 duration : /s, /ms timing-function : 모션 중 가속도 delay : 지연시간 interation-count : 반복횟수 0% ~ 100% infinite direction : 방향 normal alternate revers fill-mode : 시작 전 후 효과 forwards backwards both none play-state : 실행 상태 paused play steps : frame 수 입력 방식 ex @keyframes ani { 0%{left: 0;border:..

[2021/12/31]국비지원 CSS3 11-(5) form appearance, outline

★★★★★ 브라우저 식별 접두사 필요한 속성 ★★★★★ appearance : none )) 폼 외관 초기화 브라우저 식별 접두사 없어도 되는 property outline-offset : 외곽선과 border 간격 outline : 외곽선 회원가입양식 form 속성의 고유한 디자인을 초기화 해서 모든 웹브라우저에서 동일하게 보이도록 하는 속성 010 outline은 border영역 외곽에 테두리 치는 속성 결과물

[2021/12/31]국비지원 CSS3 11-(4) 텍스트 설정 etc

text-overflow ellipsis : ... clip : 컷! word-wrap break-word : 길이가 긴 알파벳 단어의 줄바꿈 용도 word-break break-all : 단어 끊기 keep-all : 단어 유지 white-space normal : default 자동 enter nowrap : enter none pre : 연속 공백 유지. 줄바꿈은 수동 입력 pre-wrap : 모든 연속 공백 유지. 한 줄이 너무 길어지면 자동 enter pre-line : 모든 연속되는 공백을 합치며, 한 줄이 너무 길어지면 자동 enter break-spaces pre-wrap과의 차이점 줄 끝에 연속 공백 있는 경우 공간 인정 연속 공백이 있어도 중간, 끝 어디서든 자동 enter elemen..

[2021/12/31]국비지원 CSS3 11-(3) column

신문기사처럼 단 나누기 : column column-count : 단 개수 column-gap : 단 간격 column-rule : 단 구분선 허브란? 라틴어의 "푸른 풀"을 의미하는 Herba에서 출발하며, "잎, 줄기와 뿌리 등이 식용, 약용에 TM이거나 향기나 향미가 이용되는 식물의 총체"라고 할 수 있다. 즉, 잎, 줄기, 뿌리, 꽃 등을 허브의 의미에 포함하며 그 성분이 식품이나 음료속에 보존용 향신료 EH는 건강증진제로서 첨가되는 식물과 식품, 음료 외에 제품에 향수, 화장, 세정의 효과를 기대하여 이용되는 식물의 전부라고 할 수 있다.현재 국내에서 일반적으로 알고 있는 허브에 대한 개념은 외국에서 도입된 식물에 한정지어 생각하는 경우가 대부분이나 사실은 이미 수 천년 전부터 우리 조상들도 생..

[2021/12/31]국비지원 CSS3 11-(2) background-size, resize

background-size cover : 틀 맞춤 contain : 이미지 맞춤 background-origin ( 상대적 배치 ) border-box : 틀 기준 padding-box ( default ) : 틀 내부 여백 기준 content-box : 내용 기준 background-clip border-box : 2D상 테두리 바깥 침범 ( 3D z축 상 테두리 아래 위치 ) padding-box : 여백까지만 침범 content-box : 내용 기준 배경 이미지 원본 배경 이미지 div 크기의 90% 90%로 할 때 배경 이미지를 150px 120px로 할 때 cover contain 원본 background-origin background-clip 결과물 ≫ textarea 안에 이미지가 있으면..