본문 바로가기

분류 전체보기

 (31)
텍스트 안에 배경 이미지 넣기 CSS의 background-clip 속성을 이용하면 박스 모델 안에서 배경 이미지를 어디까지 표시할지 결정할 수 있습니다. background-clip: border-box | padding-box | content-box 예를 들어, 아래 소스에서 .bg1 스타일은 배경 이미지를 border-box까지 표시하죠 See the Pen bg-clip-1 by do.it.html5 (@kyrieko) on CodePen. 이 속성을 사용해서 텍스트 안에 배경 이미지를 넣을 수도 있습니다. 이 경우에는 background-clip 속성을 text로 지정하는데, -webkit- 접두어가 붙은 background-clip 속성도 함께 사용해야 합니다. 그리고 글자색은 trasparent로 사용합니다. backg..
css 단위 - 길이 CSS에서 글자 크기나 마진, 패딩, 너비 등 길이와 관련된 값을 설정할 때 여러 단위를 많이 사용합니다. 각 단위가 어떻게 다른지 확인해 보도록 하겠습니다. 1) px 단위 CSS를 공부할 때 처음에 사용하는 단위가 px 단위죠. px단위는 절대적인 크기를 가지기 때문에 웹 브라우저 창의 크기와 상관없이 항상 같은 크기를 유지합니다. 웹 요소의 너비 값을 px로 지정하면 웹 브라우저 화면이 작아질 경우 일부가 가려질 수도 있죠. 다음 예제는 .pixel의 너비를 800px로 지정한 것인데, 브라우저 창 너비가 넓으면 .pixel 요소가 전부 보이지만 브라우저 창의 너비가 좁을 경우에는 .pixel 요소가 다 보이지 않고 가려집니다. Hello, Everyone! 2) % 단위 % 단위를 사용하는 것은,..
<meta> 태그와 오픈 그래프(Open Graph) 오픈 그래프 프로토콜이란 SNS에서 특정 웹 페이지를 공유하면 짤막한 미리보기 화면이 나타나면서 마치 그 SNS의 게시물인 것처럼 자연스럽게 삽입됩니다. 어떻게 그럴 수 있을까요? 이것은 바로 오픈 그래프(Open Graph) 프로토콜 때문입니다. 오픈 그래프 프로토콜은 페이스북에서 만든 것인데요, 웹 페이지를 페이스북에 공유할 때 페이스북 게시물인 것처럼 만들기 위해 고안된 것이죠. 공유하는 웹 페이지를 직접 클릭해서 들어가 보기 전에 웹 사이트 정보를 미리보기로 구성해서 보여줍니다. 미리보기 화면을 어떻게 구성할지 태그 안에서 오픈 그래프를 사용해 설정합니다. 오픈 그래프 맛보기 포털 사이트에서 아무 뉴스나 선택해서 열어놓고, 웹 개발자 도구 창의 [요소] 창도 함께 열어보세요. 그리고 사이에 붙여넣..
[깃허브] 깃허브에 이력서 페이지 만들기 (5) - 커밋하기 이전 내용 [깃허브] 깃허브에 이력서 페이지 만들기 (1) - 환경 설정하기 [깃허브] 깃허브에 이력서 페이지 만들기 (2) - 마크업하기 [깃허브] 깃허브에 이력서 페이지 만들기 (3) - 내용 채우기 [깃허브] 깃허브에 이력서 페이지 만들기 (4) - 스타일 적용하기 지금까지 만든 문서의 수정 사항을 깃허브에 등록해야 합니다. 이것을 '커밋'이라고 합니다. 처음부터 깃허브 사이트에서 시작했고, 온라인 편집기를 사용했기 때문에 소스를 작성한 후 커밋하기만 하면 그대로 깃허브에 추가됩니다. 커밋하기 1. 소스를 작성하면서 발견했을지도 모르지만, 왼쪽의 사이드바에 파란색으로 숫자가 표시되어 있습니다. 수정된 파일의 갯수를 나타내는데, 아직 깃허브로 커밋하지 않은 파일을 가리킵니다. 사이드바에서 Source..
[깃허브] 이력서 페이지 만들기 (4) - 스타일 적용하기 이전 내용 [깃허브] 깃허브에 이력서 페이지 만들기 (1) - 환경 설정하기 [깃허브] 깃허브에 이력서 페이지 만들기 (2) - 마크업하기 [깃허브] 깃허브에 이력서 페이지 만들기 (3) - 내용 채우기 앞에서 HTML을 사용해 문서 내용을 작성해 보았습니다. 이제 좀더 보기에 괜찮은 문서로 만들기 위해서는 CSS를 사용해서 제목이나 텍스트, 목록에 스타일을 적용해야 합니다. 글자의 크기나 색상 뿐만 아니라 각 섹션의 위치도 조절할 수 있죠. 이렇게 HTML로 내용을 작성하고 CSS로 스타일을 만들게 되면 내용과 디자인이 분리됩니다. 내용을 수정하려면 HTML 문서만 수정하면 되고, 스타일을 바꾸고 싶다면 CSS 파일만 수정하면 되겠죠? HTML과 별도로 저장하는 CSS 파일을 '외부 스타일시트 파일'이..
[깃허브] 이력서 페이지 만들기 (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:""; 처럼 빈 문자열을 사용합니다. ..

티스토리툴바