본문 바로가기
clearfix방법 *clearfix시키는 방법 4가지 https://youtaekjung.github.io/2018/04/21/css/CSS-float-clearfix/ ▶가상 요소 ::after 사용(권장) float속성을 적용한 요소의 부모요소::after{ display:block; content:''; clear:both; } ▶overflow:hidden float속성을 가진 요소의 부모 요소에 overflow:hidden또는 overflow:auto; → 넘치는 부분이 잘리거나 가로 스크롤바가 생기기때문에 사용하지 않는것이 좋다. [ CSS3부터 적용 ] 가상 클래스(hover, link...) 는 싱글콜론(:) 가상 요소(after, before..) 는 더블콜론(::)
GIT정리 GIT(github/gitlab) git tutorialhttps://github.com/KennethanCeyer/tutorial-git GITLAB(처음시작)http://recoveryman.tistory.com/251htttp://milkissboy.tistory.com/75?category=733112 (저장소만들기) gitlab 폴더올리기https://sojungarchive0414.blogspot.com/2018/03/2-commit.htmlssh삭제 후 재 설치http://parkhyunjin.tistory.com/9 ▶git 명령어https://stories.tistory.com/256https://medium.com/@joongwon/git-git-%EB%AA%85%EB%A0%B9%EC%..
gitLab Git(github/gitlab) ▶gitlab저장소만들기(처음시작)http://milkissboy.tistory.com/75?category=733112▶gitlab 폴더 전체 올리기https://sojungarchive0414.blogspot.com/2018/03/2-commit.html▶ssh삭제 후 재 설치http://parkhyunjin.tistory.com/9 ▶내용 바꾸고 업로드 할 경우Repository > Files > 바뀐파일클릭 > Replace > 파일 재 업로드 후 commit달기확인Repository > Commits ▶git 명령어https://stories.tistory.com/256https://medium.com/@joongwon/git-git-%EB%AA%85%EB%A0..
노드찾기 1. 노드 찾기 - 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자") - 클래스 이름으로 노드 찾기 : $(".클래스이름") - ID로 노드 찾기 : $("선택자") - 속성으로 노드 찾기 : $("[속성이름=값]") - 찾은 요소 개수 구하기 : .size() , .length - 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){}); - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자") - 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자") 2. 자식 노드 찾기 - 전체 자식 노드 찾기 -- 텍스트 노드 포함 전체 자식 노드 찾기 : $("선택자").contents() -- 텍스트 노드 제외한 전체 자식 노드 찾기 ..
font 브라우저별 폰트포맷 EOT는 IE브라우저만 지원하고 WOFF는 모든 브라우저에서 지원합니다. 모든 브라우저에서 웹폰트를 사용하려면 src 속성에 코드를 추가해야 합니다. 글꼴파일유형.eot : IE8 이하버전(ie에서만 지원) .otf / .ttf : 크롬, 파이어폭스, 오페라, 사파리, 안드로이드, ios .woff : 크롬, 파이어폭스, ie9 이상, 사파리 등에서 인식되며 .otf/.ttf의 압축 버전으로 다른 글꼴 형식보다 빠르게 로드 .woff2 : woff보다 우수한 압축(평균 30%)이지만 사파리, ie, ios지원안됨 IE 6~8IE 6~8은 EOT 파일만 지원하므로 EOT파일을 내려받도록 해야합니다. @font-face{ font-family : NanumSquare; src:url(Na..
font 단위 emem은 상대적인 크기를 지니는 단위로써 요소에 지정하는 글자 크기 단위를 설정할 수 있다.일반적으로 웹 브라우저에서는 1em = 16px으로 환산되며, 1em은 웹 브라우저에서 글자 크기사이즈를 지정하지 않았을 때 표시되는 글꼴 크기의 기본값이다. em단위는 부모 요소에서 지정한 글자크기를 기준으로 배율을 조정하게 된다.따라서 1.5em을 지정하면 부모요소 글자 크기의 1.5배가 된다. html, body{font-size:16px;} //14px이 기준일 때 1em은 16px이므로 12px을 em으로 변환시키면 12/16 = 0.75em //%로 변화할 시, 12/16*100=75%가 된다. remroot em이라는 뜻으로, HTML문서의 root요소인 html요소를 가리키며, 이 요소에 지정된 크..
데이터 속성 사용(data-*) HTML5에서는 해당 요소에서 사용자가 임의로 지정한 속성값을 활용할 수 있으며, 이를 Custom Data Attribute라고 부른다. data-* 속성은 두 부분으로 구성된다.1. 속성 이름은 대문자를 포함해서는 안되며 "data-"접두어 다음에 적어도 하나 이상의 문자가 있어야 한다.2. 속성 값은 임의의 문자열이 될 수 있다.ex) data-id / data-name / data-age / data-job... 주의점웹을 이용하는 사용자가 아무런 제한없이 data-속성을 보고 그 정보들을 해석할 수 있기 때문에 보안관련된 정보들은 담지 않는것이 좋다. HTMLdata- 뒤에 속성의 이름을 입력text Jquerydata()함수를 이용하여 data속성의 값을 출력하거나, data속성의 값을 지정할..
스크롤 이벤트 ①새로고침하면 맨 위로 올라가기 window.onload = function(){ $('html,body').animate({ scrollTop : 0 }, 400); return false; } ②특정 좌표로 부드럽게 스크롤$('html.body').animate({ scrollTop : 300 }, 500); //300px로 부드럽게 스크롤 ③특정 엘리먼트로 부드럽게 스크롤 var scrollPosition = $('#ID').offset().top; $('html, body').animate({ scrollTop: scrollPosition }, 500); ④클릭시 타겟으로 스크롤 되는 메뉴 만들기 소개 멤버 연락 $('.menu li').on('click', function(){ var scrol..

티스토리툴바