CSS, Javascript, jQuery/information (23) 썸네일형 리스트형 왜곡 rotate : 오브젝트를 왜곡할 때 부모요소에 perspective 속성을 활용하면 원근법에 의한 거리를 조절할 수 있다. 0이상이면서 수치가 작을수록 더 가까이 있기 때문에 왜곡의 정도가 더 심해 보인다. translate:구조를 만들 때 부모요소를 만들어 부모요소에 perspective를 설정하고 이동하고싶은 자식요소의 수치를 변경한다. perspective가 0이면 부모위치에 같이 위치하고 수치가 -음수이면 부모기준으로 뒤로 멀어지고 +양수이면 부모기준으로 앞으로 튀어나오는데 수치가 작을수록 왜곡의 정도가 더 심하다. transform:속성을 속기법으로 다양한 변형속성을 한꺼번에 지정하면서 perspective 속성까지 한번에 담을 수 있다. 애니메이션 기법 transition : 동작을 할때 그 중간과정을 보이게 하는것 순서를 지켜주어야 한다. 속성 시간 속도 대기시간 (성시속대) 속도 ease(defalut) :점점 빠르다 느리다 빨라짐 ease-in : 점점 빨라짐 ease-out : 점점 느려짐 ease-in-out : 점점 빠르다 느리다 빨라짐 cubic-bezier(n,n,n,n) : 사용자 정의 animation: 이름 시간 속도 대기시간 (이시속대) 추가 가능한 속성 animation : 이름 시간 속도 대기시간 무한반복 반대 모드 animation-iteration-count : 반복횟수 animation-direction : 방향 animation-fill-mode : 재생후 스타일 모드 strites 이미지를 활용해서 애니메이션 줄 때에는.. Web Fonts 웹폰트는 *@가 있는 것은 상단부에 기술하는 것이 좋다(아래쪽에 기술하면 안먹힐때가 있음) coderen.io : 무료배포 사이트 Web Safe Fonts 보통 컴퓨터에 설치되어 있는 폰트들로 font-family의 속성값을 구성한다. Web fonts 웹 디자이너가 사용한 글꼴을 다른 사용자의 컴퓨터에 설치되어 있지 않아도 보여질 수 있도록 구현 @font-face Rule @font-face 규칙을 추가하여 나만의 폰트를 웹 서버에 포함 시켜놓으면 사용자가 자동으로 폰트를 다운로드하여 문서에 포함시킬 수 있다. 다양한 폰트를 사용하고 싶을 때 해당 폰트를 눈누폰트 사이트에서 다운받고 transfonter.org사이트에서 다양한 폰트 포맷으로 저장후 @font-fack rule을 이용하여 코딩하면 서.. position 속성 부모의 hight가 설정이 되면 자식의 height를 %로 설정이 가능하다. 컨텐츠를 센터로 배치하기 위해 position : absolute로 설정하고 left:50% 주고 margin-left : -컨텐츠의 가로길이의 반px로 설정 position속성 ***** static : 정적인 (기본설정 생략가능) relative : 상대적인 (현재 위치에서 왼쪽에서 얼만큼 상대적으로 붙는다) Absolute : 절대적인 (자기부모를 기준으로 왼쪽 상단에 붙는다) fixed : 고정된 position : absolute를 갖게되면 부모의 왼쪽 상단을 기준으로 자리를 잡는다. 그런데 부모가 position 속성을 갖지 않고 있다면 body를 기준으로 윈도우 창의 좌측 상단을 기준으로 위치를 잡게된다. posit.. 선택자 동위 선택자 단점 내앞에 오는 형제 태그는 선택할 수 없었다. -선택자A+선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택 -선택자A~선택자B : 선택자A 뒤에 위치하는 선택자B를 선택 태그의 동등한 위치를 판단하여 CSS속성을 설정 할 수 있다. + ~ +뒤에 오는 형제를 선택할 수 있다. (근접 선택자) ~내 뒤에오는 원하는 형제까지 선택할 수 있는 선택자 (나는 포함되지않는다) 동위선택자(형제관계를 선택하는 선택자)는 +(근접 선택자), ~이 있다. 선택자 1+ 선택자 2는 선택자 1 바로 뒤에 나오는 선택자 2만 선택해주고, 선택자 1~ 선택자 4는 선택자 1 뒤에 있는 선택자 2~4까지 선택을 해준다. 이 때, 선택자 1은 선택에 해당하지 않는다! 반응 선택자 마우스의 반응에 따른 속성을.. 다양한 스타일 CSS의 여러 속성 흘러서넘치는것이 안보이는 속성값. hidden float속성을 주었을 때 전체적으로 레이아웃이 틀어지는 것을 방지하기 위해 부모요소에 overflow:hidden을 꼭 설정해야 한다!! 넘치는걸 스크롤바를 이용해서 다보려면 scroll이라는 속성을 주면된다. 세로스크롤만 필요하다면 overflow-y : scroll; clear : both는 float로 공간을 붙일때 나누고싶은곳에 구조를 짠 뒤 clear라는 속성을 줘서 float끼리 붙지않게 방지해주는 역할이다. 부모가 %면 자식에게 고정값을 주나 %를 주나 같은값인다. 부모의 값이 먼저이기때문이다.. 박스에 width, height를 줄 때 기본적으로 padding, border는 가로, 세로 사이즈 안에 포함되지 않는다. 그런.. css 다양한 선언 CSS Cascading Style Sheet 1)In-Line 인라인 방식 : 태그에 style 속성명을 지정하고 속성값을 따옴표로 감싸서 스타일을 지정하는 방식으로 다른 방식과 함께 혼용했을 때에는 가장 강력하게 스타일을 덮어쓴다. 2)Internal 내부선언 방식 : html문서 안에 head 태그 안에 선언하는 방식으로 style태그 안에 선택자를 쓰고 스타일은 {} 안에 기술한다. 외부선언 방식과 함께 혼용하여 사용했을 때는 힘이 더 세서 스타일을 덮어쓴다. 3)External 외부선언 방식 : 파일을 따로 만들어서 스타일을 기술하는 방식으로 선택자{스타일을 기술} 파일명.css 확장자를 활용하여 파일을 생성하고 html안에 link 태그로 확장자명은 .css이다. 장점: 스타일은 하나에 기술한.. 이전 1 2 3 다음