웹 개발 입문: HTML, CSS, 자바스크립트 배우기

HTML (HyperText Markup Language)

HTML이란?

HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 텍스트, 이미지, 링크 등 다양한 요소를 배치하고 구성하는 데 사용됩니다. HTML 요소는 <tag>로 둘러싸여 있으며, 각 태그는 특정 역할을 합니다.

HTML 기본 문법

HTML 문서는 다음과 같은 기본 구조를 가집니다:

<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지 제목</title>
</head>
<body>
    <h1>여기는 헤딩 1입니다</h1>
    <p>여기는 문단입니다.</p>
    <a href="https://www.example.com">여기를 클릭하세요</a>
</body>
</html>

HTML 배우기

텍스트 편집기 선택: Visual Studio Code, Sublime Text, Atom 등의 편집기를 사용하여 HTML 파일을 작성합니다.
첫 번째 HTML 문서 작성: 위의 기본 구조를 사용하여 간단한 HTML 파일을 만듭니다. 예를 들어 index.html이라는 파일을 생성하고, 해당 파일에 위의 HTML 코드를 작성합니다.
브라우저에서 열기: 작성한 HTML 파일을 저장하고, 웹 브라우저로 열어 결과를 확인합니다. 브라우저는 HTML 파일을 해석하여 우리가 작성한 구조와 내용을 화면에 표시합니다.

CSS (Cascading Style Sheets)

CSS란?

CSS는 HTML 요소의 스타일을 정의하는 데 사용됩니다. 색상, 글꼴, 레이아웃 등 시각적인 스타일을 지정하여 웹 페이지를 더욱 매력적이고 사용하기 쉽게 만듭니다. CSS는 HTML과 분리되어 있으며, 이를 통해 동일한 HTML 구조에 다양한 스타일을 적용할 수 있습니다.

CSS 기본 문법

CSS 규칙은 선택자와 선언 블록으로 구성됩니다:

h1 {
    color: blue;
    font-size: 24px;
}
p {
    color: gray;
    line-height: 1.5;
}

CSS 배우기

CSS 파일 작성: HTML 파일과 같은 디렉토리에 style.css 파일을 생성합니다. 이 파일에 CSS 스타일 규칙을 작성합니다.
HTML에 CSS 연결: HTML 문서의 <head> 섹션에 다음과 같이 CSS 파일을 링크합니다:
<link rel="stylesheet" type="text/css" href="style.css">
스타일 적용 및 테스트: CSS 파일에 원하는 스타일 규칙을 작성하고, 브라우저에서 HTML 파일을 다시 열어 스타일이 제대로 적용되었는지 확인합니다.

자바스크립트 (JavaScript)

자바스크립트란?

자바스크립트는 웹 페이지에 동적 기능을 추가하는 프로그래밍 언어입니다. 사용자의 상호 작용을 처리하고, 웹 페이지를 동적으로 업데이트하며, 복잡한 계산을 수행할 수 있습니다. 자바스크립트는 HTML 및 CSS와 함께 작동하여 풍부한 사용자 경험을 제공합니다.

자바스크립트 기본 문법

간단한 자바스크립트 예제는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <title>자바스크립트 예제</title>
</head>
<body>
    <h1>JavaScript 예제</h1>
    <button onclick="alert('Hello, World!')">클릭하세요</button>

    <script>
        console.log('이 메시지는 브라우저 콘솔에 출력됩니다.');
    </script>
    </body>
    </html>

위 예제에서 <button> 요소는 클릭 시 alert 함수를 호출하여 메시지를 표시합니다. <script> 태그 내의 자바스크립트 코드는 브라우저 콘솔에 메시지를 출력합니다.

자바스크립트 배우기

1. 자바스크립트 코드 작성: HTML 파일의 <script> 태그 안에 자바스크립트 코드를 작성하거나 별도의 '.js '파일을 생성합니다.

2. HTML에 자바스크립트연결: 별도의 파일을 사용할 경우, <script src="script.js"></script>를 HTML 파일의 <body> 또는 <head> 섹션에 추가합니다.

3. 디버깅 및 테스트: 브라우저의 개발자 도구를 사용하 콘솔에서 로그를 확인하고 디버깅합니다. 이를 통해 자바스크립트 코드가 제대로 동작하는지 확인할 수 있습니다.

HTML, CSS, 자바스크립트 통합하기

세 가지 언어를 결합하여 간단한 웹 페이지를 만들어 보겠습니다. 다음 예제는 HTML, CSS, 자바스크립트를 함께 사용하는 방법을 보여줍니다:

<!DOCTYPE html>
<html>
<head>
    <title>통합 예제</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>웹 개발 통합 예제</h1>
    <p id="message">이 문장은 자바스크립트로 변경될 것입니다.</p>
    <button onclick="changeText()">텍스트 변경</button>

    <script>
        function changeText() {
            document.getElementById('message').innerText = '자바스크립트로 변경되었습니다!';
        }
    </script>
</body>
</html>

style.css 파일에는 다음과 같은 스타일이 포함될 수 있습니다:

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
h1 {
    color: darkblue;
}
p {
    color: darkgreen;
    font-size: 18px;
}
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

이 예제에서는 HTML 구조, CSS 스타일, 자바스크립트 기능을 모두 포함하고 있습니다. 버튼을 클릭하면 자바스크립트가 <p> 요소의 텍스트를 변경합니다.

결론

웹 개발을 배우는 것은 처음에는 어려울 수 있지만, HTML, CSS, 자바스크립트를 차례로 배우고 연습하다 보면 점차 자신감을 얻을 수 있습니다. 각 언어의 기본 개념을 이해하고, 실습을 통해 익히며, 더 복잡한 프로젝트에 도전해보세요.

추가 리소스

MDN Web Docs: HTML, CSS, 자바스크립트에 대한 포괄적인 문서를 제공합니다.
W3Schools: 다양한 웹 기술에 대한 튜토리얼과 예제를 제공합니다.
Codecademy: 대화형 코딩 강좌를 통해 웹 개발을 배우기에 좋은 플랫폼입니다.

웹 개발의 세계에 오신 것을 환영합니다. 꾸준한 학습과 연습을 통해 멋진 웹 페이지와 애플리케이션을 만들어 나가길 바랍니다. Happy coding!

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

워드프레스하고싶은 재필

웹 개발 입문: HTML, CSS, 자바스크립트 배우기