Rim's develop

transform 애니메이션 종합 정리를 해보려 합니다 우선 박스를 만들어 hover하면 애니메이션이 실행되는것을 보기 위해 구조를 만들었습니다. BOX - translate - p:hover span{transform:transform:translateX(50px);} /*박스를 우측으로 이동*/ p:hover span{transform:transform:translateY(50px);} /*박스를 하단으로 이동*/ - rotate - p:hover span{transform:transform:rotate(30deg);} /*박스를 회전*/ span{transform-origin:left top;} p:hover span{transform:rotateX(180deg);} /*위로 rotate*/ spa..

안녕하세요 ! 이번 포스팅에서는 flex오류에 대해서 다루려고 합니다 얼마 전 사이트를 만들었는데 이슈가 있다면서 확인해보니 ios mobile chrome버전에서 메인 홈에 띄워둔 흰색박스가 안나온다고 하여 확인해보니 정말 안나오더라고요😂 display:flex 문제인가 싶어서 다 지워보았는데 화면에서는 드러났지만 구석에 박혀있더군요 서치하여 찾아본 첫번째 글 "{flex-direction:column} 일때, 부모 엘리먼트의 높이를 설정하지 않고 자식에서 높이를 % 로 지정하면 높이를 제대로 계산하지 못하는 문제이다." 라는 정보를 통해 height을 지워보는 방법을 실행해보았습니다. https://sunyrora.github.io/iphone-flex/ iOS 10에서 flex colum 레이아웃 ..

html에서의 목록 태그 정리 1.dl - 용어와 그에 대한 설명을 정의할 때 사용됩니다. dl -목록태그 / dt - 용어의 제목 / dd - 용어의 설명 반드시 dl태그 안에는 dt, dd태그만 위치할 수 있다. 원하는 화면을 만들기 위해서는 margin-left, margin-right로 간격을 줄 수 있습니다. 토끼 토끼는 토끼목 토끼과의 포유류 동물이다. 꼬리가 짧고 귀가 긴 게 특징이다. 2. ul - 비순차적 목록을 생성할 때 사용됩니다. HTML 삽입 미리보기할 수 없는 소스 리스트 아이템 리스트 아이템 리스트 아이템 리스트 아이템 3. ol - 순차적 목록을 생성 할 때 사용됩니다. HTML 삽입 미리보기할 수 없는 소스 리스트1 리스트2 리스트3 리스트4 list의 스타일 종류는 ? l..

https://searchadvisor.naver.com 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com 1. 먼저 네이버 서치어드바이저에 들어간 뒤 상단 오른쪽에 있는 웹마스터 도구를 클릭합니다 2. 사이트 등록 네모칸에 등록할 url을 넣은 뒤 엔터를 누릅니다. 3. 소유확인 창이 뜨는데 이때 2가지 방법이 있습니다 # HTML 파일 업로드 : 1번 html확인 파일 글자를 누르면 파일이 다운받아집니다. 다운 받은 파일을 루트 디럭테로에 넣으면되는데 저는 파일질라를 이용하였습니다 완료 후 3번에 링크를 눌러 업로드 확인을하면 됩니다. #HTML 태그 : 2번째 방법은 적혀있는 메타태그를 복사한뒤 파일을 열어 섹션 안에 붙여넣..

앞선 블로그 포스팅에서 카카오톡 url링크 공유 시 썸네일 설정 방법인 meta태그에 대해서 글을 작성하엿는데 이게 바로 적용이 안되고 일정 시간이 지나야 적용이 되는거 같았다 하지만 카카오톡 개발자 사이트를 통해 해결할 수 잇는데 https://developers.kakao.com/tool Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 사이트에 들어간 뒤 아래로 스크롤 하다보면 초기화 도구라고 쓰여잇는 카테고리를 클릭 -> 카카오톡 로그인 후 그럼 이 화면으로 이동하는데 바로 이곳에서 캐시삭제를 통해 해결 할 수 있다 url 입력하는 공간에다..

링크 공유 시 변경 바로 적용 안될 때 카톡으로 URL링크 공유 시 변경한 이미지 적용이 안될 때 해결 방법 ! 앞선 블로그 포스팅에서 카카오톡 url링크 공유 시 썸네일 설정 방법인 meta태그에 대해서 글을 작성하엿는데 이게 바로 적용이 안되고 일정 시간이 지나야 적용이 되는거 같았다 하지만 카카오 rimdevelop.tistory.com 카카오톡으로 링크를 주고 받는 일이 많은데 처음 일할때쯤 링크 이미지 좀 바꿔달라고 햇는데 어떻게 바꾸는지 몰라서 알아봣더니 메타태그를 통해 해결할 수 잇었다 메타 태그란 ? - 웹페이지를 설명하는 태그를 메타 태그라고 한다. 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용된다. - 안에 넣는다 @브라우저 호환성 지정 -메타 태그를 통해서 최신 렌더..

" 시멘틱 태그 " : 시멘틱 태그란 HTML의 구조를 설계하는데 있어 의미에 맞게 태그를 작성하여 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그입니다 1. body - html 문서의 내용을 나타냅니다. - 한 문서에 하나의 요소만 존재 할 수 있습니다. 2. header - 웹 문서의 머리글을 정의합니다 -제목, 로고, 검색, 폼 작성자 이름 등의 요소도 포함할 수 있습니다. Rim' blog 3. section - 웹 문서의 한 부분, 한 장을 구분하는데 사용합니다. - 주제나 챕터 그룹화된 엘리먼트들을 묶는 컨테이너 역할입니다. - 문서 내 영역의 범위를 한정하며, 문서의 아웃라인을 구성합니다. rim 4. article - 문서, 페이지 또는 사이트 안에서 독립적으로 구..

안녕하세요 ^_^ 제가 쓰고 있는 플러그인을 정리할 겸 추천해보려고 합니다 ! 1. Auto Rename Tag (사이트 설명문) Automatically rename paired HTML/XML tag, same as Visual Studio IDE does. -> Visual Studio IDE와 동일하게 쌍을 이루는 HTML/XML 태그의 이름을 자동으로 바꿉니다. @ 간단한 태그 이름 수정도 귀찮아 하는 나에게 한번에 바꿀 수 있는 필수 플러그인 예) 가 쌍을 이루고 있는데 여기서 -> 로 이름을 수정할 경우 아래 닫히는 부분인 -> 로 자동 수정됩니다 https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag..