언어는 과-학인가요?/전반적인 web development (html css JS )

HTML은 아주 쉽지만 (2)

이원자 탄소 2022. 1. 13. 19:47

728x90

기능이 많다 여기다가 css 까지 더해지면 할수있는건 아주많다 그래서 css는 다음장에 쓸거임

hyperlink?

위키같은곳 보면 링크 삽입된 글자 누르면 링크로 이동하는 그런거임

Inline links: pointing to another file in the same server, or files on another web server

(같은 서버 또는 다른 서버에있는 파일 불러오는거) 예를들면 나무위키에서 디씨 링크다는거임

Anchors: pointing to another part/section in the same file (같은 파일에 있는거 불러오기) 예를들면 나무위키에서 같은 나무위키 문서에있는거 링크해서 클릭하면 같은페이지 (스크롤 다운하면 있는거)로 가는거

<a> element

href: what to point to
target: where to open

ex) <a href="파일이름.html" target="_blank">표시되는 글자</a>

같은 파일 내에서 링크할때

1. 헤드에 아이디를 정해준다 <h2 id="intro">Introduction</h2>

2. #intro로 불러온다 <a href="csci2720.html#intro">Introduction</a>

IMAGE/ VIDEO/ AUDIO

1. 일단 이미지를 추가한다 (VS code 쓰면 그냥 이미지 드레그드랍하면 될듯)

2. <img>로 파일 불러오면 됨

3. <img src="cuhk.jpg" width="100" height="150"> 이런식. 이때 width 랑 height 직접 설정할수도 있음

4. <circle>, <line> 같은 graphic elements들도 있음

5. <audio>랑 <video>도 이미지랑 마찬가지로 쓰면됨

<video control width="500">
  <source src="2720ver1.mp4" type="mp4">
  <source src="2720ver2.webm" type="webm">
  <p>Your browser isn't supported!</p>
</video>

이런식

이런식으로 html 코드를 적어서 실행시키면

<!DOCTYPE html>
<html>
<head>
  <title>TITLE</title>
</head>
<body>
    <h2 id="intro">Introduction</h2>
    <a href="prac.html" target="_blank">표시되는 글자</a>
    <section>
        <h1>Section1</h1>
        <p>Section은 이런식으로</p>
    </section>
        
    <section>
        <h1>Section2</h1>
        <p>나눌수있다</p>
    </section>
    <a href="prac.html#intro">Introduction</a>

</body>
</html>

이렇게 실행된답니당

TITLE

Introduction

표시되는 글자

Section1

Section은 이런식으로

Section2

나눌수있다

Introduction

솔직히 html은 기능이 너무 많고 이걸 다 외워서 쓰는거보다 필요할때마다 찾아서 쓰는게 제일 좋음.

물론 지금까지 올린건 다 기본적인거고 진짜 기초적인 틀만 잡는거라 외우는게 좋지

https://www.w3schools.com/html/default.asp <여기가면 기능 다있음

728x90