[2] 03/10 자바스크립트 수업

Noh Sinyoung·2023년 3월 10일
0

< br >

줄바꿈 태그

< li >

리스트 태그 (< ul > 안에 있어야함)

< ol >

ol은 순서가 있는 리스트

1234 순으로 순서가 붙고, abcd ㄱㄴㄷㄹ 순서로 바꿀 수도 있음
reversed를 이용해 역순처리도 가능하고 start를 이용해 시작시점 선택도 가능

< dl >

dl은 제목과 내용이 있는 리스트
dt로 제목을 쓰고 dd로 내용을 쓴다

< a >

링크를 거는 태그

< a href="링크내용" > 표기되는 글자(img태그 사용가능) < /a >
"링크내용" 바로뒤에 target="_blank" 입력시 페이지가 새 탭에서 로딩됨(새로고침이 아니라)

href뒤에 mailto:이메일주소가 올경우 주소로 보내는 메일창을 열음
href뒤에 #아이디가 올경우 상응하는 아이디 항목으로 이동함

< img >

이미지를 넣는 태그

< img src="이미지 링크" alt="이미지 오류표기 텍스트" width="a px"(이미지 크기조정) >

*이미지 크기는 가로세로중 하나만 입력해도 자동으로 비율 맞춰줌 (height태그로 높이 조정 가능)

< div >

칸을 분할하는 태그 (division)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03/10 자바스크립트 수업</title>
</head>
<body>
    <h1>졸리다.</h1>
    <hr>
    <p>화장실 가고싶어요 쌤 <br><br></p>
    <hr>
    <h3>리스트 태그</h3>
    <ul>
        <li>li는 리스트라는 뜻</li>
        <li>li는 ul 안에 들어있어야 함</li>
        <li>많이 쓰는 태그 중에 하나</li>
    </ul>
    <ol>
        <li>ol은 순서가 있는 리스트</li>
        <li>o는 order라는 뜻</li>
        <li>1234 순으로 순서가 붙고, abcd ㄱㄴㄷㄹ 순서로 바꿀 수도 있음</li>
    </ol>

    <hr>
    <h2>미디어 관련된 태그</h2>
    <a href="https://www.youtube.com/">링크 거는 태그가 a태그</a>  <!-- a: anchor 닻. --> 
    <br>
    <a href="#">실제 링크는 아니고 클릭만 가능한 a태그</a>
    <a href="https://www.youtube.com/watch?v=5rJih7rWXMA" target="_blank"> <img src="data:image/jpeg;base64,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" alt="이미지 날아감." width="100" >
    </a>

    <hr>
    <h1>div태그</h1>
    <h3>division. 분할. </h3>

    <div>
        <h3>조선호텔</h3>
        <img src="https://cloudfront-ap-northeast-1.images.arcpublishing.com/chosunbiz/ZMBA5SHDNKD7TBTXKCT5ETPJD4.jpg" alt="이미지 날아감." width="200">
        <h3>신라호텔</h3>
        <img src="http://www.hotelrestaurant.co.kr/data/photos/20210207/art_16135231193644_17add5.jpg" alt="이미지 날아감." width="200">
        <h3>롯데호텔</h3>
        <img src="https://www.hotelscombined.co.kr/rimg/himg/d9/ce/26/revato-2628-13074010-411670.jpg?width=1366&height=768&crop=true" alt="이미지 날아감." width="200">
    </div>

    

</body>
</html>

0개의 댓글