728x90 반응형 자바22 [HTML5] 로또추첨기 만들기 #주의# 이 글은 강의 글이 아닙니다 틀린 부분, 깔끔하지 못한 부분 있을 수 있습니다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각합니다. html 파일 만들기 오랜만에 html 코딩 관련하여 글을 작성합니다. 우선 VSCode를 켜서 파일을 하나 만들어줍니다. lotto.html 로 만듭니다. html:5 작성 하면 아래와 같이 출력됩니다. 부트스트랩 라이브러리를 통해 불러오겠습니다. 다음 body태크에 아래와 같이 작성해주시면 됩니다. 로또 기계 아래 버튼을 클릭하여 45개 중 6개의 숫자를 뽑으세요 로또 추첨 기록 지우기 이해하기 쉽도록 모든 함수에 최대한 주석을 달아두었습니다. 보기 편하실겁니다. 마지막으로 body와 html을 닫아주면 끝입니다. 전체.. 개발 이야기/[HTML5] 2023. 7. 10. 더보기 ›› [HTML5] 웹 메모장 만드는 법 (폰트 색상 선택 기능 추가하기) #주의# 이 글은 강의 글이 아닙니다 틀린 부분, 깔끔하지 못한 부분 있을 수 있습니다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각합니다. 개요 이번에는 글자의 색상을 바꾸는 기능을 구현해보겠습니다. 글자의 색상을 바꾸기 위해서는 색상 선택을 위한 네 개의 div 요소를 추가해야 합니다. 각 div 요소는 color-box 클래스를 가지며, 배경 색상과 onclick 이벤트를 설정하였습니다. onclick 이벤트에서는 changeColor 함수를 호출하며, 선택한 색상을 인자로 전달합니다. changeColor 함수에서는 memo 요소의 글자 색상을 선택한 색상으로 변경합니다. 이전 코드 웹 메모장 저장 불러오기 Arial Times New Roman Cour.. 개발 이야기/[HTML5] 2023. 5. 26. 더보기 ›› [HTML5] 웹 메모장 만드는 법 (버튼 깔끔하게 배치하기) #주의# 이 글은 강의 글이 아닙니다 틀린 부분, 깔끔하지 못한 부분 있을 수 있습니다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각합니다. 개요 이전 포스팅에서 글꼴과 서식에 관한 내용을 다루었습니다. 이번에는 기능이 아닌 버튼을 깔끔하게 배치해 보도록 하겠습니다. 버튼의 위치나 디자인은 사용자에게 편리한 경험을 제공해야 합니다. 보기 좋은 떡이 먹기도 좋다는 말이 있듯이 사용자에게 편리하고 보기 좋게 버튼을 배치하는 것 또한 아주 중요한 것입니다. UX(사용자 경험)와 UI(사용자 인터페이스)는 소프트웨어 개발 및 디자인 분야에서 중요한 개념입니다. UX와 UI는 서로 연관되어 있지만 다른 개념입니다. UX는 사용자의 경험을 전체적으로 고려하고 설계하는 것이.. 개발 이야기/[HTML5] 2023. 5. 26. 더보기 ›› [HTML5] 웹 메모장 만드는 법 (정렬 기능 추가하기) #주의# 이 글은 강의 글이 아닙니다 틀린 부분, 깔끔하지 못한 부분 있을 수 있습니다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각합니다. 개요 이전 포스팅에서는 웹 메모장에서 필요한 기능 중 하나인 글꼴에 관련된 기능(폰트 선택, 폰트 크기)을 추가해 봤습니다. 이번 포스팅에서는 글의 서식과 관련된 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬을 할 수 있는 기능을 추가해 보겠습니다. 이전 코드 웹 메모장 저장 불러오기 Arial Times New Roman Courier New Verdana 나눔고딕 작게 보통 크게 정렬 기능 추가 정렬 기능을 추가하기 위해 우선 아래의 코드를 에 넣어줍니다. .align { display: inline-block; margin-.. 개발 이야기/[HTML5] 2023. 5. 26. 더보기 ›› [HTML5] 웹 메모장 만드는 법 (폰트 크기 조절 기능 추가하기) #주의# 이 글은 강의 글이 아닙니다 틀린 부분, 깔끔하지 못한 부분 있을 수 있습니다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각합니다. 개요 저번 포스팅에서 폰트를 수정할 수 있는 기능을 추가해 보았습니다. 이번에는 폰트 크기를 조절할 수 있는 기능을 추가해 볼 것입니다. 기본적으로 문서나 메모 작성이 가능한 프로그램 및 앱에서는 폰트 변경과 폰트의 크기를 변경할 수 있기 때문에 해당 기능을 추가할 것입니다. 이전 코드 웹 메모장 저장 불러오기 Arial Times New Roman Courier New Verdana 나눔고딕 폰트 크기 조절 기능 추가 해당 기능을 추가하기 위해서는 우선 태그의 select부분을 수정하시면 됩니다. select { back.. 개발 이야기/[HTML5] 2023. 5. 26. 더보기 ›› 728x90 반응형 이전 1 2 3 4 5 다음
