공부를 합니다/웹 (Web) (24) 썸네일형 리스트형 생활코딩 CSS_13 라이브러리(Library) 13. 라이브러리 (Library) Fontello 특정 문자에 해당하는 이미지로 이루어진 폰트를 제공하는 사이트. 원하는 아이콘을 선택한 뒤 (여러개 선택 가능) Download webfont를 누르면 다운로드 선택 내역은 config.json 파일에 저장되고 선택 내역이 초기화 됐을 때 설정을 눌러 이 파일을 업로드하면 목록을 다시 불러올 수 있다. svg 파일을 받아서 사이트에 drag & drop 하면 나만의 아이콘 폰트를 만들 수 있다. demo.html을 열어 다운받은 아이콘 리스트를 확인 show codes를 누르면 각 이미지의 문자 값 (i.e. unicode)를 보여준다. 이 값을 복사해서 부분에 붙여 넣어 사용 할 수 있다. 아이콘을 사용하려는 html파일에 fontello.css를 링.. 생활코딩 CSS_12 유지보수 12. 유지보수 12.1 Link와 Import 동일한 css가 적용된 웹 페이지가 여러개일 때, 수정사항을 일괄적으로 적용할 수 있도록 해줌 여러개의 웹 페이지에 중복된 css가 있을 때, 중복된 코드를 별도의 css파일 (e.g style.css)를 따로 작성한다. link나 import를 이용해서 웹페이지가 style.css를 다운받아 적용할 수 있도록 한다. 링크로 style.css를 걸어놓은 모든 문서는 style.css만 수정하면 일괄적으로 수정된다. 12.2 코드 경량화 (minify) 서버와 클라이언트 사이의 데이터 이동을 줄이기 위해 코드의 불 필요한 부분을 줄이는 것 코드를 minify 해주는 다양한 도구들이 있고 대표적으로 clean-css를 많이 사용한다. clean css를 이용하.. 생활코딩 CSS_11 모션 그래픽 11. 모션 그래픽 전환(Transition) 효과가 변경되었을 때 부드럽게 넘어가도록 처리해주는 기능. Transition 마우스로 링크를 클릭했을 때 링크의 위치와 font 크기가 변화는 효과를 설정 a { font-size: 3rem; } /*마우스로 링크를 클릭했을 때*/ a:active { transform: trnaslate (20px, 20px); /*x, y축으로 20px씩 이동*/ font-size: 2rem; /*font size를 2rem으로 줄임*/ } active 상태로 바뀌는 순간을 transition을 이용해서 자연스럽게 만듬. a{ /*클릭 전*/ font-size: 3rem; /*transform은 element가 inline이면 동작하지 않아서 display속성을 바꿔주어.. 생활코딩 CSS_10.5 SVG 10.5 SVG 벡터(Vector) 이미지를 표현하기 위한 포맷 Vector vs Bitmap Bitmap: pixel로 이루어져 있어 확대하면 이미지가 깨진다. (e.g .jpeg, .png 등) Vector: 점과 선의 연결정보로 되어있어 확대해도 이미지가 깨지지 않는다. (e.g .ai, .svg 등) svg svg도 다른 비트맵 이미지 처럼 img 태그를 이용해서 삽입한다. 배경 이미지로 svg파일을 사용 .svg { background-image: url(image.svg); } svg 파일 만들기 svg 파일을 텍스트 에디터로 열어보면 몇 개의 태그와 태그 속성 값으로 되어있다. (XML 마크업 이용) 빈 svg 파일을 만든 뒤 svg 태그 안에 만들고 싶은 도형과 속성을 적어서 svg 파일을.. 생활코딩 CSS_10.4 변형(transform) 10.4 변형(transform) Element의 크기, 위치, 모양을 변경하는 속성 Transform transform 속성 값으로 변형 종류를 적은 뒤 괄호 안에 정도를 표기한다. h1 { /* x축 방향으로 2배 늘림 */ transform: scaleX(2); } x축, y축 방향을 별도로 지정할 수 있는 변형이 많으며 x, y축 방향으로 모두 변형시키고 싶으면 한 줄안에 적어야한다. h1 { /* 두 번째 줄의 y축 방향 변형만 적용됨 */ transform: scaleX(2); transform: scaleY(2); /* x, y축 방향 모두 변형이 적용됨 */ transform: scaleX(2) scaleY(2); } 그 외 효과는 강좌 페이지의 codepen 자료를 참조 Transform.. 생활코딩 CSS_10.3 혼합(Blend) 10.3 혼합(blend) 이미지와 element를 혼합해서 새로운 이미지를 만들어 내는 기법 원본을 유지한 채 코드를 통해서 효과를 주기 때문에 각 element의 특성을 유지하거나 동적 element를 만들어 사용자와 상호작용 하기에도 용이하다. 예를 들어 텍스트를 '텍스트 자체'로 유지가 가능하기 때문에 복사, 검색 등이 가능 Background-blend-mode 배경(background) 끼리 blend .blend { /* blend 할 색상 */ /* 색상 표현: rgba (RED, BLUE, GREEN, 투명도) */ background-color: rbga(255, 0, 0, 0.5); /* blend 할 이미지 */ background-img: url('sample.jpg'); /* b.. 생활코딩 CSS_10.2 필터(Filter) 10.2 필터(filter) 원본 이미지는 유지하면서 코드를 통해서 이미지에 효과를 주는 기능 Vendor prefix 속성을 실험적으로 지원하는 경우 특정 browser에서 해당 속성을 인식할 수 있도록 붙여주는 접두사 -vendor_prefix-property: value; 형태로 적는다. Browser 마다 vendor prefix를 다르게 해서 적고 마지막에 표준 속성을 적어주어야 한다. Vendor prefix browser -webkit- Safari, Chrome -moz- Firefox -o- Opera -ms- Internet Explorer 필터(Filter) 속성값으로 적용할 필터의 종류와 적용 값을 적는다. filter: effect(value) 이미지 뿐만 아니라 문자에도 적용할 .. 생활코딩 CSS_10.1 배경(background) 배경(background) Element의 배경을 설정하는 기능 배경색 및 이미지 div { background-color: color; /*배경 색 변경*/ background-image: url("\relative\path.png"); /*배경 이미지 변경*/ } 배경색과 이미지는 중첩해서 적용할 수 있다. 이미지에 투명한 부분이 있거나 태그 영역을 가득 채우지 않으면 배경색이 보인다. 배경 이미지 속성 배경 이미지를 변경할 수 있는 속성 div { background-image: url("\relative\path.png"); background-repeat: no-repeat; background-attachment: fixed; background-size: 150px 100px; backgro.. 이전 1 2 3 다음