[210705 TIL] HTML
HTML
요소(element)
- <태그이름>으로 시작하여 </태그이름>으로 끝나고 태그 사이에 내용이 있는 구조를 요소라고 한다
- 끝태그가 필요없는 태그는 태그 그 자체로 요소가 된다.
사진 출처 - http://tcpschool.com/html/html_intro_elementStructure
HTML tags
HTML 기본 태그
<!DOCTYPE>
- HTML 파일의 제일 첫 줄에 위치해야 하는 선언문
- 태그처럼 생겼지만 태그는 아님
- HTML 파일의 버전을 브라우저에게 알려주는 역할을 함
<!DOCTYPE html>
- 위 선언문은 이 HTML 파일이 HTML5 버전을 사용한다는 의미이다.
- 가장 최신이자 많이 쓰이는 버전은 HTML5이다.
<HEAD>
- 사이트의 제목, 설명, 부가 정보, 기술적 내용(ex. 이 사이트는 주로 모바일용인지)이 들어가는 부분.
<meta charset="utf-8">
- 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 함.
<meta name="viewport" content="width=device-width">
- 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미이다.
- 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타난다. (모바일이나 태블릿 PC 버전을 만들 때 필요하다.)
그 외 태그들
<span>
- 주로 텍스트를 넣는 태그이다.
- 이 태그안에 텍스트를 넣으면, 줄바꿈이 되지 않고 한 줄로 나오게 된다.
- 이렇게 한 줄로 나오는 요소를 inline-element라고 부른다.
<span>안녕하세요. 최개발입니다.</span>
<span>저는 백엔드 개발자입니다.</span>
안녕하세요. 최개발입니다.저는 백엔드 개발자입니다.
<p>
- p 태그도 역시 텍스트를 넣는 태그지만
<span> 태그와 달리 줄바꿈이 일어난다.
<p>안녕하세요. 최개발입니다.</p>
<p>저는 백엔드 개발자입니다.</p>
안녕하세요. 최개발입니다.
저는 백엔드 개발자입니다.
<!DOCTYPE> <!DOCTYPE html><HEAD><meta charset="utf-8">- 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 함.
<meta name="viewport" content="width=device-width">- 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미이다.
- 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타난다. (모바일이나 태블릿 PC 버전을 만들 때 필요하다.)
<span><span>안녕하세요. 최개발입니다.</span>
<span>저는 백엔드 개발자입니다.</span>안녕하세요. 최개발입니다.저는 백엔드 개발자입니다.
<p><span> 태그와 달리 줄바꿈이 일어난다.<p>안녕하세요. 최개발입니다.</p>
<p>저는 백엔드 개발자입니다.</p>안녕하세요. 최개발입니다.
저는 백엔드 개발자입니다.
줄이 바뀐 것이 보이시나요?
HTML Attributes
사진 출처 - http://tcpschool.com/html/html_intro_elementStructure
- HTML 요소는 태그이름, 속성명, 속성값, 시작태그, 종료 태그로 구성되어 있다.
- 속성(Attribute)에도 다양한 종류가 있다.
- 어떤 태그인지에 따라 적용할 수 있는 속성이 달라진다.
- href 같은 속성은 다른 페이지로 이동하게 하는 속성이므로
<div>같은 태그에는 쓸 수 없다.
id 속성
- id 속성은 각 태그에 이름을 주는 속성이다.
- 이름이지만, 다른 속성과 구분이 가능하도록 중복되서는 안된다!
ip 주소나, 주민등록번호와 비슷하다.
<div id="myself">- 위 처럼 id 속성에 "myself" 을 주었으면 다른 id 속성에 다시 사용할 수 없다.
- id 속성은 중복되는 태그가 존재할 때, 태그를 구분해 css나 javascript 코드를 적용하고 싶을 때 유용하다.
- 같은
<p>태그라도 id 속성을 다르게 주면 구별하서 사용할 수 있다.
<p id="myself">Let me introduce myself!</p>
<p id="myname">I'm hyerim choi</p>class 속성
- class 속성은 id 속성과 달리 중복이 가능하다.
<div class="content-wrap">Let me introduce myself!</div>
<p class="content-wrap">I'm hyerim choi</p>여러 속성 부여 가능
- 하나의 태그에 여러 속성도 부여 가능하다.
- 여러 속성을 추가할 시 한 칸 띄워쓰기를 하면 된다.
- 속성의 순서는 상관이 없다.
<div id="myself" class="content-wrap">Let me introduce myself!</div>Author And Source
이 문제에 관하여([210705 TIL] HTML), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rimi0108/210705-TIL-HTML저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
