상세 컨텐츠

본문 제목

프로그래머 도전기 54일차

프로그래머가 될거야!

by Choyee 2023. 10. 24. 23:30

본문

오늘은

화요일입니다!  월요일이 멀게 느껴졌던 하루였습니다

학원 수업의 진도가 프론트엔드 분야로 넘어오게 되면서 갑자기 빨라졌기 때문일지도 모르겠습니다

 

 

 

학원 수업

<<HTML>>

http://www.naver.com
www - world wide web
hyper text transfer protocol

사람 - 세포
web - 웹페이지(웹사이트=홈페이지)

* 웹페이지 만드는 언어 
클라이언트 측 언어(Client Side Language) - HTML, CSS, JavaScript
서버 측 언어(Server Side Language) - Java(Jsp), Python, C#(.net), PHP

html 창시자 - 팀버너스리(웹의 아버지), 영국
하이퍼텍스트 - cern(유럽 입자 물리 연구소), 데이터 관리 필요성에 의해 만들어짐
www(w3c)창립, http 최초 설계
-> w3Schools.com

웹 브라우저 - 크롬, 익스플로러, 사파리
최초의 웹 브라우저 - 모자이크(마크안드레센, 멀티미디어) -> 네스케이프 -> 파이어폭스(리눅스)

html(hypertext markup language)
- 태그(tag) 명령어

웹 페이지(Page)
<head> 제목(머리말)
    <title> 처음 만드는 웹페이지 </title>
</head> 

<body> 본문
    <h1> 환영합니다 홈페이지 방문을 환영합니다 </h1>
    <img src="파일이름.확장자" >
</body> 


we site 제작
web application
IDE(소스코드편집기) - VScode(Visual Studio Code)

html4 > html5

* tag의 특징
1. 대부분 시작태그와 종료태그의 쌍으로 이루어짐 
   => <html> </html>, <h1> </h1>
2. 단독으로 쓰이는 태그도 있음
   => <hr>, <br>
3. 속성을 갖는 태그
   => <img src="" alt="">

* 캡션 - 사진, 표에 대한 설명
<figure>
    <img src="" alt=""> 
    <figcaption></figcaption>
</figure>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>이미지 크기</title>
</head>
<body>
    <!-- 고정크기, 절대크기 - 350px -->
    <figure>
        <img src="C:\htmlworks\ch01\image\img_girl.jpg" alt="자켓을 입은 소녀" width="300" height="350">
        <figcaption>자켓을 입은 소녀</figcaption>
    </figure>
    <hr>
    <!-- 브라우저 크기 대비 상대적 크기 50% -->
    <!-- 브라우저에 맞게 반응한다 -->
    <img src="C:\htmlworks\ch01\image\img_girl.jpg" alt="자켓을 입은 소녀" width="50%">
</body>
</html>



* 구조 관련 태그
<html>, <head>, <body>

* 텍스트 관련 태그
<p>, <b>, <i>, <br>, <h1>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 기본 태그</title>
</head>
<body>
    <h1>제목 태그(h는 headline을 뜻함)</h1>
    <h2>제목 태그(h는 headline을 뜻함)</h2>
    <h3>제목 태그(h는 headline을 뜻함)</h3>
    <h4>제목 태그(h는 headline을 뜻함)</h4>
    <h5>제목 태그(h는 headline을 뜻함)</h5>
    <h6>제목 태그(h는 headline을 뜻함)</h6>
    <hr>
    <p>p 태그는 paragraph의 줄임말로 '단락' 또는 '문단'을 뜻한다
        <br>br 태그는 한 줄을 바꿀 때 사용한다
        <br><br>hr 태그는 수평선을 긋는 기능을 한다
    </p>
    <hr>
    <p>가격: 13,000원<small>(부가세별도)</small></p>
    <p><s>54,000원</s> 20,000원</p>
    <!-- 한 칸 띄어쓰기는 스페이스바로 가능하나 2칸 이상은 불가 -->
    <p>오늘도 &nbsp;&nbsp; 좋은 하루 &nbsp;&nbsp; 되세요!</p>
    <p>최근엔 <i>디지털 세상</i>을 살아가기 위하 <u>기본 상식</u>으로 <b>코딩 교육</b>이 시행되고 있다</p>
    <!-- <pre>태그는 화면에 보이는 그대로 출력함 -->
    <pre>
        물의 화학식은 H<sub>2</sub>O 이다
        E = mc<sup>2</sup>
    </pre>


