코딩 슬라임 공방

SVG - TEXT svg 안에 text 요소를 넣을 수 있는데 text를 넣을 때에 중앙 정렬을 해주기 위해서는 여러가지가 필요합니다. 우선 svg 안에 들어가는 text에 대한 참고 사이트 링크를 걸겠습니다. svg 텍스트 요소 text-anchor text에 사용할 수 있는 속성으로 text-anchor가 있습니다. text의 중심점을 정하는 요소인데 middle로 설정 해줘야 텍스트의 중앙에 오게됩니다. text-anchor 속성 dominant-baseline text에 사용하는 속성으로 dominant-baseline이 있습니다. 다양한 속성이 사용되지만 중앙으로 정렬하기 위해서는 central 값을 사용해줘야 합니다. middle 속성도 존재하지만 텍스트의 특성상 텍스트의 정중앙이 되지않습니..

웹킷에서 스크롤바 없애는 방법 css에서 스크롤바는 없애지만 스크롤은 하게 하고 싶은 경우에 사용 할 수 있다. css에서 스크롤 바를 없애고 싶은 요소에 ::-webkit-scrollbar{display: none}를 사용하면 된다. 단점은 브라우저의 엔진이 웹킷이 아닐 경우에는 사용할 수 없다. IE에서 스크롤 바를 없애고 싶을 때에는 아래와 같이 css에 작성하면 된다. 요소{-ms-overflow-style: none;}

margin을 사용해서 좌우로 정렬하기 FLEX의 방향이 row일 때 FLEX 요소를 정렬하기 위해서는 justify-content를 사용해서 한쪽 방향으로 정렬할 수 있었다. 하지만 단 하나의 요소만 왼쪽이나 오른쪽으로 따로 정렬하기 위해서는 justify-self를 사용해야한다고 생각 할 수 있지만 justify-self라는 기능은 존재하지 않는다. 그래서 FLEX 요소 중 오른쪽 끝으로 정렬하고 싶은 요소는 margin-left: auto; 를 사용해서 오른쪽 끝으로 정렬 할 수 있고 왼쪽 끝으로 정렬하고 싶은 요소는 margin-right: auto; 를 사용해서 왼쪽 끝으로 정렬 할 수 있다. 이 방법을 사용해서 다양하게 정렬을 할 수 있으니 확인해 보기 바랍니다.

substr(),mb_substr() 문자열 부분만 가져오기 mb_substr( 문자열, 시작 숫자, 길이, 인코딩) substr(),mb_substr() 문자열 부분만 가져오기 mb_substr( 문자열, 시작 숫자, 길이, 인코딩) strpos() 문자열 포함 검사 strpos( string $haystack, mixed $needle , [ int $offset] ) strpos(탐색할 문자열, 찾을 문자열/문자, 문자열 숫자 부터) 숫자로 반환한다. str_replace(변경해야 할 문자, 변경할 문자, 값) 값은 변경해야할 문자가 들어있는 문자열이다

한 줄 자르기 한 줄에 글자가 넘쳐서 ...으로 처리해야할 경우에는 다음과 같은 요소가 필요하다. width값이 정해져있어야 한다. white-space:nowrap; 자동 줄바꿈이 되지 않게 한다. overflow:hidden; 넘치는 부분을 안보이게 처리한다. text-overflow: ellipsis; 숨겨진 부분을 ...으로 처리하게 해준다. 여러 줄 자르기 잘라야 하는 텍스트가 여러 줄 일때에는 조금 다른방법을 사용 해야 한다. text-align: left 양측 정렬일 때는 ...가 표시 안될 수 있으므로 좌측정렬 한다. white-space:normal; 자동 줄바꿈이 되게 한다. overflow:hidden; 넘치는 부분을 안보이게 처리한다. 여기까지 해도 잘리기는 하지만 ... 처리가 되..

HTML canvas태그 웹페이지에서 그래픽적인 것을 그릴때 사용하는 태그이다. canvas 요소에는 width와 height 두 속성만 존재한다. 자세한 내용 참고 사이트 자바스크립트 .createElement() 요소를 만듭니다.참고사이트 .appendChild() 선택한 요소 안에 자식요소를 추가합니다. 제이쿼리 .append() 선택한 요소 안에 맨 뒤에 요소를 추가합니다.참고사이트 .attr()은 요소의 속성값을 가져오거나 속성 값을 추가합니다.참고사이트

참고사이트

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.