“ 웹을 이루고 있는 구성요소 3가지를 공부해봅시다 ! ”

💡 유용한 편집기 vscode를 사용해 볼까요? 유용한 확장팩들이 많이 있어요 !

💡 웹 클라이언트는 chrome을 권장합니다.

⚠️ 제출하는 모든 html 파일들은 HTML validator 를 통과해야 합니다.

참고

HTML 수업

HTML 수업 - 생활코딩

수업의 목적 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리

opentutorials.org

CSS Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

JavaScript Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

과제

ex00

제출 디렉토리 : ex00/

제출 파일 : MightyDev.html

아래 화면과 동일한 결과가 나오도록 html 파일을 만들어서 제출하세요.

결과)

⚠️ 화면에 주소창은 신경쓰지 마세요!

💡 필요한 문법

html

➡️ 웹 페이지의 이름 설정

<html>
<head>
	<title>설정하고 싶은 이름</title>
</head>
<body>
	...
</body>
</html>

➡️ <h#> 태그

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그
이 태그들은 섹션, 문단의 제목을 나타내며 숫자가 작을수록 글자의 크기가 커집니다.

<html>
<body>
	<h2>html은 처음이지?</h2>
	<h3>1번</h3>
	<p>
		저도 웹 개발이 처음입니다..
	</p>
	

	<h3>2번</h3>
	<p>
		멋쟁이사자처럼
	</p>

	<h5>아기 사자가 되려면...</h5>
</body>
</html>

결과

html은 처음이지?

1번

저도 웹 개발이 처음입니다..

2번

멋쟁이사자처럼

아기 사자가 되려면...

➡️ <label>

label은 폼의 양식에 이름 붙이는 태그
주요 속성: for (label의 for의 값과 양식의 id의 값이 같으면 연결)
label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크 or 체크 해제

➡️ <input>

사용자로부터 입력받을 수 있는 입력 필드(input filed)를 정의할 때 사용
사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 <form> 요소 내부에서 사용
type 속성값을 달리함으로써 여러 가지 모양으로 나타낼 수 있음
<label> 을 사용하면 <input> 의 라벨(label)을 정의할 수 있

<label for="first_name">이름</label>
<input type="text" id="first_name" name="first_name"><br>

풀이과정

1. 웹사이트 이름 '나는 최강이다'로 설정

<head>
	<title>나는 최강이다</title>
</head>

2. <h1>태그를 사용하여 '최강의 개발자 등록'

<h1>최강의 개발자 등록</h1>

3. label과 input의 다양한 type을 활용

1) type="text" : 이름/성/아이디 입력창

💥'placeholder = 빈칸일 때 나타날 글자'를 설정하여 아무것도 입력하지 않았을 때 글자가 뜨도록 설정함

<label for="first_name">이름</label>
<input type="text" id="first_name" name="first_name"  placeholder="이름"><br>
<label for="last_name">성</label>
<input type="text" id="last_name" name="last_name" placeholder="성"><br>
<label for="userId">아이디</label>
<input type="text" id="userId" name="userId" placeholder="아이디"><br>

2) type="email" : 이메일 입력창

💥'placeholder = 빈칸일 때 나타날 글자'를 설정하여 아무것도 입력하지 않았을 때 글자가 뜨도록 설정함

<label for="email">이메일</label>
<input type="email" id="email" name="email" placeholder="이메일"><br>

3) type="password" : 비밀번호 입력창

💥'placeholder = 빈칸일 때 나타날 글자'를 설정하여 아무것도 입력하지 않았을 때 글자가 뜨도록 설정함

<label for="userPassowrd">비밀번호</label>
<input type="password" id="userPassowrd" name="userPassowrd" placeholder="비밀번호"><br>

4) type="data" : 생일을 입력할 수 있는 날짜 폼

<label for="date">생일</label>
<input type="date" id="date" max="2023-12-31" min="1900-01-01" value="mm/dd/yyyy"><br>

5) type="range" : 구글링 능력을 range로 입력받기

💥'tickmarks'를 1~10사이로 설정하여 range에 눈금 표시

<label for="google">당신의 구글링 능력은?</label>
<input type="range" id="google" name="google" min="1" max="10" list="tickmarks"><br>
<datalist id="tickmarks">
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
</datalist>

6) type="color" : 좋아하는 색깔 선택할 수 있는 입력창

<label for="myBestColor">가장 좋아하는 색깔은?</label>
<input type='color' id='myBestColor' name="myBestColor" value='#000000'><br>

