본문 바로가기

HTML&CSS

(17)

html 띄어쓰기 공백넣기 💯 html 띄어쓰기 방법입니다. html 한 칸 띄어쓰기와 한번에 칸 띄우기 여러번 하는 방법입니다. html에서 한 칸을 띄우려면 기본적으로 스페이스 한번 넣어주면 됩니다. 그러나 2칸 이상 연달아 띄우기 위해서 스페이스 여러번 넣어도 한 칸 띄우기만 적용됩니다. html 한 칸 띄우기 태그 ( ) html 문장이나 이미지 사이 등 한 칸을 띄우기 위해서 를 이용할 수 있습니다. 여러번 띄워쓸 때는 을 여러번 넣어주면 됩니다. 를 이어서 붙여 띄우거나 를 넣어주고 스페이스를 넣고 또 를 넣고 스페이지를 넣어 띄워줄 수 있습니다. ① ***** ***** (추천) ② ***** ***** ③ ***** ***** (추천) ④ ***** ***** ⑤ ***** ***** 위 처럼 소스를 넣어주면 아래처럼 ..

티스토리 동영상 유튜브 하단 여백 제거 성공 🙌 티스토리에 동영상이나 유튜브를 넣으면 하단에 여백 공간이 생깁니다. 티스토리에서 업그레이드 중이라 생각하고 수정되기를 바랬는데 아직까지 해결되지 않았습니다. 소스를 확인하고 동영상 하단에 공백이 생기는 현상을 없앴습니다. 아래 그림처럼 유튜브 동영상을 티스토리에 추가했는데 여백이 생깁니다. 티스토리가 업그레이드하면서 템플릿소스와 충돌되는 문제라고 생각합니다. 여백이 생기는 원인 style.css에 여백 제거 스타일 추가 html 모른다면 그대로 따라만 하세요. 수정할 수 있어요.(맨 하단에 보세요.) 티스토리 동영상 유튜브 삽입시 여백 현상 아래 이미지 처럼 동영상이나 유튜브를 추가했는데 여백이 크게 생깁니다. 다른 티스토리 탬플릿도 같은 현상이 있는지는 모르겠네요. 원인을 확인해봤습니다. 개발자 모드를..

icomoon 사용법 아이콘 폰트 직접 만들어보자! icomoon을 이용해서 fontawesome과 같이 아이콘 폰트를 직접 만들 수 있습니다. 천천히 따라서 만들어보세요. ① 일러스트 파일로 아이콘 만들어 svg 파일로 저장하기 ② icomoon에서 아이콘 폰트로 만들기 ① svg 파일 만들기 먼저 아이콘으로 변환할 모양을 일러스트로 만들어준 후 "Save As"로 svg 파일로 저장합니다. 또는 이미지를 svg로 변환하는 사이트에서 변환하여도 됩니다. 이와 같이 svg 파일이 생성되었습니다. ② icomoon 사이트에서 아이콘 폰트로 변한 1) icomoon 사이트에서 IcoMoon App 를 클릭합니다. 2) 왼쪽 상단에 있는 Import Icons 를 클릭해서 저장해둔 svg 파일을 가져옵니다. 3) svg 파일이 들어오면 svg 파일을 선택하고 ..

[html] <button> 링크하기 , 새창 링크하기(a링크, onclick 링크, input 링크) 버튼에 링크하는 방법, 새창으로 링크하는 방법입니다. 버튼 에 링크하는 방법은 여러가지 입니다. 로 링크하는 방법 에 onclick로 링크하는 방법 으로 링크하는 방법 태그에 링크하는 방법 에 a 태그로 링크하는 방법 로 을 감싸서 링크를 합니다. 버튼링크 방법1 으로 태그를 감싸서 링크를 합니다. 버튼링크 방법1 에 태그로 링크했을 때 일부 브라우저에서 클릭이 안되는 현상이 있을 경우 onclick를 이용하세요. 👇 에 onclick 로 링크하기 태그 안에 자바스크립트 onclick 속성을 사용해서 링크를 합니다. 에이망고 바로가기 버튼 에 새창으로 링크하려면 onclick="window.open('url')"을 사용하면됩니다. 에이망고 바로가기 input type="button"에 링크하기 input..

icomoon 폰트 아이콘 사용법 icomoon 폰트 아이콘 사용법은 폰트 어썸과 비슷합니다. iconoon의 장점은 내가 만든 svg 파일을 폰트 아이콘을 변환하여 사용할 수 있는 점입니다. 본 페이지에서는 icomoon 폰트 아이콘을 다운로드 받고 웹페이지에서 사용하는 방법입니다. icomoon 다운로드 ① icomoon 사이트에서 우측 상단에 있는 보라색 IcoMoon App 를 클릭합니다. ② 다운로드 받고 싶은 아이콘을 선택해 줍니다. ③ 우측 하단의 [Generate Font F]를 선택합니다. ④ 선택한 아이콘은 폰트 코드를 확인할 수 있습니다. Enable Quick Usage를 클릭하여 서버에 링크할 수 있는 css 코드를 확인하세요. 클릭하면 icomoon의 link rel 경로를 복사할 수 있습니다. 서버에 css를 ..

<button> 버튼에 링크하기 문서나 이미지에 링크하려면 를 하면 됩니다. 버튼에 링크하는 방법은 조금 다릅니다. button 버튼에 링크하기 1. 현재 페이지에서 링크 전환할 때(button onclick 링크) 버튼 태그 안에 onclick="location.heft='#'" 이것을 추가해 주면 됩니다. 마이페이지 바로가기 2. 새창으로 링크할 때(button 링크 새창) 버튼 태그 안에 onclick="window.open('#')" 이것을 추가해 주면 됩니다. 마이페이지 바로가기 3. 팝업창으로 링크 열 때 마이페이지 바로가기 background css 축약, 한번에 쓰는 방법, 줄여서 써보자 background css 축약, 한번에 쓰는 방법, 줄여서 써보자. background css를 적용할 때 많은 속성들이 있다. 이것..

코드 편집기 뭘 쓰세요? 혹시 visual studio code? 퍼블리싱을 배우면서 처음 접하는 코드 편집기, 기억은 안나지만 네이버에서 무료 편집기 깔아서 이용했었는데, 학원에서 adobe의 브라켓으로 배워서 지금까지 사용하고 있어요. 근데 요즘에는 더 잘나가는 코드편집기가 많이 있네요. 브라켓, 가끔 메모장을 쓰는 저는 옛날 세대인가요? 요즘 퍼블리셔에게 물어봤습니다. "너 뭐 쓰나?" "저는 visual studio code를 씁니당." 퍼블리싱에 손넣은지 몇년이 되니 어떻게 돌아가는지 @@ 잘 모릅니다. 더군다나 집에 콕 박혀서 쭉~ 재택근무를 하니 보고 들은게 없었네요. 들어가본 Visual studio code. 윈도우와 맥os, 그리고 리눅스에서 실행되는 소스 코드 편집기라고 나와있습니다. 개발 프로그래밍 언어를 지원할 수 있는 확장기능이 있다고 하네요...

이미지 링크 테두리 없애기 css 이미지에 링크를 하면 테두리가 나타나요. 이것을 없애주는 css입니다. 간단하게 처리할 수 있습니다. 링크 이미지에 테두리 없애기 border:0; 값을 넣어줍니다. css로 모든 이미지에 테두리를 없애려면 아래와 같이 쓰면 될 것 같네요.

이전 1 2 3 다음

티스토리툴바