본문 바로가기

전체 글

 (31)
[깃허브] 이력서 페이지 만들기 (3) - 내용 채우기 이전 내용 앞의 내용에서 기본적인 HTML 문서 구조를 만들고 제목까지 붙여 보았습니다. 앞의 내용이 궁금하다면 아래 링크를 참고하세요. [깃허브] 이력서 페이지 만들기 (1) - 환경 설정하기 [깃허브] 이력서 페이지 만들기 (2) - 마크업하기 헤더 내용 채우기 대부분의 이력서에는 이력서 제목에 사람의 이름을 표시합니다. 즐겨 사용하는 닉네임이 있다면 닉네임을 적기도 하죠. HTML 태그 중 가장 큰 제목을 나타낼 때는 태그를 사용합니다. index.html에서 아래 소스 부분에서 '이름' 부분을 자신의 이름으로 수정합니다. 그리고 '타이틀' 부분에는 현재 직함을 적습니다. 수정 전 태그 앞에 추가하세요. 태그가 아니라 태그라는 점에 주의하세요. 2) 내용 작성하기 소셜 미디어 연락처는 클릭했을 때 ..
[깃허브] 이력서 페이지 만들기 (2) - 마크업 하기 이전 내용 [깃허브] 깃허브에 이력서 페이지 만들기 (1) - 환경 설정하기 "마크업(Markup)"이란 웹 브라우저가 이해할 수 있는 기호를 사용해 문서를 구성하는 것을 말합니다. 예를 들어, 여기에서 여기까지는 메뉴고, 이 부분은 텍스트고, 또 이 부분은 이미지라고 알려주는 것이죠. 조금 더 확장하면 텍스트라도, 제목과 일반 텍스트가 다르고, 제목도 1단계 제목, 2단계 제목으로 구성되기도 합니다. 물론 텍스트 역시 순수한 텍스트한 있는 반면 목록이나 인용문 등도 있고요. 이렇게 웹 문서에서의 역할에 따라 해당 부분에 표시해 주는 것을 '마크업'이라고 하고, 이 때 사용하는 기호를 '태그'라고 합니다. 이미 HTML에 대해 공부했다면 지금부터 알려주는 소스가 쉽게 이해되겠지만, 아직 HTML을 공부하..
[깃허브] 이력서 페이지 만들기 (1) - 환경 설정하기 깃허브는 온라인 상에서 버전관리를 위해 가장 많이 사용하는 서비스입니다. 개인이나 팀의 소스를 관리하고 공동 작업하기에도 편리하죠. 깃허브에 개발에 관심있는 사람들이 많이 모이면서 최근에는 개발직군으로 취업할 때 깃허브 계정을 요구하는 곳이 많은데요, 평소에 코딩 작업을 어떻게 하고 있는지, 어떻게 관리하는지를 한 눈에 보여줄 수 있기 때문입니다. 물론 입사 후에 공동 작업을 위해 깃허브를 제대로 다루는 것도 필수가 되고 있고요. 특히 깃허브를 통해 웹 사이트를 호스팅할 수도 있고 블로그를 운영할 수도 있습니다. 블로그를 운영하기 위해서는 사이트 빌더인 지킬(Jekyll)을 함께 공부해야 합니다. 오늘은 깃허브에 자신의 이력서 페이지를 만드는 방법에 대해 알아보겠습니다. 여기에서 사용한 소스는 Micro..
파비콘(favicon) 사용하기 "파비콘(favicon)"에 대해 들어보셨나요? favicon란 favorite + icon의 줄임말입니다. 우리가 특정 사이트를 즐겨찾기에 추가했을 때 함께 표시되는 아이콘이기 때문에 줄여서 파비콘이라고 부르죠. 사이트를 방문했을 때 사이트 제목에도 함께 나타납니다. 내가 만드는 사이트에도 파비콘을 추가할 수 있을까요? 물론입니다. 파비콘으로 사용할 아이콘 준비하기 파비콘으로 사용할 아이콘은 직접 아이콘을 만들어서 사용할 수도 있고, 가지고 있는 이미지를 아이콘 형태로 변환할 수도 있습니다. 이것도 힘들다면 기존의 파비콘 중에서 검색해서 사용할 수도 있죠. (물론 개인적인 용도일 경우입니다) 파비콘 파일 크기 파비콘을 직접 만들어 사용할 경우 그 키는 16*16이나 32*32로 만듭니다. 아이콘이기 때..
가상 요소 ::before, ::after CSS의 가상 요소 중 ::before와 ::after는 지정한 요소의 앞이나 뒤에 텍스트나 이미지 등을 삽입할 수도 있고, 스타일을 추가할 수도 있습니다. HTML 태그 마크업(markup)은 웹 문서의 내용을 작성할 때 사용하는데, 예를 들어 버튼 앞에 붙이는 아이콘은 굳이 마크업을 사용할 필요는 없죠. 단순히 눈에 보이는(visiblie) 효과를 위해서 사용하니까요. 그래서 이런 요소들은 마크업 대신 ::before 가상 요소를 사용해서 삽입하는 경우가 많습니다. ::before나 ::after 요소를 사용할 때는 다음과 같은 형식을 사용합니다. 이 때 content 속성은 내용의 앞이나 뒤에 추가할 내용을 가리키는데, 따로 추가할 내용이 없다면 content:""; 처럼 빈 문자열을 사용합니다. ..

티스토리툴바