7) type="submit" : '등록' 버튼 만들기

<input type="submit" value="등록">

4. 결과

<!DOCTYPE html>
<html>
<head>
	<title>나는 최강이다</title>
</head>
<body>
	<h1>최강의 개발자 등록</h1>
	<form action="#" method="post">
		<label for="first_name">이름</label>
		<input type="text" id="first_name" name="first_name"  placeholder="이름"><br>
        <label for="last_name">성</label>
		<input type="text" id="last_name" name="last_name" placeholder="성"><br>
		<label for="email">이메일</label>
		<input type="email" id="email" name="email" placeholder="이메일"><br>
        <label for="userId">아이디</label>
		<input type="text" id="userId" name="userId" placeholder="아이디"><br>
        <label for="userPassowrd">비밀번호</label>
		<input type="password" id="userPassowrd" name="userPassowrd" placeholder="비밀번호"><br>
        <label for="date">생일</label>
        <input type="date" id="date" max="2023-12-31" min="1900-01-01" value="mm/dd/yyyy"><br>
        <label for="google">당신의 구글링 능력은?</label>
        <input type="range" id="google" name="google" min="1" max="10" list="tickmarks"><br>
        <datalist id="tickmarks">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
            <option value="5"></option>
            <option value="6"></option>
            <option value="7"></option>
            <option value="8"></option>
            <option value="9"></option>
            <option value="10"></option>
        </datalist>
        <label for="myBestColor">가장 좋아하는 색깔은?</label>
        <input type='color' id='myBestColor' name="myBestColor" value='#000000'><br>
		<input type="submit" value="등록">
	</form>
</body>
</html>

결과

나는 최강이다

최강의 개발자 등록

ex01

제출 디렉토리 : ex01/

제출 파일 : squareSquareBeam.html, leftHand_is.css

화면과 동일한 결과가 나오도록 css 파일을 완성시키고, html 파일과 함께 제출하세요

leftHand_is.css

html {
  background-color: tomato;
  ...
	...
	...
}

body {
	background-color: wheat;
  ...
	...
	...
}

.square {
  border: 3px solid white;
  ...
	...
	...
}

.square-mid {
  border: 3px dashed white;
  ...
	...
	...
}

결과)

⚠️ 화면에 주소창은 신경쓰지 마세요!

⚠️ 모든 사각형은 가로, 세로 가운데 정렬 되어 있어야 합니다.

⚠️ 반응형 페이지로 만들어주세요!

풀이과정

1. html 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./leftHand_is.css">
    <style>
        .square {
            margin-left: auto; margin-right: auto;
            margin-top: 35px; margin-bottom: 35px;
        }
        .square-mid {
            margin-left: auto; margin-right: auto;
        }
      </style>
<body>
    <div class="parent">
        <div class="square"></div>
        <div class="square-mid"></div>
        <div class="square"></div>
        <div class="square-mid"></div>
        <div class="square"></div>
    </div>
</body>
</html>

2. css 파일

  html {
    background-color: tomato;

  }

  body {
    background-color: wheat;
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%); 
    border: 3px solid black;
  }

  .square {
    border: 3px solid white;
    background-color: green;
    width: 100px;
    height: 50px;
  }

  .square-mid {
    border: 3px dashed white;
    background-color: green;
    width: 300px;
    height: 50px;
  }

ex02

제출 디렉토리 : ex02/

제출 파일 : Calculator.html, Calculator.css, Calculator.js

덧셈, 뺄셈, 곱셈, 나눗셈 기능을 구현하여 계산기를 만들어 보시오.

예시)

⚠️ 디자인은 예시와 반드시 일치하지 않아도 괜찮습니다.

풀이과정

1. html 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="Calculator.css">
</head>
<body>
    <center>
        <h1>Calculator</h1>
    </center>
    <div class="calculator">
        <label for="first_number">First number:</label>
        <input type="text" id="num1" placeholder="Enter number 1">
        
        <label for="first_number">Second number:</label>
        <input type="text" id="num2" placeholder="Enter number 2">
        
        <br>
        <label for="Operator">Operator:</label>
        <button id="add" onclick="calculate('+')">+</button>
        <button id="subtract" onclick="calculate('-')">-</button>
        <button id="multiply" onclick="calculate('*')">*</button>
        <button id="divide" onclick="calculate('/')">/</button>
        <br>
    </div>

    <h1>Result:
    <input type="text" id="result"  
            style="border: none; background: transparent; font-size: 30px; font-weight: bold;"
            disabled>
    </h1>
    <script src="Calculator.js"></script>
