kasumil의 코딩 공작소

별건 없고 그냥 table 안에 테이블 호출 같은 중첩구조 쓰지말고(꼬이기 딱 좋다.), 한줄에 하나의 테이블로 그려주는 게 최고 좋다. 아니면 그 안에서 tr, td로만... 간단하게 테이블 한번 호출하고, 여러 태그 사용하지 말기. span으로만 작성하길 권장한다. 이미지의 경우 구글 이미지 호스팅 서버가 막아서 SVG파일은 사용을 지양해야한다. 일반 HTML 양식이 아니라 XHTML이라 해당 부분 반드시 메일 수신체크로 확인해봐야 함. 발송시 멀쩡해도 실제로 HTML이 수신하는 경우 깨짐이 발생해서 계속 체크해봐야한다. 링크해준 사이트의 경우 중첩구조라서, 그냥 놔두고 썼는데 이거때문에 엄격한 메일 회사인 지메일의 수신시 깨져버렸다. 네이버는 멀쩡했다.... center 태그는 가운데 정렬태그라 해..

회사에서 급하게 Text 문구가 있는 곳을 스크롤링 되도록 해야하는데, 이걸 어떻게 구현하나 찾고 있었다. 검색한 내용으로 "자동 회전 html, html carousel, html 태그 자동으로 scroll, auto scroll html, auto scroll fadeup"로 찾던 중 텍스트 롤링이라는 단어를 우연찮게 보았다. 그랬더니 이 기능을 텍스트 롤링이라고 부르는 것을 알게 되었다. 아무튼 나의 경우에는 li값만 교체 되도록 필요해서 해당 내용을 수정해야했다. js는 회전을 건드리는 것이지 내용을 교체하는 방식이 아니기때문에.. php에서 해당 내용을 갯수만큼 뿌리고, li를 교체하는 방법을 고민하고 있었다. 지금 작성하는 도중에 생각난 건데, 나중에 생성된 갯수만큼 자동으로 연결되도록 뿌리는..

사이트 내 동영상이 여러개 있는 상황. 그와중에 모달이 떠야하는데, 모달 내 이미지가 굉장히 늦게 로드되는 문제였다. 띡띡띡 끊김.... 원인은 모든 페이지가 로드된 후 modal이 켜짐 되니, 그때부터 이미지를 다운 받는데 video가 다운 받는 중에 이미지 다운로드도 진행되는 것. 원인은 video 태그 내 autoplay가 문제였다. 태그가 생성되고 바로 재생되다보니, 시스템 자원이 그곳으로 몰려버리게 되는 것. 그래서 autoplay 속성을 제거하고, js에서 해당 파일을 재생하게 만들어버렸다. 모달 출력을 먼저하게 하고, 동영상을 재생하는 부분을 구현하게 하였다. 그랬더니 모달이미지가 늦게 뜨지 않고, 모달이미지가 먼저 출력된 후 동영상 다운로드가 실시되었다. document.getElement..

인터넷을 하다보면 기존에 흔히 보는 막대 그래프들을 볼 것이다. 그것은 보통 프로그레스 태그일 것이다. 하지만 이것을 쓰면 귀찮게 css도 컨트롤해야한다. 하지만, 동일한 기능을 갖고 있지만 css까지 포함한 신기한 태그들이 있다. 그것은 바로 meter 태그. 자동으로 바의 컬러가 바뀐다. 이렇게 사용하면 진짜 편리함. details태그. 접는 기능. 대부분 접는 기능은 js로 사용할 것이다. 하지만 해당 detail 태그를 쓰면 자동으로 해당 부분을 만들어준다. 제목 내용 마지막으로 picture 태그 해당 부분은 media 쿼리를 내장해서 자동적으로 크기에 맞춰 로딩하도록 하게 만들어준다. // 이 태그는 디폴트인데, 해당 태그들이 지원되지 않는 브라우저의 경우 사용된다. 이게 좋은 점이 여러개를 ..

Next.js는 이전 포스티에도 언급했듯이 라우팅을 폴더 경로에 따라서 페이징을 처리한다. 그렇다면 id값 같은 동적인 부분은 어떻게 해야할까? 바로 해당 페이지.js나 jsx의 이름을 []로 감싸는 것. /pages ㄴ index.js /news ㄴindex.js /id ㄴ[newsDetail].js 위처럼 하면 고정값이 아닌 동적 라우팅이 진행되어 id값에따라 해당 값을 호출하고 준다. 이때 Router값에 따라 해당 데이터를 호출해야하는데, 이를 어떻게 해야 하나 싶을것이다. import { useRouter } from 'next/router'; // React 내장이 아닌 Next팀이 만든 내장 hook function newsId () { const router = useRouter(); ro..

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 이런 구조의 테이블이 있다. 이를 스크롤을 추가하려고 한다. 하지만 테이블이 깨진다. 이를 해결하기 위해서 찾아보다가 원본 사이트가 어딘지는 모르겠지만, 어제 발견했다가 오늘은 못 찾겠더라. 그래서 해당 내용을 게시한다. table, thead { display:block; width:100%; } table thead tr { display:table; table-layout:fixed; width:100%; } tbody { display: block; height: 13rem; overflow-y: scroll; } tbody tr { display: table; table-layout: fixed; width:1..

inline 속성값을 가진 태그로 a, span 태그 등이 있다. 인터넷주소링크, 요소(엘리먼트) block 속성값을 가진 태그로 div, p, h1 등이 있다. 정해진 것 없음 내용 제목 코드의 차이점은 html에서 표시될때 영역할당에 따른 구분이다. block은 한 줄을 차지하고, 그 옆에 아무런 속성, 요소등이 올 수가 없지만, inline 속성은 딱 감싸진 글자들만 표시되기때문이다. inline-block 블록 자체의 성질은 block이지만, inline-의 문구가 붙으므로 inline의 성질이 생겨서 block속성을 동시에 가진 것. 이해하기 쉽도록 한번 예제를 만들어 보았다. 맨 마지막은 inline-block을 블록성질이 inline으로 바뀐것을 볼 수 있도록 확인하기 위해서 작성하였다. d..

HTML 개념. 꼭 써야한다. 우리 눈에 보이지 않는 메타데이터로 폰트, 타이틀 등을 설정하는데 사용. 본문 내용 .... 본문 내 부제목 .... 문단의 약자로 본문내용 띄어쓰기 이탤릭(기울임꼴) 굵은 글꼴. unordered list의 약자. 순서 없이 표시할때 사용 ordered lits의 약자. 순번을 달아야할 때 사용. list의 약자 ul, ol에 따라가는 순번을 달때 사용하는 태그.