전체 글53 티스토리 구글 서치콘솔, 네이버 웹마스터 등록방법 오늘은 티스토리가 구글, 네이버에서 검색이 가능하도록 구글 서치콘솔, 네이버 웹마스터에 등록하는 방법을 정리해보도록 하겠습니다. 사이트맵 기존에 티스토리를 구글 서치콘솔 및 네이버 웹마스터에 등록하기 위해서는 사이트맵을 직접 만들어서 게시물에 등록하는 등 번거로운 부분이 있었습니다. 하지만 이제 드디어 사이트맵이 자동으로 생성되는 기능이 추가되었습니다!! '관리 > 블로그' 로 가시면 '주소 설정' 부분에 사이트맵 주소가 있는 것을 확인하실 수 있습니다. 해당 URL을 복사해줍니다. 네이버 웹마스터 등록 네이버 웹마스터 홈페이지로 가줍니다. 홈페이지 하단으로 내리면 네이버 웹마스터 사용하기 라는 버튼이 존재합니다. 눌러줍니다. 사이트 등록하는 곳에 블로그 주소를 복사해서 넣어줍니다! 그러면 사이트를 확인.. 2020. 6. 6. HTML, CSS로 사이드바 만들기 버튼을 누르면 왼쪽에서 나오고 다시 누르면 왼쪽으로 사라지는 사이드바를 만들어보겠습니다. 기본적으로 javascript혹은 jquery를 이용해 이벤트 처리를 해서 작업하는 경우가 많은데 HTML/CSS만 사용해서 열리고 닫히는 사이드바를 제작해보겠습니다. 디자인은 신경쓰지 않고 작성하는 점 양해바랍니다. 설계 Html/css만 사용해서 열리고 닫히는 기능을 구현하기 위해서는 input태그를 사용해야합니다. 체크박스와 라벨을 연결해놓으면 라벨을 클릭했을 때 체크박스가 선택되는 점을 이용하는 것입니다. 체크박스가 선택되었을 경우 사이드바를 보여주고 숨기는 css코드를 작성해주겠습니다. label버튼 만들기 .side_toggle_btn::before { content: ">"; display: inline.. 2020. 6. 6. Flexbox로 반응형 레이아웃 만들기 Flexbox란? 기존에 컨텐츠들을 수평으로 배치할 때 float 혹은 inline-block 로 마크업할 때의 불편함을 해결하여 쉽게 배치할 수 있도록 CSS3에 추가된 방식입니다. 크게 컨텐츠들을 감싸는 Flex Container 와 각 컨텐츠들인 Flex Item으로 구성되어있어 각 요소에 적절한 속성과 값을 적용해서 원하는 레이아웃을 구성할 수 있습니다. Flexbox 지원 범위 Flexbox는 좋은 기능인 만큼 이전 버전의 브라우저에서 지원을 안해주기도 합니다. 실제 서비스를 개발하기 위해선 이를 잘 알고 써야합니다. IE는 9버전 이하는 지원을 하지 않으며, 10,11에서도 버그가 존재합니다. 모바일 웹에서는 지원을 잘해주고 있습니다. 서비스가 어떤 브라우저까지 지원하는지에 따라 적절하게 사용.. 2020. 6. 6. HTML CSS로 이미지 슬라이드, 롤링배너 , 캐러셀 만들기(owlCarousel.js) owlCarousel.js 라는 라이브러리를 통해서 이미지 롤링, 케러셀, 슬라이드를 만드는 방법을 정리해보겠습니다. 우선 사용할 라이브러리는 https://owlcarousel2.github.io/OwlCarousel2/ 입니다. 위와 같은 형태의 이미지 슬라이더를 만들어보려고 합니다. 오직 html,css,js 만 사용해서 만들기 때문에 어디에서든 사용하실 수 있습니다. HTML 이미지 슬라이더를 만들기 위한 구조는 아래와 같습니다. owl-carousel, owl-theme은 캐러셀을 사용하기 위해 라이브러리에서 정의된 클래스입니다. 위 코드처럼 두 스타일 파일을 알맞은 경로에 넣고 link태그를 통해서 로드해야합니다. 준비가 끝났으니 알맞은 아이템들을 넣어줍니다. 스포츠클럽과 함께 새로운 여행문화.. 2020. 6. 5. CSS를 이용한 말줄임 처리 방법 말줄임 처리란? 말줄임 처리는 말 그대로 내용의 길이가 길어졌을 때 일정 부분만 보여주고 '...' 과 같은 표시로 뒤에 더 내용이 있다는 것을 표현해주는 처리입니다. 시각적으로 너무 많은 내용을 보여주면 가독성도 떨어지고, 디자인적 통일성을 떨어트리게 되기 때문에 많은 웹서비스에서 필수적으로 사용하고 있는 기능입니다. 일반적으로 말줄임 처리라고 하면 아래와 같이 한줄 말줄임 과 여러줄 말줄임 이렇게 두가지가 있다고 생각합니다. See the Pen ZEQzMqN by 13akstjq (@13akstjq) on CodePen. 하지만 이제는 웹에서 발생하는 수많은 케이스에도 동일한 UI를 제공할 수 있도록 대응 가능한 말줄임 처리가 많이 필요해진 것 같습니다. 1. 고정 사이즈 요소가 좌측에 올 때 많은.. 2020. 6. 2. 이전 1 2 3 4 5 다음
