본문 바로가기

HTML8

[그림 앱 만들기] canvas, 선 그리기, 선 두께 조절하기 기능 - canvas에 마우스 드래그를 통해 선을 그릴 수 있다. - 옆의 range input을 통해 선의 굵기를 조절할 수 있다. 기술 - canvas의 eventListener를 통해 마우스의 조작을 파악한다. - 마우스의 조작에 따라 선을 그린다. - 만약 마우스가 canvas를 벗어난다면 선 그리기가 중단되도록 한다. - range input 값을 통해 선의 굵기(lineWidth)를 조절한다. https://github.com/soaringwave/html-JS-css/commit/89cbb13c96d2517c14b4494c02ffe75c3494a319 2023. 1. 26.
css relative position: 겹쳐서 표현하기 카카오톡에서 메뉴바를 보면 위의 사진과 같이 말풍선 이모티곤 위에 알림이 뜬다. 이를 html과 css에서 나타내는 방법을 기록한다. 먼저 html에서 채팅 목록으로 이동할 수 있는(a) 말풍선 아이콘(i)와 알림의 개수(span)을 나타낸다. 12 그리고 이 html을 꾸미는 css에서 필요한 속성을 설정한다. span tag가 inline 속성을 지니기 때문에 flex로 변경하고, 배경 크기를 조절하고, 적절한 모양새를 갖추면 된다. .nav__notification { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: toma.. 2023. 1. 7.
reset.css: 기본 css 초기화 html과 css를 이용하여 웹페이지를 만들어 보면 기본적으로 폰트, 폰트의 크기, margin 등이 설정되어 있다. 이를 초기화하기 위해 reset.css 파일을 만들 수 있다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub,.. 2023. 1. 6.
html에서 icon 추가하는 방법 & BEM html에서 icon을 추가하는 방법 두 가지가 있다. 1. 직접 이미지를 추가하여 크기 조절하기 2. SVG(Scalable Vector Graphics) 이용하기 예시로 첨부한 아래 두 사이트에서 코드를 복사해서 자신의 html 파일에 붙여넣으면 된다. (무료, 대신 소스가 적다) https://heroicons.com/ Heroicons Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. heroicons.com (무료 & 유료, 가입 필요하다) https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers,.. 2023. 1. 5.

티스토리툴바