올리비아 코딩스쿨

간단한 일러스트레이트, 아이콘을 구할 수 있는 사이트이다. 웹사이트를 제작할 때 필요한 유용한 아이콘이 필요하다면 이곳을 방문해보자. 모두 무료이다. (단 프로버전을 이용하고 싶다면 구독료를 지불해야한다.) https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 우선 해당 사이트를 무료로 사용하기 위해 이메일을 보내서 키트 코드를 받는다. 이메일을 입력해서 send kit code를 클릭하면 아래의 화면이 나온다. 그러면..

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

오늘은 모든 요소를 중앙에 놓는 방법을 배워보겠다. 원본 그대로의 코드와 화면은 아래와 같다. html code 나의 사랑 앤! css code div { width:700px; height:700px; background-color: blue; } 모든 요소를 가로로 넣기 위한 방법이다. text-align: center 텍스트를 중앙으로 정렬한다. body { text-align: center; } margin: 0 auto 0 auto h1 { width: 35%; margin:0 auto 0 auto; } parents 요소는 position:relative; children 요소는 position:absolute; 그리고 배치! h1 { padding:100px; } body { text-ali..

Absolute Positioning Absolute Positioning은 상위 개체(부모계층)에 의해 상대적(relative)으로 배치하게 된다. 만약 가까이에 만들어진 상위 개체가 없다면, body가 그 역할을 한다. 예를 들어보자, parents: div children: img 빨강색 div 위에 img가 있다. div는 parents 상위개체 img는 children 하위 개체가 된다. 여기에서 img position의 position 값을 absolute로 바꾸고 오른쪽 90px, 위 300px의 값의 여백을 주면 상위개체를 기준으로 이미지가 이동한 것을 알 수 있다. div { width:700px; height:700px; background-color: red; position: rel..

CSS Positioning에 본격적으로 들어가기 앞서 기억해야 할 점은, CSS를 적용하지 않는다고 하더라도 HTML의 기본값이 이미 존재한다는 사실이다. 이 사실을 잊어서는 안된다. HTML Positioning Rules 따라서 먼저 HTML에서 화면을 보여주는 규칙을 간략하게 살펴보자. 규칙 1 Content is everything!! 들어가는 내용, content가 중요하다. 앞서 살펴봤던 display 속성 중 inline 같은 경우에는, 들어가는 content의 width, height 만큼 상자가 만들어진다. display 속성 중 block 역시, 비록 width는 화면 전체를 차지한다고 하더라도, height 만큼은 font에 의해서 결정된다. 규칙2 Order comes from C..