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>
'학습 기록 > HTML, CSS' 카테고리의 다른 글
CSS TIP 모음 (0) | 2023.11.21 |
---|---|
23.06.05 / CSS (0) | 2023.06.05 |
23.06.03 / HTML / 이미지, 테이블, 입력양식 (0) | 2023.06.03 |