23.06.02 / HTML / 제목, 본문, 리스트, a태그

web Client - 클릭한 페이지를 요청(request)

web Server - 요청한걸 응답(response)

 

protocol

 

HTTP * hyper text transfer protocol

컴퓨터들 간의 원활한 통신을 위해지키기로 한 규약

요청/응답방식으로동작

 

웹페이지 구조

HTML*뼈대   CSS *디자인  JS * 기능

 

HTML * hyper text markup language

웹페이지에서정보를담아서 표시하기위한 마크업 언어

 

hyper text 하이퍼 텍스트

다른문서로접근할 수 있는텍스트

 

markup 표시  ex) <p>

  --------------------------------------------------

ㅣ <p>          content(내용)      </p>     ㅣ

ㅣ시작태그                            끝태그   ㅣ

----------------------------------------------------

                     Element(요소)

 

 

-----------------------------------------------------------

제목태그

    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>

h1~h6 순으로 크기, 중요도 역순

-----------------------------------------------------------

본문태그

1. p태그

    <p> 내용 </p>

 

본문 내용을 단락으로 표현

2. span태그

    <span> 내용 </span>

 

가로로 이어서 배치

-----------------------------------------------------------

줄바꿈태그

    <p> 내용 <br> 
    줄바꿈 
    </p>

break  -  p태그, span태그 모두 사용 가능

-----------------------------------------------------------

강조태그

1. b태그

    <b> 시각적으로만 강조 </b>

 

시각적 의미의 강조

2. strong태그

    <strong> 실질적 강조(시각장애 도움) </strong>

 

실질적 의미의 강조

-----------------------------------------------------------

수평선태그

<hr>

-----------------------------------------------------------

리스트태그

<ol>

    <ol>
        <li>물 끓임</li>
        <li>스프 넣음</li>
        <li>면 넣음</li>
    </ol>

정돈되어 있는 리스트

<ul>

    <ul>
        <li>티셔츠</li>
        <li>모자</li>
        <li>양말</li>
    </ul>

정돈되어 있지 않는 리스트

 

리스트 사이에 <li>로 내용 작성

-----------------------------------------------------------

a태그

     <a href=""></a>

하이퍼 링크를 걸어주는 태그

 

*절대경로

    <a href="https://www.naver.com/">눌러</a>

 

* 새창으로 열기

    <a href="https://www.naver.com/" target="_blank">새창</a>

 

 

*상대경로

    <a href="ex04_리스트실습.html" target="_blank">ex04_리스트실습</a>

 

 

* ../  ->  상위 디렉토리로

<a href="../../../"></a>