[코딩 자율학습 HTML+CSS+자바스크립트] 1주차 학습

Web/HTML+CSS+JS

[코딩 자율학습 HTML+CSS+자바스크립트] 1주차 학습

Y freesia 2025. 1. 6. 11:55

1. Hello, HTML + CSS + 자바스크립트

개발 환경 : Visual Studio Code (VSCode) in Mac

파일을 생성하고 [!]를 입력하고 엔터를 누르면, 자동으로 기본 코드가 입력된다.

책에 나와있는대로 <body> </body> 사이에 아래 코드를 입력해 주었다.

    <!-- 웹 페이지에 표시할 내용을 적습니다. -->
     <p>나의 첫 번째 웹 페이지</p>

파일을 저장[Command⌘ + S] 한 후 실행하기
명령어 입력칸 [Ctrl⌃+Shift⇧+P]에 [Live Server]를 검색 후 Live Server: Open with Live Server 를 클릭

** Live Server/Ritwick Dey : 가상 서버를 이용해, 작성한 HTML 코드를 실시간으로 확인할 수 있는 확장 프로그램

2. HTML 문서 작성을 위한 기본 내용

HTML 기본 구성

<태그명 속성명="속성값">

Element : <Open tag> Content </Close tag>

Comment :

HTML 기본 구조

<!DOCTYPE html> 문서형 정의(DTD)

<head>
HTML 문서의 여러 정보, 메타데이터를 정의하는 영역 (meta, title, link, style, script...등)
</head>

<body>
웹 브라우저에 노출되는 내용을 작성하는 영역
</body>

3. HTML 필수 태그 다루기

<hn>제목</hn> : h1....6 중간에 빠진 숫자가 있으면 그 이후에는 검색되지 않음

<br> : 문단에서 줄 바꿈

..그 외 책(60쪽 참조)

4. 웹 스타일링을 위한 CSS 기초

CSS 문법

h1{color:red;}

h1: 선택자

{ } : 선언부

color : 속성

red : 값

내부 스타일 시트 사용하기

<head>
    <title>내부 스타일 시트(Internal Style Sheet)</title>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>내부 스타일 시트</h1>
</body>

외부 스타일 시트 사용하기

<head>
    <title>외부 스타일 시트(External Style Sheet)</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>외부 스타일 시트</h1>
</body>

인라인 스타일 사용하기

<body>
    <h1 style="color: red; font-size: 24px;">인라인 스타일</h1>
</body>

저작자표시 비영리 변경금지 (새창열림)