[HTML #3] 실제로 HTML 살펴보기

네이버에 CSS와 JavaScript를 지우고 살펴보자.

 

css와 javaScript를 지우면 html만 남는다.

 

아래의 사진과 같다.

 

느낌이 좀 온다.

html은 진짜 버튼, 글자, 그림만 넣는 것이구나!

 

- 솔직히 말해서 이 전 포스팅으로 다 배운 느낌이다. (사실 주인장은 html을 배웠다...ㅎ)

 

- 본격적으로 시작하기에 앞서서 뭘 배울지 파악해보자.

 

1. html 느낌파악하기

 

2. html 태그 맛보기

 

3. 옵션 및 설정값 체험하기

 

4. html 최적화하기

 

이 정도의 순서가 될 것이다!

"html 느낌 파악하기"는 끝이 났다.

---

2번을 하기 전에,

html을 맛보기 전에 좀 더 확실하게 알고가야할 내용이 있다.

 

(1) css 파일은 head에 넣자!

(2) 그리고 body에 입력할 수 있는 태그를 공부해야 한다. 도움되는 사이트를 가지고 왔다!!

https://velog.io/@choiiis/HTMLCSS-HTML-%ED%83%9C%EA%B7%B8%EC%99%80-%EC%86%8D%EC%84%B1-%EC%A0%95%EB%A6%AC

[HTML] HTML 태그와 속성 정리

 

여기가 좋은 것 같다!

솔직히 안외워도 된다. 보고 느낌만 파악하자!

 

그리고 다음에 사용할 때, 구글링을 하자!

 

---

대충 태그 속성에 대해서 공부를 했다. 그럼좀 더 상세하게 보자!

 

코드를 예시로 들고 시작한다.

 

<a href="https://www.naver.com">네이버</a>

- a 태그로 "네이버"라는 글자를 생성해줘. 글자를 클릭하게 되면, "https://www.naver.com"으로 이동해줘.

    (a 태그는 링크를 삽입하는 파랑색 글자를 만드는 것이다!)

 

※ 여기서 중요한게 <a>여기에 넣는 이유가 뭐냐면, a 태그에 옵션을 추가해주기 위해서이다.

 

<fieldset>
	<legend>검색</legend>
</fieldset>

 

태그가 두개 들어가버렸다.

갑자기 혼동이 올 수 있다.

 

- 이렇게 나오면 그냥 "fieldset안에 legend가 있구나!" 라고 생각하고 코딩해보거나, 구글링을 해보자.

- 결과화면은

-> fieldset은 네모박스, legend는 테두리에 끼워 넣는 것인가 보다!

 

여기까지!