본문 바로가기

전체 글

 (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 파일을 '외부 스타일시트 파일'이..

티스토리툴바