dongsik-00.log https://velog.io/ Wed, 04 Jun 2025 07:34:45 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed dongsik-00.log https://velog.velcdn.com/images/dongsik-00/profile/db017d0d-b862-41c2-8749-8306cbb1bba2/social_profile.png https://velog.io/ Copyright (C) 2019. dongsik-00.log. All rights reserved. <![CDATA[Java, Eclipse설치(mac os)]]> https://velog.io/@dongsik-00/Java-Eclipse%EC%84%A4%EC%B9%98mac-os https://velog.io/@dongsik-00/Java-Eclipse%EC%84%A4%EC%B9%98mac-os Wed, 04 Jun 2025 07:34:45 GMT 자바 설치

oracle.com/java/technologies/downloads/#jdk21-mac

나는 m2 맥이라서 ARM64 DMG INSTALLER설치

자바 버전 여러개 깔면 환경변수 잡아줘야하는데, 저기 버전 하나만 잇으면 환경변수 설정 필요 없다함.

이클립스 설치

https://www.eclipse.org/downloads/ download package 클릭 이거 macos x86_64 클릭

그러고 걍 설치때리면 됨.

]]> <![CDATA[이벤트와 이벤트 처리기]]> https://velog.io/@dongsik-00/%EC%9D%B4%EB%B2%A4%ED%8A%B8%EC%99%80-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B2%98%EB%A6%AC%EA%B8%B0 https://velog.io/@dongsik-00/%EC%9D%B4%EB%B2%A4%ED%8A%B8%EC%99%80-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B2%98%EB%A6%AC%EA%B8%B0 Fri, 16 May 2025 01:59:05 GMT 이벤트

웹 페이지를 읽어오거나 링크를 클릭하는 것 처럼 웹 문서 영역 안에서 이루어지는 동작

마우스 이벤트

이벤트 설명
click 사용자가 HTML 요소를 클릭할 때 이벤트가 발생합니다.
dblclick 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생합니다.
mousedown 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생합니다.
mousemove 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생합니다.
mouseover 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생합니다.
mouseout 마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다.
mouseup 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생합니다.

키보드 이벤트

이벤트 설명
keydown 사용자가 키를 누르는 동안 이벤트가 발생합니다.
keypress 사용자가 키를 눌렀을 때 이벤트가 발생합니다.
keyup 사용자가 키에서 손을 뗄 때 이벤트가 발생합니다.

문서 로딩 이벤트

이벤트 설명
abort 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생합니다.
error 문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
load 문서 로딩이 끝나면 이벤트가 발생합니다.
resize 문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다.
scroll 문서 화면이 스크롤되었을 때 이벤트가 발생합니다.
unload 문서에서 벗어날 때 이벤트가 발생합니다.

폼 이벤트

이벤트 설명
blur 폼 요소에서 포커스가 벗어났을 때 이벤트가 발생합니다.
change 목록이나 체크 상태 등이 변경되면 이벤트가 발생합니다. <input>, <select>, <textarea> 태그에서 사용합니다.
focus 폼 요소에 포커스가 놓였을 때 이벤트가 발생합니다. <label>, <select>, <textarea>, <button> 태그에서 사용합니다.
reset 폼이 리셋되었을 때 이벤트가 발생합니다.
submit submit 버튼을 클릭했을 때 이벤트가 발생합니다.

이벤트 처리기

웹 문서에서 이벤트가 발생하면 처리하는 함수 : 이벤트 처리기 or 이벤트 핸들러

기본형 <태그 on이벤트명 = "함수명">

이벤트 발생 후 여러가지 명령 실행해야 할 경우 명령을 묶어서 하나의 자바스크립트 함수로 만드는 게 좋음

<ul>
    <li><a href="#" onclick="changeBg('green')">Green</a></li>
    <li><a href="#" onclick="changeBg('orange')">Orange</a></li>
    <li><a href="#" onclick="changeBg('purple')">Purple</a></li>
</ul>        
<div id="result"></div>

<script>
    function changeBg(color) {
        let result = document.querySelector('#result');
        result.style.backgroundColor = color;
    }
</script>

버튼 클릭시 색상값을 인수로 넘겨 작성한 함수colorBg()를 실행시킴

]]> <![CDATA[프로필 사이트 만들기]]> https://velog.io/@dongsik-00/%ED%94%84%EB%A1%9C%ED%95%84-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0 https://velog.io/@dongsik-00/%ED%94%84%EB%A1%9C%ED%95%84-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0 Wed, 23 Apr 2025 09:24:32 GMT node.js 설치 후

원하는 로컬 경로에 ex) D:\dev\homework

https://github.com/Yeon85/chapter3-main.git 경로를 git clone

terminal의 +에서 Command Prompt를 켠 후

D:\dev\homework\chapter3-main> 이 경로로 온다.

npm install vite --save-dev

npm install

npm run dev

차례대로 터미널에 입력 후 나타나는 링크에 ctrl+클릭을 통하여 접속하면 해당 사이트로 접속 가능. 이후 GitHub에 업로드하고, Vercel을 통해 배포함으로써 언제 어디서든 해당 사이트에 접속할 수 있도록 하였다.

]]> <![CDATA[250423]]> https://velog.io/@dongsik-00/250423 https://velog.io/@dongsik-00/250423 Wed, 23 Apr 2025 09:14:34 GMT p168 ~ p312

*인라인스타일 *: 한 줄마다 style="color:색;" 입력

내부스타일 시트 : 

  <style>
    h1{
      padding: 10px;
      background-color: #222;
      color: #fff;
    }
  </style>

외부 스타일 시트:

외부 스타일 시트를 따로 작성 후 헤드에 href를 이용하여 작성된 스타일시트를 링크해줌.

