화면구현/HTML

HTML 확장자

psys 2020. 6. 17. 09:48
728x90

<a></a>

하이퍼링크 걸어주는 태그

1) 사용방법

<a href="https://yeon960.tistory.com">성연이의 티스토리</a>

>> 요소(element)

<a href="https://yeon960.tistory.com">성연이 티스토리</a>

 

>> 속성(attribute)

href

>> 속성의 값

"https://yeon960.tistory.com"

<html>
	<body>
    <a href="https://yeon960.tistory.com">성연이의 티스토리</a>
    <a href="https://lsy2384.tistory.com">선영이의 티스토리</a>
	</body>	
</html>

 

<h1~h6></h1~h6>

글씨 크기를 조절하는 것으로 원하는 태그 사용 가능

<body>
    <h1>난 성연</h1>
    <h2>난 성연</h2>
    <h3>난 성연</h3>
    <h4>난 성연</h4>
    <h5>난 성연</h5>
    <h6>난 성연</h6>
</body>

 

<p></p>

문단 나누기

<body>
	<p>
        난 첫번째야
    </p>
    <p>
        나는 두번째
    </p>
</body>

 

<br>

p태그 없이 문단을 나눌 때 사용하는 방법

<body>
	<a href="https://yeon960.tistory.com">성연이의 티스토리</a>
    <br>
    <a href="https://lsy2384.tistory.com">선영이의 티스토리</a>
</body>

 

<body></body>

br이나 p없이 원하는 문장을 원하는 형태로 출력 가능

<body>
	<pre>
        안녕? 나는 html을 배우는 성연이야

            너는 내 블로그에 왜 왔니?
    </pre>
</body>

ol(Ordered List)

순서있는 리스트로 자동으로 앞에 숫자가 붙음

<body>
    <ol>
        <li>일</li>
        <li>이</li>
        <li>삼</li>
        <li>사</li>
        <li>오</li>
    </ol>
</body>

ul(Unordered List)

순서있는 리스트로 숫자가 아닌 마크가 붙음

<body>
    <ul>
        <li>아파치</li>
        <li>엔진엑스</li>
        <li>톰캣</li>
    </ul>
</body>

Img(Image)

<body>
    <img src="./images/a.jpg" alt="">
    <img src="/jsstudy/images/a.jpg" alt="">
</body>

1) <img src="./images/a.jpg" alt="">

상대경로

2) <img src="/jsstudy/images/a.jpg" alt="">

절대경로

3) 경로 잘못

<img src="" alt="이미지 경로 잘못되었어">

 

4) 사진의 크기조절 가능

<img src="/jsstudy/images/a.jpg" width = 400 height= 500 alt="">

 

5) pdf문서 넣기

>> 버튼 누르면 이미지 보이기

<a href="/jsstudy/images/a.jpg"> a태그는 pdf문서도 올 수 있어~ </a> 

>> 버튼 누르면 이미지 다운로드

<a href="/jsstudy/images/a.jpg" download="옥진욱"> a태그는 다운로드도 할 수 있어~ </a> 

<hr>

수평선 긋기

&nbsp

띄어쓰기는 아무리해도 한 칸 밖에 반영이 안 됨 -> &nbsp를 사용해 띄어쓰기

<body>
            <li>아        쿠</li>
            <li>한&nbsp;번</li>
            <li>두&nbsp;&nbsp;번</li>
            <li>세&nbsp;&nbsp;&nbsp;번</li>
            <li>네&nbsp;&nbsp;&nbsp;&nbsp;번</li>
</body>

 

&lt; &gt;

HTML에서< >는 태그로 인식 되어지므로 '<>'를 출력하기 위해서는 ' &lt; &gt'을 사용하여 출력한다.

<li>아&lt; &gt;쿠</li>

'화면구현 > HTML' 카테고리의 다른 글

HTML 기본 컴포넌트  (0) 2020.06.18
HTML Scrip  (0) 2020.06.17
HTML div태그  (0) 2020.06.17
HTML 테이블태그  (0) 2020.06.17
HTML(Hyper Text Markup Language) 살짝 알아보기  (0) 2020.06.17