적절한 사진 배치는 블로그나 홈페이지에 있어서 아주 중요한 요소입니다. 오늘은 저작권에 상관없이 사용할 수 있는 이미지 사이트들을 알아보고 등록을 하지 않고도 간단하게 api로 이미지를 불러오는 방법을 알아보겠습니다. 무료 이미지 사이트 우선 소개할 사이트는 픽사베이입니다. 픽사베이 홈페이지 바로가기 이미 많은 분들이 알고있는 그 픽사베이입니다. 이미지와 비디오까지도 무료로 사용할 수 있습니다 상업적으로 사용하셔도 됩니다. 하지만 예외도 있습니다. 예를 들어 나사의 사진을 판매하는 상품 옆에 두고 나사가 추천한다는 식으로 작성하는 것은 문제가 될 수 있습니다. (이런 식으로 이용하는 분은 없겠지만요.) 언스플래시 홈페이지 바로가기 또 소개할 무료 이미지 사이트는 언스플래쉬입니다. 언스플래쉬에서도 픽사베이..
홈페이지에는 글만 들어가는 것이 아니라 이미지도 들어가며 여러 아이콘들이 들어갑니다. 이번 포스팅은 폰트어썸(font aw)을 간단하게 사용할 수 있는 방법과 예제를 통해서 연습을 조금 해보겠습니다.폰트어썸이란? 홈페이지를 만드는데 아이콘은 필수적인 요소입니다. 하지만 저작권이 문제가 될 수 있으니 쉽게 가져다 쓸 수도 없는 노릇이죠. 이런 고민들을 해결해주는 많은 도구들이 있지만 오늘은 폰트어썸에 대해서 설명드리겠습니다. 폰트 어썸(font awesome)은 무료로 다양한 아이콘들을 제공해줍니다. 폰트어썸 사이트 바로가기 해당 사이트에 접속하시면 다양한 아이콘들을 검색할 수 있습니다. 네비게이션 바에 라이센스를 확인하시면 폰트어썸은 상업적으로도 무료로 사용가능하다고 적혀있습니다. 정확히는 위의 링크로 ..
구글폰트 이용하기 구글에서는 무료이면서 상업적으로도 사용할 수 있는 폰트들을 모아 두고 개발자가 이용할 수 있게 만들어 놓아습니다. 바로 오늘 포스팅할 구글 폰트입니다. 구글 폰트 바로가기 기능을 하나씩 알아보고 코드에 삽입해 보겠습니다. 우선 폰트 이름 밑에 영어로 된 문장들이 보이시죠? 저 부분은 폰트를 사용하면 어떻게 보이는지 보여줍니다. 그리고 문장 부분은 클릭하면 수정할 수 있습니다. 한번 바꿔볼까요? 마음에 드는 폰트가 있나요? 그럼 폰트이름 옆에 있느 +를 눌러주세요. 마음에 드는 것이 많으면 여러개를 클릭하셔도 상관 없습니다. 클릭하고 나면 홈페이지의 하단에 창이 하나 생깁니다. 창을 클릭해주세요 태그를 이용하는 것이 기준이 된다고 하니 일단 태그를 사용해서 예제를 만들어 보겠습니다. 태그..
지난 시간에는 반응형 웹에 대해서 미리 알고 있어야 할 것들을 배웠습니다. 반응형 웹이 무엇인지 설명한 후 반응형 웹을 만들기 위해서는 길이를 가변적으로 해야하며, 뷰포트 메타태그와 미디어쿼리가 필요하다고 설명드렸는데 다 기억나시나요? 예제를 같이 만들면서 이미 설명한 부분은 빠르게 넘어가니 기억이 안나시면 꼭 복습해주세요. 반응형 웹 제작하기 1 오늘은 무엇을 만들지 같이 살펴볼까요? 3개를 모아놓고 찍으니 약간 징그럽지만 참아주세요. 넬슨 만델라의 명언을 가지고 간단하게 반응형 웹을 만들어 보았습니다. 브라우저의 크기가 달라져도 컨텐츠는 가운데에 위치하고 데스크톱 사이즈가 되었을 땐 명언의 폰트사이즈가 2배가 되었다는 것을 주목해주시면 됩니다. 같이 만들어 볼까요? 우선 이미지와 파일들을 구성해봅시다..
반응형 웹이란 무엇일까요? 화면에 맞게 웹페이지를 보여주는 것을 "반응형 웹"이라고 합니다. 미래의 일을 예상하기엔 힘들지만 확실한건 아주 다양한 화면을 가진 기기들이 나올 것이고, 지금보다도 더 많은 사물에서 인터넷으로 접속하는 것이 가능해질 겁니다. 그때마다 그 기계에 맞는 페이지를 따로 구성해야할까요? 그러기엔 돈도 시간도 너무 많이 들어가겠죠. 하나의 코드로 여러 기기마다 최적화되서 보여줄 수 있다는 건 정말 매력적인 일입니다. 모바일이 조금 더 많습니다. 휴대폰 없이 사는 건 정말 상상하기도 싫은 세상. 반응형 웹의 중요성은 말 안해도 아시겠죠? 이제부터 같이 만들어 봅시다.가장 먼저 배워야 할 것들은 무엇일까요? 예제를 보면서 따라 만들어보기 전에 우선 알아두어야 할 개념이 3개 있습니다. 이..
css의 position 속성 배우기 홈페이지를 만들기 전에 우선은 css속성 중에 하나인 position에 대해서 알아야 합니다. 반응형 웹을 만들기 전에 우선 position 속성을 배워봅시다. position 속성은 사용되는 엘리먼트들의 위치를 지정할 때 사용하는 속성입니다. 각 엘리먼트들은 위치를 옮길 수 있습니다. left, right, top, bottom이라는 속성들로 말이죠. 이렇게 위치를 옮기는 것을 오프셋을 조정한다고 합니다. left, right, top, bottom 등 오프셋을 조정할 수 있는 속성에는 길이 단위(px, em 등)와 %(퍼센트)를 줄 수 있습니다. 그저 오프셋을 지정한다고 엘리먼트들이 움직이는 것은 아닙니다. 포지션 속성을 설정해줘야 지정한 오프셋에 따라 엘리먼트들..
플렉스를 활용해서 에어비앤비 네비게이션 바를 만드는 작업은 오늘로 마무리 되겠네요. 어서 마무리하고 다음 시간엔 더 재밌는 것을 만들어보겠습니다. 네비게이션 바 만들기 1 - 준비운동네비게이션 바 만들기 2네비게이션 바 만들기 3 지난 시간에 설명했던 것들은 알고 있으신 것으로 생각하고 빠르게 넘어갑니다. 혹시 기억이 나지 않으시면 위의 링크를 클릭해서 복습해주세요 ! margin에 auto 값 주기 우선 에어비앤비에서는 로고는 왼쪽 끝에 위치하고, 나머지 글들은 오른쪽 끝에 위치했습니다. 로고를 제외한 나머지 리스트들을 오른쪽 끝으로 이동시켜 보겠습니다. 어떻게 해야할까요? 첫번째 리스트(로고)의 오른쪽에 마진값을 auto로 지정하면 어떻게 될까요? 컨테이너 안에 있던 여유공간이 지정한 곳으로 이동하게..
저번 시간에는 태그를 통해서 html문서와 css문서를 연결해 보았습니다. 혹시 기억이 나지 않으면 아래의 링크들을 클릭해서 복습해주세요. 1. 네비게이션바 만들기 1 - 준비운동2. 네비게이션바 만들기 2 html문서에 내용을 채워봅시다 네비게이션 바는 보통 태그와 태그 그리고 태그로 만들어집니다. 아래의 소스코드를 html문서의 태그 안에 넣어 주세요. 호스팅하기 도움말 회원가입 로그인 파일을 실행시켜 보시면 위의 사진 같은 모양이 되어있을 겁니다. 가장 눈에 띄는 이미지 사진부터 크기를 맞춰보도록 하겠습니다. img{ width: 32px; height: 32px; } css파일에 테스트겸 적어봤던 div{color:blue;}를 지우고 위의 소스코드를 넣어주세요. 그럼 이미지의 크기가 가로 세로 ..
플렉스를 활용해서 에어비앤비의 네비게이션바를 만들어 봅시다. 1. 준비운동 다시보기 저번 시간에는 만들기 전에 미리 알아두셔야 할 것들을 설명하는 시간을 가졌습니다. 혹시 기억이 안나시면 위의 링크를 클릭해주세요! 이번 시간부터는 플렉스를 통해서 에어비앤비의 네비게이션바를 만들어 보도록 하겠습니다. 네비게이션바는 홈페이지에서 이동이 편리하도록 만들어주는 링크 목록이라고 할 수 있습니다. 에어비앤비 홈페이지에서 확인하기 우선 만들기 전에 몇 가지 분석을 해보겠습니다. 네비게이션바에는 왼쪽에 에어비앤비의 로고가 들어가 있고, 오른쪽에는 호스팅하기, 도움말, 회원가입, 로그인이라는 리스트들이 있습니다. 클릭하고 나서는 자바스크립트가 필요하니 지금은 클릭하기 전의 겉모습만 만들어볼 예정입니다. 마우스를 리스트 ..
플렉스를 이용한 실전예제 만들기 그저 배우기만 하는 것은 재미가 없죠? 플렉스를 이용해서 실전예제를 만들어보면 좀 더 재밌고 더 이해도 가실겁니다. 무엇을 만들지는 다음시간부터 다루기로 하고 이번 포스팅은 본격적으로 만들기 전에 미리 알아두셔야 할 것들을 설명드리겠습니다. flex에 관한 보충설명 아이템에 flex라는 속성은 flex-grow와 flex-shrink, flex-basis의 축약형이라고 이전 시간에 다뤘습니다. 그럼 3개가 다 나오지 않고 1개나 2개의 값이 나온다면 무엇을 나타낼까요? flex: 1;(또는 다른 양수)가 온다면 flex: 1 1 0;과 같습니다. 그리고 flex:1 1;이라고만 적혀있다면 flex: 1 1 0;과 같습니다. flex: 양수;라면 flex: 양수 1 0;이라..