올리비아 코딩스쿨

1. 들여쓰기 간격 시각화하기 atom> file> setting> editor> show indent guide 2. HTML. CSS 코드 html 코드 My Skills. Lorem & Ipsum Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros. Lorem Ipsum Dolor Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Cura..

자료를 만들 때, 상황에 적절한 애니메이션을 원한다면 giphy.com을 추천한다. 원어민 선생님 수업을 들었거나, 외국에서 생활한 경험이 있는 사람이라면 우리나라와는 다르게 외국에서는 "짤"이라고 통용되는 애니메이션을 많이 쓰는 문화를 잘 알 것이다. 그들은 상황에 적절하고, 그 상황을 잘 대변할 수 있는 재미있는 짧은 애니메이션을 가져와 수업의 동기유발을 높이거나, 더 이해하기 쉽게 가르쳤다. 나 역시 저런 짤은 어디서 가져오는 걸까, 궁금했는데 나와 같은 분들을 위해 오늘은 무료로 이용이 가능한 애니메이션 모음 사이트를 추천한다. 검색창에 내가 원하는 주제로 검색하면 된다. picture을 검색해보자. 움직이는 애니메이션이 정말 많이 나온다. 현재는 소리가 꺼져있지만, 마우스를 올려놓으면 소리가 켜..

수 많은 일러스트가 존재하는 곳! Flaticon 이곳에는 8만 여개가 넘는 백터 아이콘과 스티커가 존재한다. PNG 형식으로 다운로드 받을 수 있고 대부분 무료로 사용이 가능하다. 다만 SVG, EPS, PSD, CSS 형식을 이용할 때는 사용료를 지불할 수도 있다. 내가 원하는 주제로 검색을 하면 아주 다양한 결과가 나온다. 나는 icon으로 picture을 검색했다. 색깔에 따라 컬러, 흑백, 그래디언트로 분류된다. 모양에 따라 아웃라인, 채우기. 리니어 칼라, 손그림 등으로 분류된다. 만약 검색할 때 애니메이션 아이콘으로 선택했다면 움직이는 그림도 얻을 수 있다. 알록달록 예쁜 스티커도 많다. 다운로드를 해보자. 해당하는 그림을 클릭한다. 원하는 형식으로 다운로드 하면되고, 해당 라이센스는 개인적..

placeholder "Lorem Ipsum" 아직 들어갈 컨텐츠가 정해지지않았을 때, 대체 텍스트를 만들어주는 사이트 2개를 추천한다. Lorem Ipsum은 아무런 의미가 없는 글자들이다. 이것이 존재하는 이유는 제작자가 아직 콘텐츠는 없는 상황에서 제목 칸, 단락 칸 등 대강의 레이아웃은 잡아놓고, 그 안에 대략적으로 얼마 만큼의 텍스트가 들어갈 지 가늠해야 하는 경우이다. Lorem Ipsum으로 이 안의 내용을 대체할 수 있기 때문이다. https://loremipsum.io/ Lorem Ipsum은 대체 택스트로서 그래픽, 인쇄, 출판 등의 작업을 할 때 최종 완료물을 시각적으로 미리 확인하는데 쓰인다. 그냥 진짜 글자처럼 보이게 하기 위해서 디자인 된 글자들이라서 사전적 의미는 없다고 한다...

웹사이트에서 모든 텍스트의 폰트 변경하는 방법 웹사이트에서 폰트를 선택하는 것은 매우 중요하다. 내 웹사이트를 방문하는 모든 방문객이 해당 폰트가 적용된 글을 읽게 될 것이기 때문이다. 읽기에 편안한 폰트를 선택하는 것은 내 웹사이트의 가치를 올리는 일이 된다. 글씨 크기, 색깔을 선택하는 것 역시 마찬가지이다. 1. Font Families CSS는 총 5가지의 Font Families를 갖는다. Serif, Sans-serif, Monospace, Cursive, Fantasy 그 중 앞의 3가지를 자주 쓴다고 보면 된다. 먼저 Serif와 Sans-serif의 차이를 보자. Serif에는 글자의 끝 부분에 발이 달려있다고 생각하자. 빨갛게 생긴 부분이 Serif이다. 컴퓨터 스크린에서는 serif가..