티스토리

코딩 슬라임 공방

검색하기

블로그 홈

코딩 슬라임 공방

nixpluvia.tistory.com/m

Nixpluvia 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

선 넘네 ... 선 못 넘네... 공감수 0 댓글수 0 2020. 11. 4.
관계연산자 == 와 === See the Pen 관계연산자 == === by Lee Hoyeon (@nixpluvia) on CodePen. 공감수 0 댓글수 0 2020. 7. 30.
SVG 안에 들어가는 텍스트 중앙 정렬하기 SVG - TEXT svg 안에 text 요소를 넣을 수 있는데 text를 넣을 때에 중앙 정렬을 해주기 위해서는 여러가지가 필요합니다. 우선 svg 안에 들어가는 text에 대한 참고 사이트 링크를 걸겠습니다. svg 텍스트 요소 text-anchor text에 사용할 수 있는 속성으로 text-anchor가 있습니다. text의 중심점을 정하는 요소인데 middle로 설정 해줘야 텍스트의 중앙에 오게됩니다. text-anchor 속성 dominant-baseline text에 사용하는 속성으로 dominant-baseline이 있습니다. 다양한 속성이 사용되지만 중앙으로 정렬하기 위해서는 central 값을 사용해줘야 합니다. middle 속성도 존재하지만 텍스트의 특성상 텍스트의 정중앙이 되지않습니.. 공감수 0 댓글수 0 2020. 7. 21.
자바스크립트 마우스 이벤트 참고 사이트 참고사이트 공감수 0 댓글수 0 2020. 7. 20.
스크롤의 방향 확인하기 스크롤의 방향을 확인하는 방법 스크롤의 방향을 확인하는 방법은 wheelDelta를 사용하면 확인 할 수 있다. 마우스휠(mousewheel) 이벤트에서 함수를 생성하고 함수의 매개변수에 event를 사용한다. event.wheelDelta 나 event.originalEvent.wheelDelta를 사용하면 값을 얻을 수 있다.\ 크롬에서는 아래로 내릴 때에는 -120의 값이 나오고 크롬에서는 위로 올릴 때에는 120의 값이 나온다 다른 브라우저에서는 다른 값이 나온다. 다른 브라우저의 값은 참고사이트에서 몇몇가지 확인 할 수 있다. 참고 사이트 참고 사이트 공감수 0 댓글수 0 2020. 7. 15.
스크롤바 없애기 웹킷에서 스크롤바 없애는 방법 css에서 스크롤바는 없애지만 스크롤은 하게 하고 싶은 경우에 사용 할 수 있다. css에서 스크롤 바를 없애고 싶은 요소에 ::-webkit-scrollbar{display: none}를 사용하면 된다. 단점은 브라우저의 엔진이 웹킷이 아닐 경우에는 사용할 수 없다. IE에서 스크롤 바를 없애고 싶을 때에는 아래와 같이 css에 작성하면 된다. 요소{-ms-overflow-style: none;} 공감수 0 댓글수 0 2020. 7. 15.
FLEX 요소 줄어듦 방지 요소 줄어드는 것 방지 flex 사용 시에 flex가 적용된 상자들이 반응형에 따라 크기가 줄어들 때 크기가 줄어들면 안되는 요소들은 flex-shrink : 0을 사용해줘야 한다. 공감수 0 댓글수 0 2020. 7. 9.
FLEX 안에서 좌우정렬 margin을 사용해서 좌우로 정렬하기 FLEX의 방향이 row일 때 FLEX 요소를 정렬하기 위해서는 justify-content를 사용해서 한쪽 방향으로 정렬할 수 있었다. 하지만 단 하나의 요소만 왼쪽이나 오른쪽으로 따로 정렬하기 위해서는 justify-self를 사용해야한다고 생각 할 수 있지만 justify-self라는 기능은 존재하지 않는다. 그래서 FLEX 요소 중 오른쪽 끝으로 정렬하고 싶은 요소는 margin-left: auto; 를 사용해서 오른쪽 끝으로 정렬 할 수 있고 왼쪽 끝으로 정렬하고 싶은 요소는 margin-right: auto; 를 사용해서 왼쪽 끝으로 정렬 할 수 있다. 이 방법을 사용해서 다양하게 정렬을 할 수 있으니 확인해 보기 바랍니다. 공감수 3 댓글수 0 2020. 7. 7.
PHP 변수의 값 유무 확인 함수 PHP 변수의 값 유무 확인 함수 isset(확인할 변수명); empty(확인할 변수명); isset() 함수는 변수에 값이 있고 없음을 boolean 값으로 반환해준다. 변수의 값이 존재하고 null 값이 아니라면 true를 반환한다. 변수의 값이 존재하지 않는다면 false를 반환한다. empty() 함수는 isset()함수와 다른점이 존재한다. empty()함수는 변수의 값이 0, false, null 값을 가지고 있으면 true로 반환하고 변수의 값이 0, false, null 값이 아닌 다른 값이면 false를 반환합니다. 공감수 0 댓글수 0 2020. 7. 1.
mySql AUTO_INCREMENT값 초기화 AUTO_INCREMENT값 초기화 이유 테이블에 자료를 100개 입력하고 1개를 삭제한 후에 다시 테이블에 자료를 입력하면 100이 되는게 아니라 101이 되어버린다. 한번 증가된 값은 자동으로 돌아오지 않기 때문에 초기화 시킨다. AUTO_INCREMENT값 초기화 방법 단순히 바로 어떤 번호로 시작하기 위한 방법은 아래와 같다. ALTER TABLE `테이블명` AUTO_INCREMENT= 시작할 번호; 이전에 적혀진 순서를 다시 재조정하는 방법은 아래와 같다. ALTER TABLE `테이블명` AUTO_INCREMENT=1; SET @COUNT = 0; UPDATE `테이블명` SET `바꿀 COLUMN 이름` = @COUNT:=@COUNT+1; 공감수 0 댓글수 0 2020. 7. 1.
PHP 문자열 문법 substr(),mb_substr() 문자열 부분만 가져오기 mb_substr( 문자열, 시작 숫자, 길이, 인코딩) substr(),mb_substr() 문자열 부분만 가져오기 mb_substr( 문자열, 시작 숫자, 길이, 인코딩) strpos() 문자열 포함 검사 strpos( string $haystack, mixed $needle , [ int $offset] ) strpos(탐색할 문자열, 찾을 문자열/문자, 문자열 숫자 부터) 숫자로 반환한다. str_replace(변경해야 할 문자, 변경할 문자, 값) 값은 변경해야할 문자가 들어있는 문자열이다 공감수 0 댓글수 0 2020. 6. 30.
데이터베이스 정리 본문의 내용은 본인이 이해한 수준에서 정리한 내용이므로 틀릴 가능성이 존재함. 테이블 생성시 정의하는 타입의 설명 INT는 정수를 뜻한다 최소값은 -2,147,483,648,최대값은 +2,147,483,647이다. 이보다 더 많은 숫자를 정의할 수 있는 INT를 BIGINT라고 한다. UNSIGNED는 음수 값을 허용하지 않는다. 그래서 INT에 UNSIGNED를 같이 사용하면 음수 값이 허용되지 않고 최소값의 -2,147,483,648은 양수 값으로 이동한다. 그래서 INT가 가질 수 있는 양수값은 총 0 ~ 4294967295이 된다. 참고사이트 참고사이트 PRIMARY KEY 는 기본 키라는 뜻이다. PRIMARY KEY는 절대 중복 될 수 없는 단일 값(unique)을 가진다. PRIMARY KE.. 공감수 0 댓글수 0 2020. 6. 27.
css글자 자르기 한 줄 자르기 한 줄에 글자가 넘쳐서 ...으로 처리해야할 경우에는 다음과 같은 요소가 필요하다. width값이 정해져있어야 한다. white-space:nowrap; 자동 줄바꿈이 되지 않게 한다. overflow:hidden; 넘치는 부분을 안보이게 처리한다. text-overflow: ellipsis; 숨겨진 부분을 ...으로 처리하게 해준다. 여러 줄 자르기 잘라야 하는 텍스트가 여러 줄 일때에는 조금 다른방법을 사용 해야 한다. text-align: left 양측 정렬일 때는 ...가 표시 안될 수 있으므로 좌측정렬 한다. white-space:normal; 자동 줄바꿈이 되게 한다. overflow:hidden; 넘치는 부분을 안보이게 처리한다. 여기까지 해도 잘리기는 하지만 ... 처리가 되.. 공감수 0 댓글수 0 2020. 6. 26.
모르는 개념,문법 정리 HTML canvas태그 웹페이지에서 그래픽적인 것을 그릴때 사용하는 태그이다. canvas 요소에는 width와 height 두 속성만 존재한다. 자세한 내용 참고 사이트 자바스크립트 .createElement() 요소를 만듭니다.참고사이트 .appendChild() 선택한 요소 안에 자식요소를 추가합니다. 제이쿼리 .append() 선택한 요소 안에 맨 뒤에 요소를 추가합니다.참고사이트 .attr()은 요소의 속성값을 가져오거나 속성 값을 추가합니다.참고사이트 공감수 0 댓글수 0 2020. 6. 24.
css 문자열 자르기 참고사이트 공감수 0 댓글수 0 2020. 6. 23.
제이쿼리 부모요소 선택 메소드 부모요소 선택 메소드 제이쿼리에서 가장 많이 사용되는 부모요소를 반환하는 메소드는 아래의 3가지입니다. .parent() 해당요소의 바로 위의 부모를 반환 .parents() 해당요소의 모든 부모을 반환 .closest('부모요소') 해당요소의 모든 부모 중 특정 대상만 반환 ex) $('요소').parent() ex) $('요소').parents() ex) $('요소').closest('특정 부모요소') 공감수 0 댓글수 0 2020. 6. 21.
제이쿼리 메뉴 하단 호버 바 만들기 메뉴 따라가는 하단 바 만들기 메뉴가 있을때 메뉴에게서 얻어야하는 요소는 2가지이다 메뉴들의 width값과 left 값을 얻어야한다. 메뉴의 width값을 구하는 방법은 제이쿼리로 .width()를 사용하면 구할 수 있다. 메뉴의 left값을 구하는 방법은 제이쿼리로 .position().left를 사용하면 구할 수 있다. .position()은 top값과 left 값을 모두 구하기 때문에 left만 구해와야 한다. .position은 부모 요소에서의 상대적인 좌표값이다. 문서에서의 절대값을 얻고싶다면 .offset을 사용해야한다. 이제 마우스가 들어갔을 때와 나왔을때 메뉴에 addClass와 removeClass를 해서 active클래스를 조절해야 한다 그리고 active클래스가 부여된 요소의 widt.. 공감수 0 댓글수 0 2020. 6. 20.
제이쿼리 형제 요소 선택 메소드 형제(sibling)요소의 탐색 .siblings() 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다 .next() 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다. .nextAll() 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다. .nextUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다. .prev() 선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다. .prevAll() 선택한 요소의 이전에 위치한 형제 요소를 모두 선택한다. .prevUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택한다. 형제 요소 탐색 .. 공감수 0 댓글수 0 2020. 6. 18.
제이쿼리 - 요소 추가 기존요소의 내부에 추가 .append() 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다. .prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다. .appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다. .prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다. ex) $(target).append(source) 기존요소의 외부에 추가 .before() 선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다. .after() 선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다. .insertBefore() 선택한 요소를 해당 요소의 앞쪽에 추가한다. .insertAfter() 선택한 요소를 해당 요소의 뒤쪽에 추가한다. ex) $(target).. 공감수 0 댓글수 0 2020. 6. 17.
깃 사용법 처음 설정 git config --global user.name "유저 아이디" git config --global user.email "유저 이메일" 저장소 설정 git init 내보내기 현재 상태 git status 추가되거나 수정된 파일 모두 추가 git add . 내보낼때 사용할 저장할 이름 git commit -m "이름" 깃허브와 저장소 연결 git remote add origin 깃허브repository 주소 깃허브에 보내기 git push origin master 불러오기 깃허브와 저장소 연결 git remote add origin 깃허브repository 주소 깃허브에서 가져오기 git pull origin master 공감수 0 댓글수 0 2020. 6. 16.
PHP 구구단 만들기 ＜?php $dan = 8; for ($i=1 ; $i 공감수 0 댓글수 0 2020. 6. 12.
자바스크립트 주요 메서드,함수 .repeat() 문자열을 반복해주는 기능을 가지고 있는 메서드 이다. ex ) "abc".repeat(2) 는 "abcabc"를 반환해준다. parseFloat( string ) 문자열을 실수로 바꾸는 함수입니다. 수로 시작할 때 그 수를 실수로 바꿉니다. 띄어 쓰기로 여러 개의 수가 있으면 첫번째 수만 바꿉니다. 공백으로 시작하면 공백은 무시합니다. 수가 아닌 문자로 시작하면 NaN을 반환합니다. ex ) parseFloat("3.14") 는 3.14 를 반환해준다. parseInt( string , n ) 문자열을 정수로 바꾸는 함수입니다. string을 n진법일 때의 값으로 바꿉니다. n은 옵션으로 2부터 36까지 입력할 수 있습니다. 입력하지 않으면 10으로 처리합니다. string의 처리는 p.. 공감수 1 댓글수 0 2020. 6. 11.
헤이미쉬 공식 온라인몰 상단바 작업 공감수 0 댓글수 0 2020. 6. 10.
국립해양박물관 상단바 See the Pen 국립해양박물관 상단바 by Lee Hoyeon (@nixpluvia) on CodePen. 공감수 0 댓글수 0 2020. 6. 9.
한화건설 포레나 상단바 공감수 0 댓글수 0 2020. 6. 9.
FLEX에서 Margin을 사용 할 때 FLEX에서 margin을 사용할 때 display가 flex인 부모의 자식요소들에게 margin을 사용할 때에 margin의 넓이 만큼 요소에서 제외된다. 만약 자식 요소들에게 각각 flex-grow를 1:1로 비례해서 줬을 때 한 요소에게만 margin을 주면 margin이 생긴만큼 전체에서 제외하고 나머지 길이를 1:1로 나눠서 주는게 아니라 1:1로 계산 한다음에 그 나눠진 요소 안에서 margin만큼 제외된다. See the Pen LYGVZmd by Lee Hoyeon (@nixpluvia) on CodePen. 공감수 0 댓글수 0 2020. 6. 6.
제이쿼리 슬라이드 제작 참고사이트 슬라이드 만들기 슬라이드 만들기2 공감수 0 댓글수 0 2020. 6. 5.
제이쿼리 문법 toggleClass 요소에 클래스 값의 생성,제거를 반복 할 수 있는 메서드입니다. $( 'p' ).toggleClass( 'xyz' ); p요소에 xyz라는 클래스 값이 없으면 생성, p요소에 xyz라는 클래스 값이 존재하면 제거를 한다. toggle toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다. toggle문법 .toggle( [ duration ], [ complete ] ) duration duration은 완전히 나타나기 까지의 시간을 나타냅니다. fast,slow와 400같은 숫자로 정할 수 있습니다. 단위는 1000분의 1초입니다. fast는 200, slow는 600입니다. 기본값은 400입니다. .toggle( 'slow' ) slow와 fast는 .. 공감수 0 댓글수 0 2020. 6. 5.
팝업만들기 중요점 정리 Display와 visibility의 차이점 display:none;은 요소 자체가 사라지게된다. 그래서 요소가 레이아웃에 영향을 미치지 않게 된다.(none이 되면 요소가 사라지고 그 자리를 다른 요소들이 차지함) 하지만 visibility: hidden은 렌더링은 하지않지만 요소가 사라진게 아니라 레이아웃에 영향을 미치게 된다.(hidden이 되어도 그자리는 그대로 차지함) opacity로 안보이게 조절하는 것과는 다르게 요소가 클릭조차 되지 않게된다. 클래스 생성과 제거 -제이쿼리 $('선택자').addClass('클래스선택자') - 클래스 생성 $('선택자').removeClass('클래스선택자') - 클래스 제거 event 버블링 이란? 이벤트가 연속하여 발생하는 버블 현상을 의미한다. stop.. 공감수 0 댓글수 0 2020. 6. 3.
REACT리액트 간단 정리 프론트엔드의 라이브러리이다. "컴포넌트"라는 개념에 집중이 되어있는 라이브러리이다. 컴포넌트란 단순하게 말해서 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줍니다. 웹페이지가 변화하려면 굉장히 많은 과정을 거쳐야하는데 이 과정은 생각보다 많은 과정을 거쳐야해서 쉬운일이 아닙니다. 그래서 이 변화를 포기하고 새로 만들어 버린 후에 바꿔버리는겁니다. 진짜와 비교해서 변한 부분만을 바꿔주는겁니다. 이것이 Virtual DOM의 간단한 개념입니다. 그리고 이 Virtual DOM을 사용한 라이브러리가 리액트입니다. 리액트 참고사이트 공감수 0 댓글수 0 2020. 6. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.