HTML CSS

HTML, CSS, JavaScript에 대해 알아보자.

jiyoon12 2025. 5. 27. 17:36

HTML이란?

HTML, 즉 HyperText Markup Language는 웹페이지를 작성하기 위한 표준 마크업 언어입니다. "HyperText"는 페이지 간에 링크를 생성할 수 있음을 의미하고, "Markup Language"는 텍스트에 태그를 적용하여 그것이 어떤 역할을 하는지 정의할 수 있음을 의미합니다.

 

CSS란?

Cascading Style Sheets Language

종속형 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로, HTML과 XHTML에 주로 쓰이며, W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명은 style.css이다.

 

종속형 - HTML 과 함께 쓰이는 언어이다.

 

스타일 지정하는 3가지 방법

 

인라인 스타일: HTML 요소 내에 직접 스타일을 적용합니다. style 속성을 사용해 CSS 코드를 HTML 태그 안에 작성합니다. 인라인 스타일은 그 범위가 해당 태그에 한정되기 때문에 일반적으로는 권장되지 않습니다.

<h1 style="color:blue;">이것은 파란색 헤딩입니다.</h1>

 

 

내부 스타일 시트: <style> 태그를 사용하여 HTML 문서의 <head> 섹션에 스타일을 작성합니다. 이 방법은 스타일을 문서 전체에 적용할 수 있지만, 다른 HTML 문서에는 적용되지 않습니다.

<head>
	<style>
	body {background-color: powderblue;}
	h1   {color: blue;}
	p    {color: red;}
	</style>
</head>

 

 

외부 스타일 시트: .css 확장자로 저장된 외부 CSS 파일을 HTML 문서에 링크합니다. 이 방법은 여러 HTML 문서에서 동일한 스타일을 공유할 수 있어 재사용성이 높고, 관리도 용이합니다.

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

 

<정리>

HTML 은 이건 타이틀이야 이건 이미지야 말하는 거고 CSS 는 타이틀에 색상은 검은색이야 그리고 이미지에 크기는 가로 50px 세로 100px로 보여 줘야 해 라는걸 의미한다.

 

Javascript 란?

Javascript는 사람의 뇌라고 생각하면 된다. 뼈대 와 근육이 만들어졌다면 어떻게 움직여야 하는지 알져 주는 언어가 자바스크립트 이다.

어떤 웹 사이트는 똑똑해야 할 때가 있다. 즉 동적이어야 할 때가 있다.

슬라이더나 애니메이션처럼 사용자에 선택에 따라서 동적으로 움직여야 할 때 필요하다 .(사용자와 상호 작용)

하지만 항상 웹 사이트에서 자바 스크립트가 필요 한 것은 아니다.

 

  • 실습하기 ch02/index01.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 실습</title>
    
    <!-- 외부 스타일 시트 -->
    <link rel="stylesheet" type="text/CSS" href="CSS/style.CSS">

    <!-- 내부 스타일 시트 -->
    <style>
        h1 {
            color: red;
            text-align: center;
        }
        
        p {
          font-size: 30px;     
        }

    </style>

</head>
<body>
    <!-- CSS 인라인 스타일로 적용 -->
    <h1 style="margin-top: 200px;" >Thenco Online에 오신 것을 환영합니다!</h1>
    <img src="img/sample.png" alt="샘플이미지" id="sample-img">
    <p>버튼을 눌러 메시지를 변경해 보세요!</p>
    <button onclick="changeMessage()">메세지 변경</button>
    <!-- 자바 스크립트 외부 파일 링크 -->
     <script src="js/script.js"></script>
</body>
</html>

 

ch02/css/styles.css

button {
    width: 300px;
    height: 300px;
}

 

ch02/js/script.js

// 자바 스크립트 만들어 보기
function changeMessage(){
    var img = document.getElementById("sample-img");
    if(img){
        img.src = "img/sample2.png";
    }else{
        console.log("log 출력하기");
        console.error("이미지 태그를 찾을 수 없습니다.")
    }
}

 

  • 브라우저에서 F12 개발자 도구 확인해 보기