2023.03.14

 ul태그와 ol태그를 혼용하여 사용가능 

  ol태그의 속성

        type 속성 : 앞의 숫자 조정

        start 속성 : 중간번호부터 시작 할 수 있도록 수정가능-

        reversed 속성 : 역순으로 표시 

정의 목록 나타내기 : dl, dt, dd 태그 : 들여쓰기 표현시 많이 사용.

 

dl태그 : 정의 목록을 감싸는 부모태그 

dt태그 : 정의 대상을 나타내는

dd태그 : 정의할 문장을 작성하는  

 

 

---

a태그의 형태

<a href="링크할 주소">텍스트 혹은 태그</a> 

링크 : 다른사이트 혹은 다른 문서로 바로 연결해주는 기능

            메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있다.

 

a태그랑 href는 항상 같이 씀..

 

특정 파일로 링크를 할수도 있다.

    <a href="./02_list.html">리스트페이지로 이동</a>

    <!-- 현재 페이지에서 남아있도록 -->

    <a href="#">현재 페이지</a>

    <!-- 한페이지 안에서 점프하기 -->

    <a href="#pairy">파이리로 이동</a>

        . : 현재주소(현재폴더)를 의미

        / : 주소(폴더)구분을 의미

 

#id값 -> id로 지정된 위치로 이동.

<a href="#pairy">파이리로 이동</a>

<dt id="pairy">파이리</dt>

 

img태그:  이미지 삽입하기, 지원파일:jpg,png,gif

 <img src="이미지경로및파일명">

 

img태그의 속성 사용하기</h2>

    <ul>

        <li>src속성 : 삽입하는 이미지파일의 이름(경로포함) 지정 </li>

        <li>title속성 : 이미지에 마우스를 올리면 나타나는 설명글

            <img src="./cherry_blossom.jpg" title="벚꽃">

        </li>

        <li>width, height 속성 <br>

            width : 이미지의 너비 지정<br>

            height : 이미지의 높이 지정<br>

 

width값만 사용하여 세로길이는 자동계산 되도록 가능

alt속성 : 이미지를 설명하는 대체 텍스트 <br>

            이미지를 화면에 표시할 수 없을때 대체 텍스트를 표시

            <img src="home.jpg" alt="홈으로 이동하기" >

 

a태그에 텍스트대신 이미지태그를 사용할 수도 있다.

    <!-- html태그에 style속성을 부여하면, 해당 태그를 꾸밀 수 있는 속성을 추가할 수 있다. -->

    <a href="https://www.btc.ac.kr/" style="background-color: darkblue; height: 35px; display: inline-block;">

        <img src="./logo.png" width="300px">

 

 

-절대경로

절대경로 : 인터넷상에 하나밖에 없는 유일무이한 고유한 경로를 의미

src : 인터넷주소 보통 이용함. (http:~~~~)

/ : 내 사이트 주소값이용할때. .

ex : /02_list.html -> 현재사이트의 기본주소값/02_list.html 을 의미

앞에 주소는 언제든지 바뀔 수 있으니 /02~~ 이런식으로 표현함.(절대경로)

 

상대경로 : 현재 폴더(주소)의 위치를 기준으로 대상 파일이나 폴더(주소)의 위치를 지정

"/로 시작하면 절대경로. /로 시작하지 않으면 상대경로"

./ : 현재위치

../ : 현재 기준, 상위 디렉토리 위치

./폴더명/ : 현재 기준, 하위 폴더명 디렉토리 위치

 

 

 

   <h2>외부 파일 재생(실행)</h2>

    <embed src="ch03.pdf" width="400" height="400">

 

    <h2>오디오 파일 재생하기</h2>

    <!-- 오디오태그에서 주로 사용하는 속성등

        autoplay : 해당 페이지에 들어오면 음원을 자동재생

        controls : 해당음원을 컨트롤 할 수 있는 컨트롤바가 출력된다.

        loop : 해당음원이 재생이 끝나면 다시 반복재생한다. -->

    <audio src="Rinne - Precious you.mp3" controls loop></audio>

 

   비디오 파일 재생하기

    <video width="400" autoplay controls>

        <source src="movie.mp4">

    </video>

 

 

 

---

"" 사이에 ctr + space :  자동완성

 

윈도우키+e => 탐색기창