본문 바로가기

공부를 합니다

 (84)
생활코딩 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..
생활코딩 CSS_10 그래픽 10. 그래픽(Graphic) 10.1_배경(background) 10.2_필터(filter) 10.3_혼합(blend) 10.4_변형(transform) 10.5_SVG
CS50's Week 6_ Python 6. Python Python Basics Print Hello world를 출력하기 위한 C코드와 python코드를 비교하면 // C #include int main(void) { printf("hello, world\n"); } # python print("hello, world") Standard library를 불러들일 필요가 없다. Main function을 선언하지 않아도 된다. Print함수 끝에 줄바꿈 \n을 해주지 않아도 된다 (줄바꿈이 default). Semicolon ;을 적어주지 않아도 된다. Python은 별도의 compile을 거칠 필요가 없는 interpreted language이기 때문에 위의 코드를 hello.py로 저장하면 코드를 실행하기 위해 바로 python hell..

티스토리툴바