[LG헬로비전 DX DATA SCHOOL 4기] HTML/CSS/JS(1) (241231)

mini_bang·2025년 1월 2일

LG헬로비전 DX DATA SCHOOL 4기

목록 보기
2/36
post-thumbnail

HTML과 CSS 예제

  1. 테이블 요소 및 캡션

    • <caption>: 테이블 제목 표시.
    • <thead>, <tbody>, <tfoot>: 테이블의 구조를 논리적으로 나눔.
    • rowspan과 colspan: 행과 열의 병합.

  2. 이미지 및 하이퍼링크

    • <img>: 이미지를 삽입. alt 속성으로 대체 텍스트 제공.
    • <a>: 하이퍼링크 삽입. target="_blank"로 새 창에서 열기.

  3. 폼 요소

    • <form>: 사용자 입력을 서버로 전송.
    • <input>: 텍스트, 이메일, 체크박스, 라디오 버튼 등 다양한 입력 제공.
    • placeholder: 입력 필드에 안내 텍스트 제공.

  4. CSS 스타일링

    • 타입 선택자: HTML 태그(h1, p, ul)에 스타일 적용.
    • 클래스 선택자: .highlight, .intro 같은 클래스로 특정 요소 스타일링.
    • 아이디 선택자: #header, #footer로 고유 요소 스타일링.
// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table과 Caption 태그 예시</title>
    <style>
        table{
            width: 50;
            border-collapse: collapse;
            margin : 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding : 10px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
        caption {
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>Table과 Caption 태그 예시</h1>

    <table>
        <caption> 2024년 IT 교육 과정</caption>
        <tr>
            <th>과정명</th>
            <th>기간</th>
            <th>수강 인원</th>
        </tr>
        <tr>
            <td>HTML/CSS/JS</td>
            <td>4주</td>
            <td>30명</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>6주</td>
            <td>25명</td>
        </tr>
        <tr>
            <td>Python</td>
            <td>8주</td>
            <td>20명</td>
        </tr>
    </table>
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>thead, tbody, tfoot 태그 예시</title>
    <caption> 2024년 1분기 판매 보고서</caption>
    <style>
        table{
            width: 60%;
            border-collapse: collapse;
            margin : 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding : 10px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
        tfoot {
            background-color: #f9f9f9;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Table과 Caption 태그 예시</h1>

    <table>
        <caption> 2024년 1분기 판매 보고서</caption>
        <thead>
            <tr>
                <th>제품명</th>
                <th>판매량</th>
                <th>가격 (단위 : 원)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>스마트폰</td>
                <td>500</td>
                <td>800,000</td>
            </tr>
            <tr>
                <td>태블릿</td>
                <td>200</td>
                <td>500,000</td>
            </tr>
            <tr>
                <td>노트북</td>
                <td>150</td>
                <td>1,200,000</td>
            </tr>
        </tbody>
    <tfoot>
        <tr>
            <td>합계</td>
            <td>850</td>
            <td>-</td>
        </tr>
    </tfoot>
    </table>
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Row span 예시</title>
    <style>
        table{
            width: 60%;
            border-collapse: collapse;
            margin : 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding : 10px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h1>Row span 예시</h1>

    <table>
        <caption> 부서별 직원 목록</caption>
        <thead>
            <tr>
                <th>부서</th>
                <th>직원 이름</th>
                <th>직책</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">기획팀</td>
                <td>김철수</td>
                <td>팀장</td>
            </tr>
            <tr>
                <td>이영희</td>
                <td>사원</td>
            </tr>
            <tr>
                <td>박민호</td>
                <td>인턴</td>
            </tr>
            <tr>
                <td rowspan="2">개발팀</td>
                <td>최지훈</td>
                <td>팀장</td>
            </tr>
            <tr>
                <td>유진아</td>
                <td>사원</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Row span 예시</title>
    <style>
        table{
            width: 60%;
            border-collapse: collapse;
            margin : 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding : 10px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h1>span 예시</h1>

    <table>
        <caption> 2024년 1분기 매출 보고서</caption>
        <thead>
            <tr>
                <th>지역</th>
                <th colspan="3">매출 정보</th>
            </tr>
            <tr>
                <th></th>
                <th>제품 A</th>
                <th>제품 B</th>
                <th>제품 C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>서울</td>
                <td>1,000</td>
                <td>800</td>
                <td>600</td>
            </tr>
            <tr>
                <td>부산</td>
                <td>700</td>
                <td>500</td>
                <td>400</td>
            </tr>
            <tr>
                <td>대구</td>
                <td>500</td>
                <td>400</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>합계</td>
                <td colspan="3">6,200</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 예시</title>
</head>
<body>
    <h1>이미지 표시 예시</h1>
    <img src="./canada.jpg" alt="여행사진" width="300" height="200">    
    <img alt="여행사진">
    
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크 예시</title>
</head>
<body>
    <h1>하이퍼링크 예시</h1>
    <p><a href="https://www.google.com" target="_blank">구글로 이동 </a></p>
    <!--href의 target? 타겟이 없으면 현재탭에서 실행, 있으면 다른 탭에서 실행-->
    <!--http, https는 보안의 차이-->
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 예시</title>
</head>
<body>
    <h1>사용자 정보 입력</h1>
    <form action="/submit" method="post">
        <label for-"name"> 이름 : </label>
        <input type="text" id="name" name="name" required><br><br>

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

        <input type="submit" value="제출">
    </form>
    
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>체크박스와 라디오 버튼 예시</title>
</head>
<body>
    <h1>체크박스</h1>
    <form action="/submit" method="post">
        <label>취미를 선택하세요.</label><br>
        <input type="checkbox" id="hobby1" name="hobby" value="독서">
        <label for="hobby1"> 독서 </label><br>

        <input type="checkbox" id="hobby2" name="hobby" value="여행">
        <label for="hobby2"> 여행 </label><br><br>

        <label>성별을 선택하세요 : </label><br>
        <input type="radio" id="male" name="gender" value="남성"
        <label for="male"> 남성 </label><br>
        <input type="radio" id="female" name="gender" value="여성"
        <label for="male"> 여성 </label><br><br>

        <input type="submit" value="제출">
    </form>
    
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Placeholder 예제제</title>
</head>
<body>
    <h1>사용자 정보 입력</h1>

    <form action="/submit" method="post">
        <!--사용자 이름 입력-->
        <label for="username">사용자 이름 : </label>
        <input type="text" id="username" name="username" placeholder="이름을 입력하세요." required><br><br>

        <!--이메일 입력-->
        <label for="email"> 이메일 : </label>
        <input type="email" id="email" name="email" placeholder="example@domain.com" required><br><br>

        <!--제출 버튼-->
        <input type="submit" value="제출">
    </form>
    
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 세상</title>

    <style>
        /* CSS */
        p {color: red;}
    </style>
</head>
<body>
    <h1>CSS 세상</h1>
    <p>CSS 기본 사용방법입니다.</p>
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 타입 선택자 예시</title>

    <style>
        h1{
            color: blue;
            font-size: 30px;
        }
        p {
            color: green;
            font-family: Arial, sans-serif;
            line-height: 1.5;
        }
        ul{
            list-style-position: square;
            margin-left: 20px;
        }
        a{
            text-decoration: none;
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>타입 선택자 예시</h1>
    <p>이 문장은 green 색으로 표시됩니다.</p>
    <ul>
        <li>아이템1</li>
        <li>아이템2</li>
        <li>아이템3</li>
    </ul>
    <a href="http://www.example/com">여기를 클릭해주세요.</a>
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 타입 선택자 예시</title>

    <style>
       .highlight{
            color: orange;
            font-weight: bold;
       }
       .intro{
            font-size: 20px;
            font-family: 'Arial', sans-serif;
       }
       .footer{
            background-color: #f1f1f1;
            padding : 10px;
            text-align: center;
       }
    </style>
</head>
<body>
    <h1>클래스 선택자 예시</h1>
    <p class="highlight">이 문장은 오렌지색이고 굵게 표시됩니다.</p>
    <p class="intro">이 문장은 Arial 폰트로 20px 크기로 표시됩니다.</p>

    <div class="footer">
        <p> 이것은 푸터입니다.</p>
    </div>
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 타입 선택지 예시</title>
    <style>
        #main-title{
            color:blue;
            font-size: 40px;
            text-align: center;
        }
        #header{
            background-color: lightblue;
            padding: 20px;
        }
        #footer{
            background-color: darkgray;
            color: white;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1 id="main-title"> 아이디 선택자 예시</h1>
    </div>

    <p>이 예시는 아이디 선택자를 활용하여 스타일을 적용한 예시입니다.</p>

    <div id="footer">
        <p>이것은 푸터입니다.</p>
    </div>
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 예제</title>
</head>
<body>
    <h1>자바스크립트 인사하기</h1>
    <button onclick="greet()"> 인사하기</button>

    <script>
        function greet(){
            alert("안녕하세요, 자바스크립트!");
        }
    </script>
    
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 이름 입력</title>
</head>
<body>
    <h1>이름 입력하기</h1>
    <p>이름을 입력하고, "확인" 버튼을 눌러보세요!</p>

    <input id="nameInput" placeholder="여기에 이름 입력">
    <button onclick="showName()">확인</button>
    <p id="result"></p>
    
    <script>
        // 버튼을 누르면 실행될 함수.
        function showName(){
            // 이름 입력받기
            var name = document.getElementById('nameInput').value;

            // 이름이 입력되지 않았을 때
            if (name===""){
                document.getElementById('result').innerText = "이름을 입력해주세요!";
            }
            // 이름이 입력되었을 때
            else {
                document.getElementById('result').innerText="안녕하세요. "+name+"님!";
            }
        }
    </script>
</body>
</html>

JavaScript 예제

  1. 버튼 동작

    • onclick 속성으로 버튼 클릭 시 함수 실행.
    • alert() 함수로 간단한 메시지 창 표시.

  2. 폼과 사용자 상호작용

    • 사용자 입력(document.getElementById)을 읽고 DOM 업데이트.
    • 입력 유효성 검사 및 메시지 표시.

  3. JavaScript 변수 스코프

    • var: 함수 스코프. 중복 선언 가능.
    • let: 블록 스코프. 중복 선언 불가.
// 실습 코드
function testVar(){
    if(true){
        var a=5;
    }
    console.log(a);
}

testVar()
var x=10;
var x=20;  // 중복 선언 가능
console.log(x);
// 실습 코드
function testLet(){
    if(true){
        let b=10;
        console.log(b);   // 10: 블록 내부에서만 유효
    }

    //console.log(b); // ReferenceError : b is not defined
}

testLet()
let y=15;
//let y=25; //SynataxError : Identifier 'y'has already been declared
console.log(y);  //25
// 실습 코드
function testConst() {
    if(true){
        const c=30;
        console.log(c);//30
    }
    //console.log(c); //ReferenceError : C is nor defined
}

testConst();
const z=40;
//z=50; // TypeError : Assingment to constant variable

const obj={'name':'Alice'};
obj.name = "Bob";  // 객체 내부 값은 변경 가능
console.log(obj); // {name : "Bob"}
// 실습 코드
//1. 숫자(number)
let age=25;
console.log("나이: ",age); // 출력 나이 : 25

//2. 문자열(string)
let name="철수"
console.log("이름 : ",name);
console.log(age+name);

//3. 불리언(Boolean)
let isStudent = true;
console.log("학생인가요? ", isStudent);

//4. 배열(Array)
let favoriteFoods = ['피자', '초밥', '치킨']; //Array는 순서를 매겨줌
console.log("좋아하는 음식 : ", favoriteFoods[0]);

//5. 객체(object)
let person = {
    name : "철수", //이름
    age : 25, //나이
    isStudent : true //학생 여부
};
console.log("사람 정보 ", person);

//6. null
let car = null;
console.log("자동차: ", car);

//7. undefinded
let job;
console.log("직업 : ", job);
// 실습 코드
console.log("나머지", 10%3);

let x=10;
console.log("초기값", x);

x += 5;
console.log("5를 더한 값 : ", x);

x *= 2;
console.log("2를 곱한 값 : ", x);

//논리 연산자
let isAdult=true;
let hasTicket=false;

console.log("입장 가능?", isAdult&&hasTicket);
console.log("티켓 없어도 입장 가능? ", isAdult || hasTicket);
// 실습 코드
//삼항 연산자(ternary operator)
let score = 85;
let result score >= 60 ? "합격" : "불합격";
console.log("시험 결과 : ", result) //출력 : 시험결과 : 합격
// 실습 코드
// 1. 학생 점수를 입력 받아 성적(A, B, C, F)을 출력하는 프로그램 작성
function scoreGrade(score) {
    if(score >= 90){
        return "A";
    } else if(score >= 80 && score < 90){
        return "B";
    } else if(score >= 70 && score < 80){
        return "C";
    } else if(score >= 0 && score < 50){
        return "F";
    } else{
        return "0 ~ 100 사이의 점수를 입력하세요.";
    }
}
let score=85;
console.log(`점수 ${score}점`);
console.log(scoreGrade(score));

// 2. 나이와 키를 입력 받아 놀이기구 탑승 가능 여부를 판단하는 프로그램 작성
// 조건1) 나이는 10세 이상이어야 함.
// 조건2) 키는 120cm 이상이어야 함
function rideOX(age, height) {
    if(age >= 10 && height >= 120){
        return "탑승 가능합니다.";
    } else if(age < 10 || height < 120){
        return "탑승 불가능합니다.";
    } else{
        return "양수만 입력 가능합니다.";
    }
}
let age=26;
let height=177;
console.log(`나이 ${age}, 키:${height}cm`);
console.log(rideOX(age, height));

// 3. 3의 배수 확인하는 함수를 작성해보세요.
// 조건 1) null 값에 대비해 보세요.
function isthree(num) {
    if(num === null || num === undefined || isNaN(num)){
        return "유효한 숫자를 입력해주세요.";
    }

    if(num%3 === 0 && num != 0){
        return `${num}은 3의 배수입니다.`;
    } else{
        return `${num}은 3의 배수가 아닙니다.`;
    }
}
let num = 0;
console.log(isthree(num));
console.log(isthree(null));
console.log(isthree(undefined));
console.log(isthree(66));
console.log(isthree(52));

정리

태그설명
<html>문서의 루트 요소로, HTML 문서 전체를 감쌉니다.
<head>문서 메타데이터를 포함하며, CSS, JavaScript 링크 등을 포함할 수 있습니다.
<body>브라우저에 표시되는 콘텐츠를 포함합니다.
<h1> ~ <h6>제목(Heading) 태그, 숫자가 작을수록 더 중요한 제목을 나타냅니다.
<p>문단을 나타냅니다.
<table>테이블을 생성합니다.
<caption>테이블에 제목을 붙입니다.
<th>테이블 헤더를 나타냅니다.
<td>테이블 데이터를 나타냅니다.
<thead>테이블의 헤더 섹션을 정의합니다.
<tbody>테이블 본문을 정의합니다.
<tfoot>테이블의 푸터 섹션을 정의합니다.
<img>이미지를 삽입합니다.
<a>하이퍼링크를 생성합니다.
<form>사용자 입력을 받을 수 있는 폼을 생성합니다.
<input>사용자 입력 필드를 생성합니다.
<button>클릭 가능한 버튼을 생성합니다.
<script>JavaScript 코드를 삽입합니다.
<style>CSS 스타일 정의를 삽입합니다.
<div>컨테이너 역할을 하는 블록 요소입니다.
<label>입력 필드에 대한 설명을 제공합니다.
profile
mini_bang
이전 포스트

[LG헬로비전 DX DATA SCHOOL 4기] 오리엔테이션, HTML 기본 태그 (241230)

다음 포스트

[LG헬로비전 DX DATA SCHOOL 4기] HTML/CSS/JS(2) (250102)

0개의 댓글