</body>
</html>


* 목록 관련 태그
<ul>   -> unordered list (불릿으로 출력)
    <li>봄</li>
    <li>여름</li>
</ul>

<ol>   -> ordered list(1,2, a,b)
    <li>java</li>
    <li>python</li>
</ol>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>목록 관련 태그</title>
</head>
<body>
    <h2>간식 리스트</h2>
    <!-- unordered list (불릿으로 출력) -->
    <!-- disc, square, circle -->
    <ul type="circle">
        <li>김밥</li>
        <li>떡볶이</li>
        <li>치킨</li>
        <li>피자</li>
    </ul>
    <hr>
    <h2>주문 리스트</h2>
    <!-- ordered list(1,2, a,b) -->
    <ol type="a">
        <li>김밥</li>
        <li>떡볶이</li>
        <li>치킨</li>
        <li>피자</li>
    </ol>
    <hr>
    <h2>1박 2일 가족여행 코스</h2>
    <!-- 중첩목록 = ul -> li -> ol -> li -->
    <ul>
        <li>1일차
            <ol>
                <li>해녀박물관</li>
                <li>낚시체험</li>
            </ol>
        </li>
        <li>2일차
            <ol type="i">
                <li>용눈이오름</li>
                <li>만장굴</li>
                <li>카약체험</li>
            </ol>
        </li>
    </ul>
</body>
</html>


* 링크 관련 태그
<a> 앵커태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>하이퍼링크 예제</title>
</head>
<body>
    <!-- 네이버 사이트로 연결: 하이퍼링크 -->
    <!-- target="_blank" = 새탭 속성 -->
    <p>
        <a href="http://www.naver.com" target="_blank">네이버</a>
    </p>
    <p>
    <!-- 레드향 페이지로 이동 -->
    <!-- 상대경로 (./ = 같은 위치, ../ = 상위 경로)-->
        <a href="./tangering.html">레드향</a>
    </p>
</body>
</html>






<<Java>>
자바 윈도우 프로그래밍
- 일반 방식
- 상속 방식

JComboBox 클래스 - 목록 메뉴 
계산기 - 정수, 실수

getText(); - 글자 가져오기
getSelectedItem(); - 목록선택

 

package calculator;

