20.07.28 HTML :h 태그, p태그, br태그, img태그, box model,inline-block

• <h>

<h2>는 헤드라인 1~6까지 값으로 표시할 수 있음 숫자가 커질수록 글자는 작아짐

가장 큰 글자는 1이 된다.

headline은 전부 두꺼운 글자가 나온다.

 

html은 규격에 없는걸 표시하면 오류가나는게 아니라 무시해버림

그래서 h7은 일반 문자열로 나타나게된다.

---

• <p>

<p>우리는 오늘 HTML5를 사용하여 웹페이지를 만들고 있다

만드는 웹페이지는 다양한 웹브라우저에서 정상으로 보여지기를 

기대한다</p>

<p>태그로 묶고 홈페이지를 확대 했을 때

자연스럽게 문서가 넘어가지않고

다음줄로 넘어가는데 그걸 auto wrap

 

우리나라만세같은건 강제 word wrap

<p>태그를 안닫고도 사용할 수 있지만 닫아주라!!

닫아주는것이 좋다

 

BODY안에 있는 문자열은 태그로 감싸지 않으면 무조건 한줄로 나타난당

> p.57

---

• <br>

</br>은 패러그램 내에서 줄바꿈을 해주는 것

열리는 태그가 없고 닫히는 태그만있다

<br/> : 가장 좋은 코드는 오롷게 쓰는 것이 좋다 (셀프클로징) break point! 브레이크

</br> : 보편적으로 이게 많을 사용하고

<br>

---

• <a>

<p><a href="https://naver.com">네이버 바로가기</a></p>

저기에있는 주소로 화면을 바꾸는 request

a : anchor라고 부른다 앵커태그

href라는 속성에다가 주소값을 넣어주면 그 주소로 화면을 바꾸라는 이야기

<p><a href="sub/index6.html">Sub의 index6 열기</a></p>
<!-- 내프로젝트에 있는 파일을 열때 -->

---

• <img>

요런것들은 속성,변수,property

img태그도 닫는 태그가 없는데 셀프클로징도 필요가 없다

src는 소스라는 뜻

src=""<따옴표 안에서 컨트롤 스페이스바

alt태그를 같이 넣어주자 : 시각장애를 위한

> p.94

---

ul & li

> 목록 태그 p.60

---

p.106 링크 만들기

---

width=

heiht= 둘중하나만 해도 알아서 비율 잘 됌

둘이 같이 쓰면 좀 찌그러질 수 도 있음

---

영문자는 대체로 소문자!!

p.40

---

<p><a href="https://naver.com" target="_new">네이버 바로가기</a></p>

target="" 새로운 페이질 하나만들고 그 페이지의 이름을 new라고 붙이고 거기에 네이버 페이지를 보이란느 의미

_new는 상징적인 의미

 

>> layout_01/navi_1.html

---

• <tr>
  • 제목 들어가는 부분
  • 보통 한줄만 쓴다.

• <th>
  • th tag는 칼럼을 나누어주는 tag

---

lorem을 써놓으면 아무 단어들이 나열 된다.

---

block은 내용 길이 상관없이 왼쪽오른쪽 다 길이를 차지

인라인은 내용물의 길이만큼만 차지하는 친구 (한 라인을 차지)

>> 요런 애들은 box모델이라한다.

p.294

<p style="font-size: 1.2rem; color: blueviolet;">대한민국만세</p>

> 인라인 스타일

p {
	font-size: 50px;
	color: cornflowerblue;
	font-weight: 400;
	font-style: italic;

}

> 테마 스타일

---

display: inline-block ;

inline형태로 가로로 보이게되는

div를 이용하면 박스를 이용하여 한줄의 여러개가 들어 올 수 있음!

---

여기가 정적 static페이지

여기다가 동적인 dynamic을 넣어서 진행 할 것임

---

>> layout_01