본문으로 바로가기
⭐

파일의 IT 블로그

웹/HTML + CSS

해당되는 글 8건
  • thumbnail
    웹/HTML + CSS

    HTML위에서 파이썬 돌리기

    https://www.youtube.com/watch?v=3DuyJf_XPtM https://pyscript.net/ Pyscript.net Run Python code in your HTML. pyscript.net HTML에서 프로그래밍 하려면 선택지는 딱 하나 "JS" 밖에 없는데 Web Assembley 를 이용해서 파이썬 코드를 HTML 에 삽입하여 동작시키는 Pyscript라는 프레임 워크가 하나 나왔습니다. 속도나 성능은 잘 모르겠는데 개인적으로 아주 흥미롭고 좋은 시도라고 봅니다. 개인적으로 JS의 언어 철학이나 기이함이 별로 마음에 들지 않아서 대체제가 등장하면 좋겠다는 생각이 많이 들었거든요.
  • thumbnail
    웹/HTML + CSS

    CSS Selector 성능 향상법

    frontdev.tistory.com/entry/Css-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%96%B4%EB%96%A4-%EA%B1%B8-%EC%8D%A8%EC%95%BC-%EB%8D%94-%EC%84%B1%EB%8A%A5%EC%9D%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C?category=761560 Css 선택자. 어떤 걸 써야 더 성능이 좋을까? 많은 사람들이 CSS가 성능이 높고 성능이 떨어질 수 있다는 사실을 잊거나 단순히 깨닫지 못합니다. 그러나 성능이 좋지 않은 CSS를 얼마나 적게, 실수하고, 실현할 수 있는지 알면 쉽게 용서받을 frontdev.tistory.com 3줄 요약 1. CSS 선택자도 어떻게 쓰냐에 따라 성능 차이 존재함 2. ID 와 Cla..
  • thumbnail
    웹/HTML + CSS

    티스토리 본문 넓히기 (#2 반응형 스킨)

    블로그에서 #2 스킨이 깔끔하고 좋아서 사용중인데 본문 부분이 살짝 좁은 느낌이 들어서 수정해봤습니다. 티스토리 관리 페이지로 이동 >> 꾸미기탭 - 왼쪽아래 스킨변경 >> 오른쪽위 사용중인 스킨 부분 편집을 누릅니다. 오른쪽 부분에서 CSS 항목으로 이동한후 빨간색 부분만 수정해주면 됩니다. /* 헤더 */ .wrap_skin{position:relative;min-width:884px;min-height:100%;padding-left:23%;transition:padding-left ease-in-out 0.2s} .wrap_skin.navi_on {padding-left:960px} .area_head{position:fixed;left:0;top:0;width:23%;margin-top:171p..
  • thumbnail
    웹/HTML + CSS

    [CSS] a 태그 마우스 갖다댈때만 밑줄(underline) 표시하기

    This is a link 주목: a:hover은 a:link 와 a:visited 정의 이후에 등장해야 합니다 주목: a:active 은 a:hover 정의 이후에 등장해야 합니다 a:link 방문 전 링크 상태 a:visitied 방문 후 링크 상태 a:hover 마우스 오버시 상태 a:active 클릭 했을때 상태 출처 www.w3schools.com/css/css_link.asp CSS Styling Links CSS Links With CSS, links can be styled in different ways. Text Link Text Link Link Button Link Button Styling Links Links can be styled with any CSS property (e...
  • thumbnail
    웹/HTML + CSS

    티스토리 본문 부분 나눔고딕 폰트로 변경하기

    빨강 본문 부분 폰트를 나눔고딕으로 변경하는 코드입니다. 노트북 FHD해상도에 배율 125%로 볼땐 본문 진한 글씨가 깔끔하게 보였는데 제 PC로 보니깐 티스토리 기본 글꼴에서 진한 글씨가 지저분하게 보여서 본문폰트 바꾸는 코드를 만들었습니다. (본문만 바꾸는 이유는 블로그 처음들어왔을때 제목으로 표시되는건 티스토리 기본 폰트가 더 나아서 그렇게 했습니다.) 티스토리 설정 - 스킨편집 - HTMl 편집에 들어가셔서 /* 본문 글꼴 - 나눔고딕 설정 */ @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); .area_view{ font-family: 'Nanum Gothic', sans-serif; } CSS ..
  • thumbnail
    웹/HTML + CSS

    브라우저의 속성 지원 확인 사이트 CAN I USE

    caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! caniuse.com CSS, HTML 등 다양한 속성들에서 브라우저의 호환성과 전세계 사람들이 그 기능을 얼마나 사용가능한지 확인 가능합니다. CSS의 GRID기능을 예로 하자면 Global의 95.89%는 전세계 인터넷 사용자들의 95.89%가 Grid Template기능을 이용가능하단 겁니다...
  • thumbnail
    웹/HTML + CSS

    [크롬] Paused in debugger 간단 해결하기

    크롬에서 개발자 도구로 디버깅을 하다보면 위와 같은 메세지가 뜨는데요. 스크립트 때문에 자동 BreakPoint가 걸리는 문제인데 인터넷에 찾아도 오래전 글밖에 없길레 제가 직접 해결방법을 작성합니다. 해결방법은 아주 간단합니다. 크롬 Sources 탭으로 가서 사진에 빨간색으로 표시된 부분을 사진처럼 파란색으로 켜주시면 됩니다 이 창은 크롬 내부에서 F12를 누르면 열 수 있습니다. 저렇게 해두면 Breakpoint 를 끄게 되어 paused in debugger 가 발생하지 않게 됩니다 ^^
    이모티콘창 닫기
    울음
    안녕
    감사해요
    당황
    춤
    피폐

    이모티콘을 클릭하면 댓글창에 입력됩니다.

    티스토리툴바