반응형

 

 

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 중간에 빠진 숫자가 있으면 그 이후에는 검색되지 않음

<p>내용</p>

<br> : 문단에서 줄 바꿈

<blockquote cite="출처 URL">문단 단위 인용문</blockquote>

..그 외 책(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>
반응형
저작자표시 비영리 변경금지 (새창열림)

'Web > HTML+CSS+JS' 카테고리의 다른 글

[코딩 자율학습 HTML+CSS+자바스크립트] 4주차 학습  (0) 2025.01.30
[코딩 자율학습 HTML+CSS+자바스크립트] 3주차 학습  (1) 2025.01.20
[코딩 자율학습 HTML+CSS+자바스크립트] 2주차-3 학습  (0) 2025.01.14
[코딩 자율학습 HTML+CSS+자바스크립트] 2주차-2 학습  (1) 2025.01.14
[코딩 자율학습 HTML+CSS+자바스크립트] 2주차-1 학습  (1) 2025.01.13

티스토리툴바