</body>
</html>

2. css 파일

.calculator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 300px;
    margin: 0 auto;
}

.calculator input {
    margin: 10px;
    padding: 10px;
    width: 100%;
}

.calculator button {
    margin: 10px;
    padding: 10px;
    width: 50px;
    font-size: 20px;
    border-radius: 5px;
    border: none;
    background-color: #ccc;
    color: #333;
    cursor: pointer;
}

.calculator button:hover {
    background-color: #333;
    color: #fff;
}

.calculator button:active {
    transform: translateY(1px);
}

3. javascript 파일

function calculate(operator) {
    var num1 = parseFloat(document.getElementById("num1").value);
    var num2 = parseFloat(document.getElementById("num2").value);
    var result;

    switch(operator) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            result = num1 / num2;
            break;
    }

    document.getElementById("result").value = result;
}

4. 결과

ex03

제출 디렉토리 : ex03/

제출 파일 : Alarm.html, Alarm.css, Alarm.js

정해진 시간이 되면 알람을 띄우는 페이지를 만들어보세요.

예시)

⚠️ 디자인은 예시와 반드시 일치하지 않아도 괜찮습니다.

⚠️ 참고로 알림이 계속 뜨면 안됩니다~~~

💡 필요한 javascript 문법

➡️ setTimeout(callback, delayTime)

: 콜백 함수와 지체할 시간을 인자로 받아, 인자로 받은 시간만큼 기다렸다가 콜백 함수를 실행하는 JS 내장 함수

/* sample 17 */
// 1번 함수
setTimeout(()=>{
    console.log('todo: First Work!');
}, 3000);

// 2번 함수
setTimeout(()=>{
    console.log('todo: Second Work!');
}, 2000);

// 출력결과
/*
todo: Second Work!
todo: First Work!
*/

➡️ 참고

https://steadily-hyunjin.tistory.com/49

[JavaScript] 기초문법-2 (alert, prompt, confirm / 형변환)

[JavaScript] 기초문법-2 (alert, prompt, confirm / 형변환) ✅ 사용자 인터페이스 기능 (alert / prompt / comfirm) ▶ alert : 알려줌 ▶ prompt : 입력 받음 ▶ confirm : 확인 받음 1. alert('message'); - 확인 버튼을 누를 때

steadily-hyunjin.tistory.com

https://steadily-hyunjin.tistory.com/67

[Node.js로 서버만들기] 2. 자바스크립트 기본 문법 (콜백 함수/Promise/async/await)

✅ 콜백 함수 콜백이란? 나중에 실행되는 코드 예시 1) A()라는 함수에 인자로 어떤 함수를 넣어줌. (자바스크립트에서 함수는 '일급 객체'이므로 인자로 함수를 넣어주는 것이 가능함) 2) A 함수의

steadily-hyunjin.tistory.com

풀이과정

1. html 파일

<!DOCTYPE html>
<html>
<head>
	<title>알람</title>
	<link rel="stylesheet" type="text/css" href="Alarm.css">
</head>
<body>
	<center>
	<h1>Alarm Clock</h1>
	<label for="alarmTime">Set the alarm time:</label>
	<br>
	<input type="time" id="alarmTime" name="alarmTime">
	<button id="setAlarmBtn">Set<br>Alarm</button>

	<script type="text/javascript" src="Alarm.js"></script>
</center>
</body>
</html>

2. css 파일

