aPOST

HTML&CSS 마스터북 단행본 출간

HTML과 CSS 학습 단행본이 새로 출간되었습니다. 분량이 720 페이지로 기초부터 쇼핑몰 레이아웃 예제까지 상당히 많은 내용을 담고 있습니다. 기초 부분은 블로그에 올렸던 강의들에 내용을 추가해서 넣었고, 뒷부분은 여러가지 실전 예제들을 만들어보는 강의들로 구성되어 있습니다. PDF 이북도 함께 판매되고 있고, 이북 가격을 상당히 저렴하게 책정했습니다. 많이 구입해주세요. ^^/ 구매처 --------------------------------------------- * 할인 가격

MS워드에 첨부한 이미지 파일들만 추출하기

MS워드에 사용한 원본 이미지들을 가져와 다른 프로그램에서 사용하거나 이미지 파일로 따로 저정하려면 MS워드의 이미지 컨텍스트 메뉴를 이용해서 별도의 파일로 저장하면 됩니다. 문서 안에 사용한 이미지 파일이 많을 경우 상당히 번거로운 반복 작업을 해야 합니다. 이미지를 하나씩 선택해서 파일로 저장하는 번거로움을 줄일 수 있습니다. MS워드 문서 포맷은 기본적으로 ZIP 압축 파일입니다.

라이젠 노트북 부스트 모드를 꺼서 발열 상황 개선하는 방법

노트북 발열 관리가 인텔 모바일 프로세서보다 좋지 않은 라이젠 2세대 노트북(조금 나아진 3세대 포함)은 부하를 조금 만 걸어도 쿨링팬이 비행기 이륙하는 소리만큼 납니다. 전원관리 옵션을 이것 저것 만져봐도 크게 달라지지 않습니다. 라이젠 모바일 프로세서의 경우 윈도우에서 설정할 수 있는 옵션 값(전원 절약 모드)이 보이지 않는 경우가

MS워드 테이블 셀 내용이 행이 나누어지지 않도록 엑셀로 가져오기

MS워드에서 테이블을 복사해서 엑셀로 붙여넣으면 모양과 스타일이 잘 유지되어 복사되지만, 예상하지 못한 문제가 생길 때가 있습니다. MS워드의 테이블 셀 1개가 엑셀의 셀 1개로 내용이 맞게 들어가면 좋을텐데, MS워드의 테이블 셀 안에 있는 내용이 여러 문단으로 구성된 내용인 경우, 이 내용들은 엑셀의 여러 행으로 분리되어 붙여넣기 됩니다. 예를 들어 다음의 MS워드

CSS 애니메이션 기초

웹페이지를 풍부하게 만들어주는 가장 좋은 방법은 뭔가가 움직이는 것을 보여주는 것입니다. 과거에는 플래시나 실버라이트같은 애니메이션과 상호동작에 특화된 도구나 확장이 있었지만, 표준에서 벗어난 고유의 기술이었고, 뛰어난 기능적인 특징들에도 불구하고 보안과 성능 문제등 여러가지 문제점이 부각되면서 완전히 퇴출되었습니다. 플래시나 실버라이트 모두 웹에 애니메이션을 구현해주는 특화되고 독보적인 특징이 장점인 만큼 이 기술을 대체할

SVG 벡터 경로(Path)를 따라 이동하는 CSS 애니메이션 만들기

CSS 애니메이션을 만들어 사용할 때 대부분의 애니메이션은 직선 이동, 또는 크기 변경입니다. 전문적인 애니메이션이 아닌 이상 요소의 이동은 직선이 대부분입니다. 직선이 아닌 경우에도 직선을 여러개 이어 붙여서 표현하면 어색하지 않게 방향이 변하는 이동 경로를 만들 수도 있습니다. 예를 들어 다음처럼 여러 개의 직선 이동을 하나의 키프레임 애니메이션으로 표현할 수 있습니다.

CSS 애니메이션 이벤트와 자바스크립트 연동하기

웹페이지 레이아웃에 적용하는 CSS 애니메이션이나, 배너, 또는 아이콘 애니메이션은 그것만으로도 풍부한 웹페이지를 만드는데 도움을 줍니다. 그리고, 사용자 액션에 반응해서 애니메이션이 동작하도록 하는 것 정도는 체크박스나 마우스호버 속성 등을 이용하면 CSS 만으로 구현을 할 수 있습니다. 그러나, 애니메이션이 시작되거나, 애니메이션이 종료되는 시점에 특정 액션이 동작하도록 하거나 새로운 애니메이션, 또는 UI가 동작하도록

티스토리스킨

GIF 이미지 파일 없이 투명 이미지 만들어 쓰기

부트스트랩이나 CSS로 레이아웃을 잡는게 주류가 되면서 요즘은 잘 사용하지 않지만 메뉴나 레이아웃을 이미지를 사용해 잡은 경우 CSS로 특정 위치의 요소에 크기값을 일일이 주는 것이 생각보다 번거롭습니다. 특히 쇼핑몰의 상품 진열이 복잡한 경우 비어있는 배너 이미지 영역을 처리할 때 그렇습니다. 이런 경우 아얘 1px x 1px 투명 gif이미지를 만들어 크기를 잡아

체크박스와 CSS로 만드는 사이드바 펼침 레이아웃

체크박스의 체크 상태를 활용하면 사용자 선택에 의한 다양한 레이아웃 변경을 구현할 수 있습니다. 보통은 자바스크립트를 사용해 클릭 이벤트 리스너를 등록하는 방식으로 처리를 하기도 하지만, CSS와 체크박스만으로도 기본적인 기능들은 모두 구현이 가능합니다. 먼저 플렉스박스를 이용해 기본적인 레이아웃을 작성합니다. 메인 컨텐츠를 표시하는 "

" 태그 영역과 메뉴를 표시하는 사이드바 표시에 "

변수를 활용해 CSS 애니메이션 만들기

CSS 변수를 잘 활용하면 반복해서 정의해야 하는 애니메이션 작업을 작은 CSS 코드로 줄일 수 있습니다. 키프레임 애니메이션 안에서도 CSS 변수를 사용할 수 있기 때문에 여러 개의 유사한 키프레임 애니메이션을 만들지 않고 한개의 애니메이션 정의를 재활용할 수 있습니다. 하트 모양이 여러개 겹쳐서 입체 느낌이 나면서 퍼져나가는 다음과 같은 애니메이션을 만들어 보겠습니다.