CSS (24) 썸네일형 리스트형 CS50's Web Track-1 Tracks_ Web Introduction 인터넷에서 실행되는 프로그램을 만들어보기 위한 track이다. 인터넷의 기본과 어떻게 동작하는지를 먼저 배운 뒤, HTML, CSS, JavaScript와 같은 인터넷에서의 언어, 웹 페이지를 application으로 바꾸기 위한 Python에서의 framework와 SQL에 대해 배운다. HTTP 컴퓨터는 네트워크를 이용해 서로에게 메시지를 주고 받으면서 소통한다. 가장 기본적으로 메시지를 주고 받기위해 따라야 하는 규칙인 standard protocol이 존재한다. 인터넷의 standard protocol은 TCP/IP 로 Transmission Control Protocol과 Internet Protocl이다. IP Address 보다 쉽게 이해하기 위해.. 생활코딩 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) 이미지 뿐만 아니라 문자에도 적용할 .. 이전 1 2 3 다음 목록 더보기