import java.awt.BorderLayout;
import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class Calculator extends JFrame implements ActionListener{
	// 필드
	String[] operator = {"+", "-", "X", "÷"};
	JComboBox<String> comboBox;
	JLabel label;
	JButton button;

	// 생성자
	public Calculator() {
		// 윈도우
		this.setTitle("사칙연산 프로그램");
		this.setSize(300, 120);
		this.setLocation(200, 100);

		// 패널 2개 생성 - BorderLayout
		JPanel pane1 = new JPanel();
		JPanel pane2 = new JPanel();

		this.add(pane1, BorderLayout.NORTH);
		this.add(pane2, BorderLayout.CENTER);

		// 컴포넌트 - FlowLayout
		pane1.setLayout(new FlowLayout());
		JTextField text1 = new JTextField(5);
		// 콤보박스
		comboBox = new JComboBox<>(operator);

		JTextField text2 = new JTextField(5);

		// 레이블
		label = new JLabel("=");
		JTextField text3 = new JTextField(5);

		// 버튼객체
		pane2.setLayout(new FlowLayout());
		JButton calcBtn = new JButton("계산");
		JButton resetBtn = new JButton("취소");

		pane1.add(text1);
		pane1.add(comboBox);
		pane1.add(text2);
		pane1.add(label);
		pane1.add(text3);

		pane2.add(calcBtn);
		pane2.add(resetBtn);

		// 이벤트
		ActionListener listener1 = new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {
				
				String op = (String)comboBox.getSelectedItem();	
				
				int num1 = Integer.parseInt(text1.getText());
				int num2 = Integer.parseInt(text2.getText());
				
				if(op.equals("+")) {
					int sum = num1 + num2;
					text3.setText(String.valueOf(sum));
				}else if(op.equals("-")) {
					int sum = num1 - num2;
					text3.setText(String.valueOf(sum));
				}else if(op.equals("X")) {
					int sum = num1 * num2;
					text3.setText(String.valueOf(sum));
				}else if(op.equals("÷")) {
					double sum = (double)(num1 / num2);
					text3.setText(String.valueOf(sum));
				}
				
				// switch문
//				switch(op) {
//				case "+" : 
//					int result = num1 + num2;
//					text3.setText(String.valueOf(result)); break;
//				case "-" : 
//					result = num1 - num2;
//					text3.setText(String.valueOf(result)); break;
//				case "X" : 
//					result = num1 * num2;
//					text3.setText(String.valueOf(result)); break;
//				case "÷" : 
//					double result2 = (double)(num1 / num2);
//					text3.setText(String.valueOf(result2)); break;
//				}
			}
		};
		calcBtn.addActionListener(listener1);

		ActionListener listener2 = new ActionListener() {
			// 취소 버튼 눌렀을 대 입력 초기화 구현
			@Override
			public void actionPerformed(ActionEvent e) {
				text1.setText("");
				text2.setText("");
				text3.setText("");
			}
		};
		resetBtn.addActionListener(listener2);

		// 디스플레이
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setVisible(true);
	}

	@Override
	public void actionPerformed(ActionEvent e) {
	}
}

 

 

 

할일 목록 만들기

HTML의 코드와 CSS코드를 다 짠것 같아서

JavaScript를 이용하여 기능 구현을 시작하였습니다

거의 기초만 배운 상태에서 만들어가는 중이라

배우면서 구현해 나가고 있기 때문에

하나하나 차근차근 해가도록 하겠습니다

const InputElem = document.querySelector('.input');
const ListElem = document.querySelector('.list');

let todo = [];
let id = 0;

const setTodo = (newTodo) => {
    todo = newTodo;
}

const getAllTodo = () => {
    return todo;
}

const addTodo = (text) => {
    const newId = id++;
    const newTodo = getAllTodo().concat({id: newId, isCompleted: false, content: text});
    setTodo(newTodo);
    fillTodo();
}

const fillTodo = () => {
    ListElem.innerHTML = '';
    const allTodo = getAllTodo();
    
    allTodo.forEach(todo => {
        const itemElem = document.createElement('li');
        itemElem.classList.add('item');
        
        const todoElem = document.createElement('div');
        todoElem.classList.add('todo');
        todoElem.innerText = todo.content;
        
        itemElem.appendChild(todoElem);
        
        ListElem.appendChild(itemElem);

const init = () => {
    InputElem.addEventListener('keypress', (e) => {
        if(e.key ==='Enter') {
            addTodo(e.target.value);
            InputElem.value = '';
        }
    })
}

할일 목록에 할 일을 추가하는 기능을 구현하였습니다

 

* Document.querySelector() 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다

일치하는 요소가 없으면 null을 반환합니다

 

* Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다

tagName을 인식할 수 없으면 HTMLUnknownElement 를 대신 반환합니다

 

* Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다

만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다

 

* addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다

출처 = https://developer.mozilla.org/ko/

 

 

 

 

 

 

 

2023. 10. 24 (화)

저작자표시 비영리 변경금지

'프로그래머가 될거야!' 카테고리의 다른 글

프로그래머 도전기 56일차  (1) 2023.10.26
프로그래머 도전기 55일차  (2) 2023.10.26
프로그래머 도전기 53일차  (4) 2023.10.23
프로그래머 도전기 52일차  (0) 2023.10.22
프로그래머 도전기 51일차  (0) 2023.10.21

관련글 더보기

티스토리툴바