외부 스타일시트 연결시 사용하는 태그

 <head>
  <link rel="stylesheet" href="css/style.css">
 </head>

결과

마진과 패딩 초록 -> 마진 파랑 -> 패딩

div -> divide 의 뜻 h -> 헤더의 뜻

클래스 선택자 사용

  <style>
    p {
      font-style: italic;  /* 이탤릭체 */
    }
    .accent {
      border:1px solid #000;  /* 테두리 */
      padding:5px;  /* 테두리와 내용 사이의 여백 */
    }
    .bg {
      background-color:#ddd;    /* 배경색 */  
    }
  </style>

클래스 선택자 기본형 : .클래스명{스타일 규칙} 사용시 class ="클래스명"

헤더에 스타일을 정의 모든 p에 italic 적용 accent, bg 스타일 정의

h1 태그에 accent, bg 적용하려면

<h1 class = "accent bg">레드향</h1>

특정 텍스트에만 적용하려면 span이용해서 해당 텍스트 선택하면 됨.

<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>

id 선택자 사용

클래스 선택자의 경우 문서에서 여러번 적용 가능하나, id선택자의 경우 문서에서 한번만 적용 가능.

  <style>
    #container {
      width:500px;  /* 너비 */
      margin:10px auto;  /* 바깥 여백 */
      padding:10px;  /* 테두리와 내용 사이 여백 */ 
      border:1px solid #000;  /* 테두리 */
    }    
  </style>
  <div id="container">
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>

id 선택자 기본형 : #아이디명{스타일 규칙} 사용시 id="아이디명"

div에 #container를 사용하여 스타일을 정의 #을 이용한거면 id선택자를 사용하기위해 스타일에 선언한거임

우선순위

1) !important 2) 인라인 스타일 3) id 스타일 4) 클래스 스타일 5) 타입 스타일

text align 속성 start, end, left, right, center 등등

header에 style에 설정

<style>
    .center{
        text-align: center;
     }
    .justify{
        text-align:justify;
    }
</style>

이런식으로 클래스를 만들고 속성을 지정하여 정렬,자간등을 변경 가능

목록 스타일 list-style-type, list-style-image, list-style-position, list-style 등으로 들여쓰기, 목록 이미지등을 변경 가능

CSS박스 모델 박스 모델의 기본 요소 마진, 테두리, 패딩, 콘텐츠 영역

]]> <![CDATA[HTML 정리 250422]]> https://velog.io/@dongsik-00/HTML-%EC%A0%95%EB%A6%AC-250422 https://velog.io/@dongsik-00/HTML-%EC%A0%95%EB%A6%AC-250422 Tue, 22 Apr 2025 14:31:29 GMT

HTML이란? HyperText Markup Language -> 웹 문서를 만드는 기본 언어

HTML문서의 기본 구조

웹 문서는 기본적으로 html, head, body의 세 영역으로 구성되어있음.

<html> ~ <\html>: 웹 문서의 시작과 끝을 나타내는 태그
<head> ~ <\head>: 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분
<body> ~ <\body>: 실제로 웹 브라우저에 나타나는 내용

head태그

head 태그 사이에 작성한 내용은 웹 브라우저 화면에서는 보이지 않는다. head 태그에서 가장 중요한 부분은 title태그.

사용 방법

<title>HTML 기본 문서<\title>

다음과 같이 title 태그에 작성한 내용이 웹 문서 제목 표시줄에 표기된다.

body태그

실제 웹 브라우저에 표시할 내용을 입력한다.

사용 방법

<body>
    <h1>웹 문서 만들기</h1>
    <hr>
    <p>HTML</p>
    <p>CSS</p>
    <p>자바스크립트</p>
</body>

태그 정리

h태그 : h1 ~ h6 존재 폰트 크기가 숫자가 낮을수록 크다. p태그 : 문단을 표시 a태그 : 하이퍼링크 표시

<a href="링크할주소">텍스트 또는 이미지<\a>

br태그 : 다음줄로 넘어감 (break row의 줄임말) blockquote태그 : 인용문 strong, br태그 : 볼드체 em, i, cite : 이탤릭체(기울임체)

순서 목록 태그 ol, li태그 : 순서 O 목록 ul, li태그 : 순서 X 목록

표 제작

<table>
    <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
    </tr>
    <tr>
        <td>2행 1열</td>
        <td>2행 2열</td>
    </tr>
</table>

--> 단순한 표가 제작됨 

    <style>
        table, th, td {
          border:1px solid #ccc;
          border-collapse: collapse;
        }
        th, td { padding:10px 20px; }
      </style>

--> 헤드에 css를 적용하여 테두리 등을 적용

이미지 삽입

img태그 사용하여 삽입 가능

사용법

<img scr="이미지 파일 경로" alt = "대체 텍스트">

pdf등의 파일,오디오, 비디오 삽입

<object width="너비" height="높이" data="파일"><\object>
<audio src="오디오 파일 경로"><\audio>
<video src="비디오 파일 경로"><\video>
컨트롤 속성 추가시 플레이어 바에 컨트롤바 표시.
<audio src="오디오 파일 경로" controls><\audio>
<video src="비디오 파일 경로" controls><\video>

폼

폼 : 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것, 입력 양식 ex) 로그인 창, 검색 창

폼 태그

<form [속성="속성값"]>여러 폼 요소</form>

라벨 태그

<label>레이블명<input></label>

ex) 
    <form>
        <label>아이디<input type="text"></label>
    </form>

폼 요소와 label태그를 따로 작성하고 연결하는 방법도 가능
    <form>
        <label for="userid">아이디</label>
        <input type="text" id="userid">
    </form>

]]>