목차
- html 요소(Element) 와 태그(tag) 와 속성(Attributes) 의 구조
- 태그(Tag) 종류 및 실습
- 속성(Attributes) 종류 및 실습
▶ html 요소(Element) 와 태그(tag) 와 속성(Attributes) 의 구조
- 요소(Element) = <tag>여는태그 + contents + </tag>닫는태그
<div> 이 부분이 콘텐츠 입니다.</div>- <div>는 명령어로 여는 태그와 닫는 태그 사이에 콘텐츠(우리가 출력하고싶은 내용) 를 포함하는 것을 요소(Element)라고한다.
- 태그(Tag) 와 속성(Attributes)은 <태그 속성 ="값"> 콘텐츠 </태그> 형태의 모습을 가지고 있다.
<div id="test">콘텐츠가 들어가는 곳</div>- 화살괄호 안에 div는 '명령어' 이며 id는 '속성(Attributes)'이고 'test 는 '값'이다.
- 태그(Tag) 마다 속성(Attributes)을 가질 수 있으며 속성에 따른 값을 입력해 그에 맞는 기능을 할 수 있게 한다.
▶태그(Tag) 종류 및 실습
★지난 글에 이어 태그의 종류들과 어떻게 사용되는지 추가적으로 실습을 통해 알아보았다.
- <meta> </meta> - html 전체의 데이터에 대한 데이터를 설정하는 태그이다.
<html>
<head>
<meta charset="UTF-8">
</head>
<body></body>
</html>- 위에 <meta> 태그를 보았을 때 charset 이란 속성을 통해 UTF-8 값을 가지고 전체 Html 문서에 문자셋 정보를 추가해 다양한 문자를 인코딩 할 수 있도록 기능을 추가 한 것이다.
2. <ol></ol> 과 <ul></ul> - 목록을 만들 수 있는 기능을 하는 태그이다.
<ol>
<li>목록을 만드는 ol 태그를 사용했습니다.1</li>
<li>목록을 만드는 ol 태그를 사용했습니다.2</li>
<li>목록을 만드는 ol 태그를 사용했습니다.3</li>
</ol>
<ul>
<li>목록을 만드는 ul 태그를 사용했습니다.1</li>
<li>목록을 만드는 ul 태그를 사용했습니다.2</li>
<li>목록을 만드는 ul 태그를 사용했습니다.3</li>
</ul>- 블록요소에 속하며 , <ol> 태그는 숫자로 목록을 순차적으로 나타내며 <ul>태그는 기호로 목록을 나타낸다.
3. <pre></pre> - 사용하는 프로그램 ( 저는 VS code 프로그램사용 )에 입력한 콘텐츠의 내용그대로 출력된다.
<pre>
우리가 입력하고 싶은대로 입력해보세요
줄바꿈도 상관 없습니다.
마음대로
아무거나
</pre>- 보통 'VS code 프로그램'에서 확장 설치된 프리티어 영향을 받아 자동 줄바꿈 띄어스기 등 자동 조정이 되는데 <pre>사용시 밑에와 같이 출력이 된다.
4. <input /> - 여는 태그, 닫는 태그를 필수로 하는 태그와 다르게 독단적으로 사용할 수 있으며 대신 type 이라는 속성을 통해 문서에 구분된 공간을 출력한다.
<input type="text" />- input 태그에는 type은 필수적인 속성이며 type 속성의 여러가지 값 들중 어떤 것을 선택하냐에 따라 문서에 어떤 구분된 공간을 출력할지가 나뉜다.
- 위 사진에서 처럼 type 속성을 가지고 text 값을 사용한 출력된 공간이 생겨 공간안에 텍스트를 입력할 수 있다.
5. <label></label> - 태그의 콘텐츠 즉 문서상의 지정된 텍스트를 클릭시 연결된 문서상의 요소를 선택할 수 있다.
<label for="test-2">라벨실험</label>
<div>텍스트 입력공간<input type="text" id="test-2" /></div>- 필수적으로 for 이라는 속성을 사용하며 태그와 같이 사용할 수 있는 요소들이 제한되 있다.
ex) <input>,<output>,<button>,<select> 등 이 있다.
- 연결된 요소에서는 id 속성을 사용해 요소의 값을 설정하고 <label> 태그의 속성에 대한 속성값도 동일하게 사용해야한다.
- 위 문서에서 라벨실험이라는 텍스트를 클릭시 자동으로 밑에 공간이 선택이 되어 텍스트를 입력할 수 있게 된다.
★ 이 외에도 여러가지 태그들이 존재하며 앞으로 실습을 통해 알아보록하자.
▶속성(Attributes) 의 종류와 실습
1. id - 특정한 엘리먼트를 나타내는 이름, 하나의 엘리먼트에 하나의 id를 설정할 수 있으며 중복될 수 없다.
<div id="사용자가 값을 지정"> 콘텐츠 </div>
2. class - 특정한 엘리먼트의 이름을 정하여 묶음으로 설정할 수 있다. 중복이 가능하다.
<div class="사용자가 값을 지정">콘텐츠</div>
* id 와 class 속성은 요소의 이름을 지정한다는 점에서 비슷하지만 값을 지정할때 중복된 값을 사용할 수 있는지 여부에 따라 차이점이 생긴다. 쉽게 얘기해 여러 요소에서 id 속성을 사용할 때마다 id 속성에 대한 값은 항상 다르게 표기해야하며 class 는 값이 같아도 무관하다.
html 문서가 웹에서 읽혀질 때는 문제가 생기지 않지만 추후에 다룰 java script 를 같이 사용하게 될 시에는 동일한 id 값이 있을 시 지정된 요소를 찾아내지 못하게 된다.
3. src : 파일을 가져올 때 설정한다. 보통 img , video, audio 엘리먼트에서 설정한다. sorce 의 약자
<img src="test.jpg" alt="." />
- 값을 표기 할 때 ./ 를 사용하게 되면 현재 파일의 위치한 폴더를 ../ 는 상위 폴더를 보여준다.
이는 컴퓨터에 있는 명령 프롬프트의 명령과 같은 명령어이다.
4. alt : img , video, audio 등 엘리먼트 파일을 가져오지 못했을 때 문서에 출력하는 텍스트 설정
<img src="test.jpg" alt="이미지가 없습니다." />- src 에 대한 값으로 사진 파일을 불러오는데 불러올 사진 파일이 존재 하지 않을시에 아래와 같이 alt로 인해 표기된다.
4. charset : 메타 데이터에 사용되며 데이터의 포멧을 설정
<meta charset="utf-8" />
- 속성과 속성값인 문자셋을 통해 외부로부터 읽어드릴 문서나 파일 등을 컴퓨터에서 인코딩을 할 수 있는 언어를 정하게 된다.
5. type : 사용자가 입력한 데이터의 형식을 설정
<input type="text" />
<input type="number" />
<input type="file" />
<input type="email" />
<input type="color" />- 위에 태그 설명 할 때 언급했던 것 과 같이 input 태그와 주로 사용되며 type 값으로는 'text' 'password' 'date' 'file' 등 이 존재하며 값들과 같이 이루어 데이터의 형식을 보여준다.
5. for : label 엘리먼트에서 사용되며 input의 id 속성을 찾아 연결한다.
- 위의 label 태그 참고 하면 조금 더 쉽게 이해 할 수 있다.
6. href : a 엘리먼트 , 하이퍼링크의 주소 또는 파일 위치를 입력한다.
<a href="https://www.naver.com/">네이버</a>- 값에 링크를 입력시 문서에서 해당 링크로 이동할 수 있는 텍스트가 지정되어 출력된다.
7. style : id , class 등과 마찬가지로 모든 엘리먼트에 설정 가능한 속성 엘리먼트가 어떻게 출력될 것인지를 설정
- 보통 css 언어로 값을 정해 콘텐츠의 크기 색상 등을 꾸밀때 사용한다.
<span style="color: red">text</span>
<span style="color: blue">number</span>
<span style="color: green">file</span>
★여기 까지 오늘 사용된 속성에 대해서 정리해 보았다. 앞으로 사용할 줄 알아야 할 무지막지한 속성들과 태그이 있지만 배울때마다 하나씩 정리해 나아가면서 머릿속에 집어넣어야 할 것 같다. 마지막으로 배운 style 속성에 대한 값으로 중요한 한가지만 설명하고 끝내려고 한다.
<div style="display: inline">확</div>
<div style="display: inline">인</div>
<div style="display: inline">해</div>
<div style="display: block">봅시다</div>
<p style="margin: 0">문단을 입력했습니다.</p>
<span style="display: block">블록을 넣은 스타일</span>display 란 값인데 지난 글에서 블록요소와 인라인 요소에 대해 설명을 했었는데 각 태그들이 가지는 블록요소와 인라인에 특성을 바꿔줄 수 있다. 예를 들어 <div> , <p> 태그를 인라인 요소의 역할을 할 수 있게 , <span> 을 블록요소의 역할을 하도록 말이다.
위에 <div> 태그의 역할이 인라인 요소로 바뀌며 <span> 과 같은 역할을 해 '확','인','해' 라는 글자들이 한 줄에 표기가 되있는 걸 볼 수 있을 것이다.
? 오늘 실습하면서 궁굼한 사항이 생겼다. html 문서들을 가지고 웹페이지를 만들었을 때 다른 곳에서 페이지의 링크를 받아 접속을 하게 되다고 가정해보자. 내가 작업한 컴퓨터에서 가지고 있던 여러가지 html 문서 데이터들 중 한가지를 지우게 되었을 때 링크를 받아 보는 사람은 오류가 날 것인가? 에대한 의문이다.