h1 {
    font-size: 50px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 10px;
    text-align: center;
  }
  
  button {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

3. javascript 파일

: setTimeout(callback, delayTime) 함수를 활용하여

alarmTime - now의 값이 0이 되면,

즉, 현재시간이 알람시간으로 설정한 시간과 같다면

"알람이 울립니다"를 alert으로 출력함.

const setAlarmBtn = document.getElementById("setAlarmBtn");

setAlarmBtn.addEventListener("click", () => {
    const alarmInput = document.getElementById("alarmTime").value;
    const [hours, minutes] = alarmInput.split(":");
    const alarmTime = new Date();
    alarmTime.setHours(hours);
    alarmTime.setMinutes(minutes);
    alarmTime.setSeconds(0);
    alarmTime.setMilliseconds(0);
  const now = new Date();
  alert(alarmInput + "으로 알람을 설정했습니다.");

  if (isNaN(alarmTime)) {
    alert("잘못된 시간 형식입니다. 다시 입력해주세요.");
    return;
  }

  if (alarmTime <= now) {
    alert("알람 시간은 현재 시간 이후로 설정해야 합니다.");
    return;
  }

  const timeUntilAlarm = alarmTime - now;
  setTimeout(() => {
    alert("알람이 울립니다!");
  }, timeUntilAlarm);
});

4. 결과

Bonus

제출 디렉토리 : bonus/

제출 파일 : sudoku.html, sudoku.css, sudoku.js

혹시 게임 좋아하시나요? 스도쿠 게임을 만들어 봅시다!

스도쿠 테이블의 크기는 9 * 9로 고정합니다.
테이블의 각 쉘은 1~9의 숫자로 채워져야 합니다.
스도쿠를 올바르게 완성했는지 채점하는 버튼이 있어야합니다.

⚠️ 디자인은 여러분이 자유롭게 구현하시면 됩니다! 단, 너무 못생기지만 않으면 좋겠어요

풀이과정

1. html 파일

<!DOCTYPE html>
<html>
<head>
	<title>SDOKU</title>
    <link rel="stylesheet" href="sdoku.css">
</head>
<body>
	<h1>SDOKU Table</h1>
	<table>
		<thead>
			<tr>
				<th>Random Number</th>
			</tr>
		</thead>
		<tbody id="table-body">
		</tbody>
	</table>
	<button onclick="generateTable()">Generate Table</button>
	<script src="sdoku.js"></script>
</body>
</html>

2. css 파일

table {
  border-collapse: collapse;
  margin: 20px;
}
td {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

3. javascript 파일

let puzzle = new Array(9);

function create_puzzle(){
    for (var i = 0; i < puzzle.length; i++) {
        puzzle[i] = new Array(9).fill(0);
    }
}

function create_sudoku(){
    create_puzzle();
    
    let rand_number;
    let ok;
    for(let i = 0;i<9;i++){
        for(let j=0;j<9;j++){
            ok = true;
            rand_number = Math.floor(Math.random() * 9 + 1);

            // 가로 체크
            for (k = 0; k < j; k++) {
                if (puzzle[i][k] == rand_number) {
                    --j;
                    ok=false;
                    break;
                }
            }

            // 세로 체크
            for (k=0; k<i;k++){
                if(puzzle[k][j] == rand_number){
                    --j;
                    ok=false;
                    break;
                }
            }

            // 3x3 체크
            let sero = Math.floor(i/3)*3;
            let garo = Math.floor(j/3)*3;

            for(x = sero; x<sero+3; x++){
                for(y = garo; y<garo+3; y++){
                    if((x==i) && (y==j)) continue;
                    if(puzzle[x][y] == rand_number){
                        --j;
                        ok=false;
                        break;
                    }
                    if(ok==false) break;
                }
            }

            if(ok) puzzle[i][j] = rand_number;
        }
    }
}


function generateTable() {
  create_sudoku();

  var tableBody = document.getElementById("table-body");
  tableBody.innerHTML = "";
  for (var i = 0; i < 9; i++) {
      var row = document.createElement("tr");
      for (var j = 0; j < 9; j++) {
          var cell = document.createElement("td");
          cell.textContent = puzzle[i][j];
          row.appendChild(cell);
      }
      tableBody.appendChild(row);
  }
}

저작자표시 비영리

'💻 Extracurricular > 멋쟁이사자처럼11기' 카테고리의 다른 글

[소주제 세미나 1차] 블로킹-논블로킹 / 동기 - 비동기 (0)	2023.04.05
[3주차] Java 과제 (1) (0)	2023.04.05
[1주차] Shell 과제 (0)	2023.03.23
[0주차] WSL2 설치 / 리눅스(우분투) 사용 (0)	2023.03.11
[0주차] 리눅스(우분투) 설치 (0)	2023.03.10

STEADILY_HYUNJIN

[2주차] HTML && CSS && JavaScript

참고

추천 강의

과제

html은 처음이지?

1번

2번

아기 사자가 되려면...

최강의 개발자 등록

'💻 Extracurricular > 멋쟁이사자처럼11기' 카테고리의 다른 글

티스토리툴바

[2주차] HTML && CSS && JavaScript

참고

추천 강의

과제

html은 처음이지?

1번

2번

아기 사자가 되려면...

최강의 개발자 등록

'💻 Extracurricular > 멋쟁이사자처럼11기' 카테고리의 다른 글

'💻 Extracurricular/멋쟁이사자처럼11기' Related Articles

티스토리툴바