본문 바로가기

CSS9

[그림 앱 만들기] canvas, 선 그리기, 선 두께 조절하기 기능 - canvas에 마우스 드래그를 통해 선을 그릴 수 있다. - 옆의 range input을 통해 선의 굵기를 조절할 수 있다. 기술 - canvas의 eventListener를 통해 마우스의 조작을 파악한다. - 마우스의 조작에 따라 선을 그린다. - 만약 마우스가 canvas를 벗어난다면 선 그리기가 중단되도록 한다. - range input 값을 통해 선의 굵기(lineWidth)를 조절한다. https://github.com/soaringwave/html-JS-css/commit/89cbb13c96d2517c14b4494c02ffe75c3494a319 2023. 1. 26.
css: css에서 레이어처럼 겹치는 순서 조정하기 html에서 position 속성(absolute, relative, fixed 등)을 이용하여 포토샵의 레이어처럼 겹쳐서 나타낼 수 있다. 가끔 추가로 겹치는 순서를 조정하여 표현해야 할 때가 있다. 그럴 때는 z-index를 이용하면 된다. z-index에 정수를 넣어줌으로써 레이어의 순서를 조정하듯이 설정할 수 있다. 정수의 값이 클수록 가장 위에 표현된다. 아래 예시를 참고하면 된다. 우선 이렇게 z-index는 설정하지 않고 position으로만 겹친 rainbow를 만들었다. html 파일 css 파일 body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .rainbow .. 2023. 1. 14.
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.

티스토리툴바