Hey Tech

📝 들어가며 본 포스팅에서는 HTML에서 글자/텍스트에 밑줄/취소선/윗줄 추가하는 방법을 소개합니다. 📚 목차 0. 기본값 1. 밑줄 추가 2. 취소선 추가 3. 윗줄 추가 0. 기본값 아래의 그림 1과 같이 기본 텍스트가 가운데 정렬로 되어 있습니다. Hey Tech 1. 밑줄 추가 style 내 text-decoration 속성에 underline 옵션을 넣어주면 아래의 그림 2와 같이 밑줄이 추가됩니다. text-decoration : underline; Hey Tech 2. 취소선 추가 취소선은 text-decoration에 line-through 옵션을 넣어주면 됩니다 (그림 3). text-decoration : line-through; 3. 윗줄 추가 윗줄은 text-decoration에 o..

📝 들어가며 본 포스팅에서는 HTML에서 텍스트 정렬 방법을 소개합니다. 📚 목차 0. 기본값 1. 가운데 정렬 2. 우측 정렬 3. 좌측 정렬 0. 기본값 p 태그를 통해 텍스트를 삽입하면 아래의 그림 1과 같습니다. Hey Tech 1. 가운데 정렬 가운데 정렬은 아래와 같이 style > text-align에서 center로 옵션값을 주면 됩니다 (그림 2). Hey Tech 2. 오른쪽 정렬 오른쪽 정렬은 right로 옵션값을 주면 됩니다 (그림 3). Hey Tech 3. 왼쪽 정렬 오른쪽 정렬은 left로 옵션값을 주면 됩니다 (그림 3). Hey Tech 포스팅 내용에 오류가 있다면 아래에 👇👇👇 댓글 남겨주시면 감사드리겠습니다. 그럼 오늘도 즐겁고 건강한 하루 보내시길 바랍니다 :) 고맙습..

📌 들어가며 본 포스팅에서는 Scriptlet의 개념과 사용방법에 대해 간략하게 소개합니다. 📚 목차 1. Scriptlet 개념 2. Scriptlet 사용방법 3. 예제 코드 1. Scriptlet 개념 Scriptlet는 Java Server Page(JSP) 페이지에서(더욱 쉽게 말하면 HTML 페이지) Java 코드를 작성하고 실행할 수 있도록 돕는 코드 블록입니다. 아래의 예제 코드를 살펴보면 직관적으로 쓰임새를 알 수 있습니다. 2. Scriptlet 사용방법 Scriptlet 작성방법은 크게 4가지로 각 역할은 아래와 같습니다. 실제 예제 코드와 함께 살펴보시죠. 작성방법 설명 변수선언, 함수 호출 등 일반적인 자바 코드 작성 시 활용 페이지 출력을 위한 표현식으로 활용 함수 선언 시 활용..

📌 들어가며 본 포스팅에서는 JSTL의 기본적인 개념 및 장점, 설치/사용방법을 예제코드와 함께 소개합니다. 📚 목차 1. JSTL 개념 2. JSTL 장점 3. JSTL 설치방법 4. 예제 코드 1. JSTL 개념 JSTL은 JavaServer Pages Standard Tag Library의 약어로, Java 코드를 바로 사용하지 않고 HTML 태그() 형태로 직관적인 코딩을 지원하는 라이브러리입니다. 어렵게 말하자면, JSTL은 JSP의 확장 태그라고 부릅니다. 일반적으로 HTML 태그만으로는 Java의 forEach 문과 같은 반복문을 사용할 수 없습니다. 하지만, 아래의 예시 코드의 body 태그를 보시면, Java나 타 프로그래밍 언어처럼, 태그() 안에 쓰임새가 직관적으로 파악되는 반복문을 ..

👨‍💻 들어가며 본 포스팅에서는 이클립스를 활용하여 간단한 정적(static) 웹 페이지를 만드는 과정을 소개합니다. 구체적으로, 메인 페이지와 2개의 페이지로 총 3개의 페이지를 만들고, 메인 페이지에서 다른 2개의 페이지로 하이퍼링크를 통해 넘어가는 방법을 소개합니다. 1. 개발 Step 1. 이클립스 실행 먼저, 이클립스를 실행합니다. Step 2. Web 개발 모드 변경 이클립스 내 우측 상단에 보면 돋보기 아이콘이 있습니다. 아래의 스크린샷처럼, 돋보기 아이콘 우측에 위치해 있는 Open Perspective 아이콘을 클릭합니다. 아래에서 두 번째에 있는 Web을 선택하고 하단에 Open 버튼을 클릭합니다. Step 3. Static Web Project 생성 상단 메뉴바에서 File > New..

📚 목차 1. AS IS: 동일 파일 업로드 불가한 경우 2. 해결방법 3. TO BE: 동일 파일 업로드 가능한 경우 1. AS IS: 동일 파일 업로드 불가한 경우 아래의 예시로 상황을 설명해 드립니다(그림 1). 파일 업로드 시(i.e., onChange) 팝업이 뜨는 로직을 작성하였습니다. 헌데, 같은 파일을 업로드할 경우 이후 로직이 수행되지 않는 것을 확인하실 수 있습니다. 2. 해결방법 { this.onFileChange(e); e.target.value = ''; }}/> input 태그에서 onChange 옵션에서 파일 업로드 로직 호출 후 event에서 value를 초기화하면 해결 가능합니다. 3. TO BE: 동일 파일 업로드 가능한 경우 코드를 적용하면 위의 그림 2와 같이 같은 파..

🔥 목표 JavaScript와 HTML을 활용하여 간단한 Interactive Web 기능을 구현해 본다. 예제 간단한 예제를 실습해 봅니다. HTML을 활용해 버튼 UI를 생성하고 웹에 출력하고, JavaScript를 통해 사용자가 버튼을 클릭하는 것을 감지하여 클릭 횟수를 실시간으로 업데이트하는 것을 구현해 봅시다. 실습 코드 index.html Total Click: 0 버튼 실행결과 버튼 클릭 전입니다. 아래와 같이 버튼을 클릭하면 웹 페이지 및 콘솔에 클릭 횟수가 출력되는 것을 확인할 수 있습니다. JavaScript와 HTML를 활용하여 간단한 Interactive Web 기능을 구현해 봤습니다. 포스팅 내용에 오류나 질문이 있다면 댓글 남겨주시면 감사드리겠습니다. 고맙습니다 :)