Enjoy Programming

HTML5 - 에 대하여 본문

HTML

HTML5 - 에 대하여

LEETAEEON 2021. 4. 6. 14:28

필자의 모든 공부에 대한 블로그는 그냥 내가 편하게 이해하기 위해

쉽게 쉽게 ..나한테만? 암튼 그렇게 서술한다.

 

Hyper text markup language 

엄밀히 말해 프로그래밍 언어는 아니고 just text이다.

우리가 텍스트 형태로 작성한 html파일을 브라우저에 업로드 하면 브라우저는  이를 읽고

그저 화면에 나타내는 것이다.

어떤 식으로 작성해도 그냥 나타낸다. 에러를 뿜거나 하지 않는다.

HTML은 tag라는 element(요소)로 구성되어 있다.

내가 보이고자 하는 컨텐츠를 <tag> content </tag>의 방식으로  감싸서 표시 할 수 있다.

 

태그에는 여러 태그가 있는데 외우지 말자. 그냥 그때 그때 mdn사이트나 구글링 해서 뭐가 필요한지

찾아보고 쓰면 된다.

tag는 열고 닫고가 필수다  <tag> content </tag> 이렇게~

각 태그들은 하는 역할이 있는데 이 또한 찾아보고 쓰면 된다

예를 들어 <p>나는 <strong>매우</strong> 공부를 열심히 한다</p> 

이렇게 작성하면  p태그 문단에 "나는 매우 공부를 열심히 한다" 라고 매우가 스트롱태그에 의해 강조된다.

여튼 태그는 이러하다~

 

아! 닫음 태그가 없는 self-closing tag도 있다

예를 들면 <img /> 태그가 있는데 이미지를 가져와 화면에 뿌려주는 역할을 한다.

태그안에 따로 컨텐츠가 없고 이미지 태그의 src라는 attribute(속성)을 이용해 화면에 이미지 그 자체만 뿌려주기에

닫는 태그가 없다. 참고하자 요런 태그가 몇개 있다.

 

여기서! attribute란!

html에서 tag들은 attribute를 가질 수 있다. 다른말로 요소들은 속성을 가질 수 있다.

속성은 사용자가 원하는 기준에 맞도록 요소를 설정하가너 다양한 방식으로 요소의 동작을 조절하기 위한 value를 말한다

 

표현 방식은

예를 들어 anchor태그는 href라는 attributes를 가진다

<a href="http://google.com">google</a>

이런식으로 구글에 링크가 연결 되도록 할 수 있다.

또한 태그는 한가지 속성만 가지지 않고 여러가지 속성을 가질 수 도 있다.

<a href="http://google.com" target="_blank">google</a>

target이라는 속성을 하나 더 붙여서 클릭시 새로운 브라우저를 이용해 이동하게 된다.

이런 식으로 여러 속성을 사용할 수 있다.

developer.mozilla.org/ko/docs/Web/HTML/Attributes

 

HTML 특성 참고서 - HTML: Hypertext Markup Language | MDN

HTML 특성 참고서 HTML의 요소들은 특성을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다. 특성 이름

developer.mozilla.org

mdn 사이트이다 각 특성들을 확인 해보자. 자주 이용하게 될 것 같다.

한가지 더 속성은 각 태그마다 적용이 안되는 속성도 있다. 속성이 사용은 가능하나 브라우저는 이를 무시?

암튼 반응하지 않는다. 잘못 적용했다고 문제가 되진 않는다. 대신 적재 적소에 쓰는게 좋긴 하겠지?

 

일단 html 기본 포스트는 여기까지

'HTML' 카테고리의 다른 글

List 표현을 위한 태그  (0) 2021.04.09
Hyperlink tag  (0) 2021.04.09
TEXT Tag  (0) 2021.04.09
기본 태그  (0) 2021.04.09
HTML5 의 기본 문법및 구조를 살펴보자 + semantic tag  (0) 2021.04.07