본문 바로가기
728x90
반응형

분류 전체보기161

[ChatGPT] 챗지피티한테 코딩 시키기 - 탭 메뉴 https://chat.openai.com/ 챗지피티야 tabs 코드 만들어줄래? chatgpt: 물론이지 HTML, CSS, JAVASCRIPT 나눠서 코드 복사까지 가능하게 나온다. 이 코드를 코드펜에 그대로 복붙해봤다. 완벽하진 않지만 잘 작동한다. 세상 참 좋아졌다. AI가 코딩도 대신 해주고.... 이러다 내 직업 없어지는거 아냐ㅠㅠ? See the Pen Tabs by ChatGPT by sel (@wimmwell) on CodePen. 그런데 말입니다 이 코드 W3SCHOOL에 나와있는 탭 코드랑 일치함 https://www.w3schools.com/howto/howto_js_tabs.asp How To Create Tabs W3Schools offers free online tutorial.. 2023. 4. 19.
[HTML/CSS] ul li에 이미지 사용할 경우 list-style 들여쓰기 맞추기 ul li 구조로 마크업을 하면 li의 텍스트가 여러줄이 되도 들여쓰기가 (지금 이 문단처럼) 자동으로 들어간다. list-item의 마커 타입이 disc,square 등 꽤나 다양하다고 해도 한계가 있기 때문에 보통은 ul {list-style: none;}으로 초기화 시키고 커스텀 이미지를 li 태그 안에 사용할 때가 많다. 이 경우 아래 이미지의 파란선처럼 텍스트 들여쓰기가 맞지않다. 한줄이면 상관없지만 여러줄이면 들여쓰기가 맞지않아 거슬린다. 특히 기관 홈페이지 작업하면 십중팔구는 들여쓰기 맞춰달라고 요청이 들어온다. ul의 list-style에 url을 이용하여 마커를 이미지로 변경할 수도 있지만 사이즈나 위치 등 자유로운 수정이 어렵다. 그래서 이렇게 li 태그 안에 img를 넣어 사용하게 된.. 2023. 4. 18.
소스 보호되어 있는 글 입니다. 2023. 4. 14.
[Photoshop] GIF로 움직이는 PNG 파일(APNG) 만들기! PNG 이미지도 움직일 수 있다는 사실을 아시나요? 전 몰랐습니다ㅎ~ 알게된 기념으로 GIF로 PNG를 만들어 보았습니다. 1. 일단 포토샵에서 gif 이미지를 엽니다. 저는 카카오페이지에서 춘식이 움짤을 저장해서 사용했습니다. 2. 파일>내보내기>레이어를 파일로 순서대로 클릭합니다. 3. 아래와 같은 창이 뜨는데 필요에 따라 저장 경로와 접두어를 바꾸고 실행을 눌러줍니다. 4. 그러면 이렇게 GIF의 프레임들이 각각 png로 저장이 됩니다. 5. 이제 APNG를 만드는 사이트를 열어줍니다. 아래 사이트가 아니어도 APNG assembler/generator/maker 등을 검색하여 원하는 사이트에서 작업하면 됩니다. https://ezgif.com/apng-maker Online Animated PNG.. 2023. 4. 5.
[HTML/CSS] CSS로 텍스트 여러줄에 여백 있는 밑줄을 만드는 여러가지 방법 (multi line underline) 글에 밑줄을 치는 방법은 기본적으로 text-decoration: underline;이 있다. 하지만 가끔 글씨랑 밑줄간격이 너무 가까워서 간격을 벌리고 싶을 때! 위의 기본 underline 속성에서는 쉽지 않음 아래에 나온 5,6번이 기본 underline속성에서 밑줄 포지션이랑 offset을 수정하여 결과를 만든 케이스인데, 호환성이 매우 떨어져서 사용하지 않는게 좋다. (최신 버전의 크롬 브라우저로만 사용하는 웹사이트가 아니라면..!) 아래 텍스트 중 글자와 밑줄 사이에 여백이 있는 게 몇 개인가요? 밑줄이 보이시나요? 밑줄이 보이시나요? 밑줄이 보이시나요? 이와 같이 3개라면 아래 속성들이 호환되는 브라우저를 사용하고 계십니다. 텍스트에 밑줄을 주는 방법과 여백을 주는 방법을 알아보자 *사용된 .. 2023. 3. 30.
웹퍼블리셔의 주저리 웹디자이너로 시작해 디블리셔 과정을 짧게 거치고 웹퍼블리셔로 거듭났다. 그래서 원래는 디자인팀이었는데 올해는 개발팀이 되었고 명함도 개발팀으로 새로 나왔다! 정말 기뻤다. 확실히 나는 디자인보다 코딩이 즐겁고 훨씬 더 적성에 맞다. 비전공자이지만 영어 실력이 있고 십수년간 블로그를 취미로 하며 다져진 잔기술들 덕인 것 같다. 지금 우리회사에 퍼블리셔는 나 혼자고 개발자 세분이 계시다. 주로 프론트엔드 개발자 두분과 프로젝트를 같이 진행하는 경우가 대다수다. 웹디자이너님에게 시안을 받으면, 그 규격으로 웹 기반을 만들고 기능이나 동적인 부분들을 처리해 개발자분께 코드를 넘기는 식이다. 올해 세운 내 업무상 목표는 개발자에게 넘기기 전 코드의 완성도를 높이는 것과 더 간결하게 코딩하기였다. 근데 사실 궁금하.. 2023. 3. 3.
[Photoshop] 포토샵으로 여러 이미지 한 번에 크기 조절하기 / 포토샵으로 레이어 일괄 저장하기 포토샵으로 이미지 하나하나 사이즈 맞추고 크롭하기 귀찮을 때 쓰면 좋은 방법 스택으로 파일 불러오기 각각 크기가 다른 이미지를 한 번에 레이어로 불러와서 같은 사이즈로 조절할 수 있다. 이 방법이 자동 리사이징은 아니지만 그래도 일괄로 작업할 수 있으니 차선책정도는 되지 않을까 우선 리사이즈할 사진들을 한 폴더에 넣어줍니다. 포토샵을 열고 파일 > 스크립트 > 스택으로 파일 불러오기 찾아보기>아까 생성한 폴더 선택해서 전체선택(ctrl+A) > 열기 그러면 이렇게 한 파일에 레이어로 이미지들이 전부 불러와집니다. 가장 가로가 넓은 이미지 기준으로 캔버스 크기가 잡힘 파일마다 사이즈가 조금씩 다르게 형성되는데 캔버스에 맞게 각각 사이즈 조절(ctrl+t)을 해줍니다. 그리고 이미지 크기에서 원하는 해상도로.. 2023. 2. 24.
[javascript] HTML요소(div, p, span)의 텍스트를 클립보드로 복사하기 버튼 - Copy Text to Clipboard 자바스크립트를 이용하여 텍스트 복사 버튼을 구현해보자 function copy(id) { var r = document.createRange(); r.selectNode(document.getElementById(id)); window.getSelection().removeAllRanges(); window.getSelection().addRange(r); document.execCommand('copy'); window.getSelection().removeAllRanges(); } 위 copy 함수를 onclick 이벤트에 넣어 실행해주면 된다. (id)에 복사하려는 대상 요소의 id를 넣어주면 된다. 안녕하세요 텍스트 복사 "안녕하세요"가 복사될 것이다. codepen 코드 See the Pen C.. 2023. 2. 22.
[HTML/SCSS/jQuery] 모바일 내비게이션 메뉴 만들기 with 애니메이션 메뉴(햄버거 버튼) 클릭시 내비게이션이 슬라이드 되는 모바일 GNB 코드이다. 닫기 버튼 애니메이션에 노력을 기울임ㅋㅋ 클래스를 통해 영역을 left -100%에서 0%로 주면 슬라이드 된다. 여기에 transiton을 적용해면 자연스럽다. 닫기 버튼은 span으로 만들고 transform을 주어 메뉴버튼에서 닫기버튼으로 전환되게 만들었다. 그나자나 SCSS를 사용하다보니 CSS로 스타일링을 하려면 너무 귀찮다. SCSS 왕편함! &.on { left:0%; .btn_gnb__inner { transform:rotate(180deg); -webkit-transform:rotate(180deg); span { &:nth-of-type(1) {transform:rotate(45deg) translate(4p.. 2023. 2. 16.
728x90
반응형

티스토리툴바