본문 바로가기

CSS14

[Javascript] chart.js 를 사용하여 선 그래프 그리기 안녕하세요 오늘은 chart.js 라이브러리를 이용하여 선 그래프를 그려 볼려고 합니다. index.html 파일에 다음과 같이 코드를 작성해줍니다. 위와 같이 코드를 작성하면 다음과 같은 결과를 얻을 수 있습니다. 2024. 4. 9.
[ HTML / CSS ] 마우스 커서 커스텀하기 안녕하세요, 오늘은 CSS cursor 속성을 사용해서 마우스 커서를 원하는 이미지로 바꿔보겠습니다. CSS cursor 속성은 다음과 같이 적용할 수 있습니다. cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* … ,*/ url(cursor_n.cur) 5 5, auto; 커스텀 마우스 설정을 하려면 cursor 속성 값으로 한개 또는 여러 개의 값들을 사용할 수 있습니다. 여러 개의 값들을 사용할 경우 쉼표로 분리해야 하며, 첫번째 이미지 파일 로딩에 실패했을 경우 그 다음 것이 적용됩니다. 그리고 url()의 괄호 안에는 변경하고자 하는 커서 이미지 파일의 경로를 입력합니다. 위에서 'auto' 라고 입력된 값은 필수로 입력해야 하는 키워드 값으로, 모든.. 2022. 11. 17.
[ HTML / CSS ] ::after, ::before 사용해보기 안녕하세요 오늘은 css 의 가상요소(pseudo-element)인 ::after 과 ::before 에 대해 알아보겠습니다. CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다. 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(pseudo-element)라고 합니다. 그리고 ::after, ::before 는 내용의 앞과 뒤에 컨텐츠를 추가할 때 사용하면 유용한 가상요소입니다. 이 컨텐츠는 content 라는 속성에서 정의할 수 있습니다. 바로 예제로 넘어가겠습니다... 2022. 11. 2.
[ HTML / CSS ] 스크롤 스냅(Scroll Snap) 기능 사용해보기 안녕하세요 오늘은 CSS의 스크롤 스냅(Scroll Snap) 기능을 사용해보겠습니다. 이 기능을 사용하면 스크롤바가 이동한 만큼만 하위 요소들이 이동하는 것이 아니라, 스크롤을 하면 자동으로 다음 요소로 애니메이션 효과와 함께 이동하면서 달라붙는 효과를 표현할 수 있습니다. 구현한 예제 시연 화면은 다음과 같습니다. 다음은 예제 전체 코드입니다. Spring Summer Autumn Winter 'container' 클래스에 'scroll-snap-type' 속성을 추가했습니다. 속성 값은 'y mandatory' 를 사용했습니다. 세로 방향으로 스크롤할 것이므로 'y' 값을 주었고, 페이지 단위로 자동으로 스크롤되게 하기 위해서 'mandatory' 값을 사용했습니다. 'mandatory' 속성을 사.. 2022. 10. 3.
[ HTML / CSS ] Tailwind CSS 사용해보기 안녕하세요, 오늘은 Tailwind CSS 를 사용해보겠습니다. Tailwind 는 CSS 프레임워크 중 하나로, HTML 안에서 CSS 스타일을 쉽고 빠르게 만들 수 있게 도와줍니다. 스타일 코드가 HTML 안에 있기 때문에 HTML과 CSS 파일을 따로 관리할 필요가 없어집니다. 그리고 부트스트랩과 비슷하게 미리 정해진 유틸리티 클래스를 사용함으로써 일관된 디자인이 가능하며 클래스명을 고민하는 수고를 덜 수 있습니다. 예를 들어, 다음과 같은 버튼 3개를 구현 할 때, Tailwind CSS 를 사용하지 않고 일반 CSS 스타일링을 하면 다음과 같은 코드가 필요합니다. 빨간색 버튼 녹색 버튼 검은색 버튼  Tailwind CSS 를 사용하는 경우에는 다음과 같이 코드를 작성할 수 있습니다. 빨간색 .. 2022. 9. 5.
[ HTML / CSS ] 늘어나는 textarea 만들기 오늘은 늘어나는 textarea 를 구현해보겠습니다. 즉, 입력한 글자가 늘어남에 따라 textarea 의 높이도 길어지게 하겠습니다. 전체 시연 영상은 다음과 같습니다. 먼저 다음과 같이 textarea 요소를 body 태그 안에 작성합니다. rows="1" 속성으로 인해서 처음 시작 높이는 1줄이 됩니다. 그리고 oninput 이벤트 속성은 사용자가 요소에 정보를 입력하거나 요소의 값이 변경되면 실행됩니다. 즉, textarea 요소에 사용자가 입력을 할 때마다 해당 textarea의 높이는 스크롤높이와 동일하게 되고, 따라서 textarea의 높이는 고정되지 않고 사용자의 줄바꿈에 따라, 혹은 입력값이 늘어나고 줄어들 때마다 달라지게 됩니다. 영상에서 보이는 것처럼 입력 내용의 길이에 따라 text.. 2022. 8. 21.
[HTML / CSS] 범위 슬라이더 (range slider) 사용해보기 오늘은 range slider 를 사용해보겠습니다. 먼저 가장 기본적인 형태를 만들어보겠습니다. 태그의 type 속성을 "range" 로 설정하면 아래와 같은 형태의 range slider 가 만들어집니다. 이제 css 를 입혀 보겠습니다. Value: type 이 "range" 이고, id 가 "myRange" 이며 class명이 "slider"인 엘리먼트를 만듭니다. 최댓값과 최솟값을 각각 1, 100으로 지정하고, 초기값은 100으로 설정합니다. 그리고 class명이 "slidecontainer"인 태그로 감싸줍니다. 그리고 다음과 같은 css 코드를 작성합니다. body { margin: 0 auto; width: 50%; } .slidecontainer { width: 100%; margin-t.. 2022. 5. 23.
[javascript] 그림판 만들기 안녕하세요! 오늘은 스틱코드로 웹에서 사용할 수 있는, 간단한 그림판을 만들어 그림을 그리고, 지우고, 다운받을수 있는 기능을 만들어 보겠습니다. 소스는 하단 포스팅을 참조 해주세요. https://stickode.com/detail.html?no=2467 스틱코드 stickode.com 그림판은 상단에 그림을 그릴수 있는 canvas 영역, 컬러 펜두께를 선택하는 부분 되돌리기, 지우기, 다운로드 하는 버튼으로 구성이 되어 있습니다. 먼저 board.php에 그림을 그릴수 있는 스케치북인 canvas를 구성하고, 도구부분을 만들어 보겠습니다. - 화면 구성하기 상단에 CSS를 연결해주는 코드를 작성하고 그림판영역, 컬러칩, 컬러피커, 펜굵기조절, 버튼(되돌리기, 지우기, 다운로.. 2021. 9. 25.
[JavaScript] 빠르게 To Do 리스트 만들기 이번 예제에서는 자바스크립트만을 이용해 To Do 리스트를 만들어보겠습니다. 따라하기 전, 스틱코드에 올라온 자바스크립트로 투두리스트 만들기 코드를 즐겨찾기 해주세요 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 ToDoList-HTML을 입력하면 자바스크립트로 투두리스트를 만들기 위해 필요한 html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 스틱코드로 만든 투두리스트 추가 모두 삭제 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 ToDoList-CSS를 입력하면 자바스크립트로 투두리스트 만들기 - css 코드가 자동완성됩니다. 이제 호출태그로 완성된 코드 중 수정.. 2021. 7. 8.

티스토리툴바