전역 속성이란? 

Html body의 전체 영역에서 모두 사용할 수 있는 속성을 뜻한다. 

 

1. <태그 title="설명"></태그>

전체 영역에서 설명을 명시하는 속성

<a href="https://www.naver.com" target="_blank" title="네이버로 이동">NAVER</a>

 

2. <태그 style="스타일"></태그>

요소에 적용할 스타일 을 지정하는 것

 

3. <태그 class="이름"></태그>

Css, Js 정확히 짚어서 제어하기 위한 속성. 중복가능한 이름이다. 

 

4. <태그 id="이름"></태그

class와 달리 중복해서 사용하면 안 된다. 핵심적인 요소에 이름을 부여할 때 사용하자.

 

5. <태그 data-이름="데이터(문자 데이터)"></태그**(난이도 있음)

해당 속성은 '태그' 소속된 요소에 데이터를 잠시 저장하게 된다. 

이는 향후 Css 또는 Js에서 사용하게 된다. 

 

Html에 저장된 데이터를 Js에서 어떻게 활용할 수 있을까? 

<div data-animal-name="bear">곰</div>
<div data-animal-name="tiger">호랑이</div>

 

const els = document.querySelectorAll('div') /*html 데이터에서 querySelector를 통해 div 찾기*/
els.forEach(el => { /*그 데이터를 잠시 els에 담아두고, 해당 데이터를 각각 반복해서 */
	console.log(el.dataset.animalName) /*dataset 영역에 animal-name 해당되는 데이터를 콘솔창에
    기록을 남긴다.*/
})

/*
먼저 그릇을 만들자
이 그릇의 이름은 element의 약어로 els로 짓겠다. 
여기에 어떤 값을 할당할 것이다. (=부분)
document, 즉 html 구조에서
querySelectorAll, query selector를 통해 모든 요소를 찾을 것이다.
그리고 우리가 찾을 요소는 div 태그이다. 
------> 여기서 찾은 값은 els라는 그릇에 담아서 다음줄에 활용한다. 

그릇에 담겨졌던 요소들을 하나씩 반복해서 데이터를 처리할 것이다. 
이 반복되는 각각의 내요은 el이라는 별도의 그릇에 담아서 내부에서 사용하겠다고 선언한다. 
그리고 console창에
el 그릇에 담겨 있는 dataset을 추출하는 개념에서 사전에 저장한 html에 작성한 animal-name 데이터를 넣는다.
*/

 

해당 코드를 vscode에 출력 시 오류가 발생할 수 있어

js를 html에 연결할 때 아래와 같이 defer를 추가하여 코드를 입력하면 js가 html 전체 코드를 읽으면서 오류가 해결된다. 

<script defer src="/js/main.js"></script>
반응형

'HTML' 카테고리의 다른 글

[HTML] 핵심 요소 정리  (0) 2023.12.03
[HTML] 버전 지정 / CSS, JS 연결하기  (0) 2023.11.23

div

특별한 의미가 없는 구분을 위한 요소. (Division)

 

h1 (heading)

제목을 의미하는 요소.

 

p (Paragraph)

문장을 의미하는 요소. (블록*상자* 요소)

 

img (Image)

이미지를 삽입하는 요소. (인라인*글자*요소)

e.g. <img src="https://www.naver.com" alt="네이버 홈페이지"> 필수속성 (누락될 경우, 웹표준에 어긋난다)

                                   이미지 경로 명시           alternate : 이미지의 이름 명시

                                                                       이미지가 출력되지 못했을 때 대신해서 출력된다. 

제목을 의미하는 요소 (Heading)

중요도가 클 수록 숫자가 작아진다. 

<h1></h1> 대주제
<h2></h2> 중간주제
<h3></h3> 소주제
<h4></h4>
<h5></h5> 여기까지 사용하는 경우가 거의 없음
<h6></h6> 여기까지 사용하는 경우가 거의 없음

 

a (Anchor)

e.g. <a href="https://www.naver.com" target="_blank"></a>

                              넘어갈 경로 명시                    링크 걸어서 페이지 이동할 때

                                                                            새 탭으로 열어서 명시한다. 

 

span

특별한 의미가 없는 구분을 위한 요소. (인라인*글자*요소)

i.e. 글자들의 범위를 잡아낼 때 사용하는 태그.

 

br (break)

줄바꿈 요소

 

input

사용자에게 테이터를 입력받는 요소. (인라인*글자*요소와 동시에 블록*상자*요소이다.)

                                                    i.e. 인라인 요소이지만 블록요소가 가지고 있는 몇 가지 특성을 추가적으로 사용할 수 있기 때문이다. 

                                                          수평으로 쌓이는 특성, 가로세로 여백 지정 가능

e.g. 

<input type="text">

입력받을 데이터의 타입 명시

text = 글자가 화면에 출력       

<input type="text" value="evelyn.kim1">

value = 사용자가 데이터를 입력하기 전에 미리 데이터를 입력하는 속성이다.

출력화면

 

<input type="text" placeholder="evelyn.kim2">

사용자가 어떤 값을 입력해야 하는지 힌트를 명시해놓은 속성이다. 

출력화면

 

<input type="text" disabled/>

값을 명시하는 않는 속성, 빈태그처럼 '/'표시로 태그 마무리 명시하기.

출력화면_입력 불가

 

<label>
    <input type="checkbox"> Red<br/>
    <input type="checkbox"> Yellow<br/>
    <input type="checkbox"> Green<br/>
</label>

(인라인 요소) 사용자에게 체크 여부를 입력받는 데이터 종류이다. 

input요소는 라벨링 가능하다.

제목(e.g. Red,Yellow,Green)을 명시할 때 label이라는 요소를 함께 사용한다.

label 요소로 묶었기 때문에 체크박스와 글자 모두가 동시에 클릭 가능하다.

체크박스 클릭
제목 클릭

 

<label>
    <input type="checkbox"> Red<br/>
    <input type="checkbox"> Yellow<br/>
    <input type="checkbox" checked> Green<br/> <!-- 주목! -->
</label>

미리 체크한 상태로 출력하려면 위와같이 코딩하면 된다. 

출력화면

 

<label>
    <input type="radio" name="color"> Red<br/>
    <input type="radio" name="color"> Yellow<br/>
    <input type="radio" name="color"> Green<br/>
</label>

체크박스와 달리 레디오는 제목 간의 관계를 중요시한다. 

라디오를 한데 묶어서 둘 중 하나만 선택이 가능한 관계를 보여준다. 

name 속성을 통해 원하는 이름으로 묶으면 된다. 

name 속성이 없으면 항목 체크 후 취소가 적용되지 않는다. (이미지1)

이미지1

반응형

'HTML' 카테고리의 다른 글

[HTML] 전역 속성(기본 태그)  (0) 2023.12.06
[HTML] 버전 지정 / CSS, JS 연결하기  (0) 2023.11.23

<!DOCTYPE html>의 html는 문서의 HTML 버전을 지정한다.

 

<!DOCTYPE html> HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans... XHTML

 

코드 예시 : 

<!DOCTYPE html> <!-- html 버전 지정 -->
<html lang="ko"> <!-- 페이지 자동 번역 팝업여부 -->
<head>
    <meta charset="UTF-8"> <!-- 문자 인코딩 방식 지정 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- viewport:모바일과 관련 있음 content: 관련 내용 -->
    <title>Document</title>
    <link rel="stylesheet" href="main.css"> <!-- **css 연결하기 -->
    <script src="./main.js"></script> <!-- **js 연결하기 -->
</head>
<body>
    <div>Hello World</div>
</body>
</html>

 

 

 

 

대표적으로 사용하는 아이콘 - 파비콘 이라고 부른다. 

HTML Favicon을 적용할 때는 이름을 favicon이라고 지정하길 권장한다.

favicon.ico 또는 favicon.png 파일이 주로 사용된다. 

 

** 파비콘 (Favorite Icon, Favicon)

 

 

 

Javascript를 html에 연결하는 2가지 방법 : 

  1. </link> 외부에서 (JS)파일을 가져오는 방식
  2. </script> (JS를)내부에서 직접 작성하는 방식

Meta(정보) 태그 :

link, style, scriprt, title 등 각각의 태그로  나타낼 수 없는 나머지 모든 정보를 표시할 때 사용하는 태그

 

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

name - 기본적인 정보의 종류 (author제작자)

content - 기본 정보의 실제 값 기재

i.g. </meta>는 HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브라우저에게 제공하는 태그이다. 

 

viewport - 웹페이지가 실제로 표시되는 영역 (웹페이지 출력되는 영역)

** 모바일에 대응하는 작업을 할 때 필요한 내용이고 일반 desktop에서는 해당사항이 없다.

content - 표시되는 영역에 해당하는 값이다.

 

<meta charset="UTF-8">

 

charset(Character set)

화면에 표시하는 문자를 어떠한 방식으로 인코딩할 것인지 나타내는 속성.

 

문자 인코딩(Encoding)

웹페이지에서 볼 수 있는 각각의 문자를 어떤 방식으로 처리할 것인지에 대한 방식 의미.

e.g.

한글로 '딩' 글자를 표현하고 싶다고 가정한다.

'딩'글자는 'ㄷ', 'ㅣ', 'ㅇ', 으로 이루어져 있다.

i.g. 모음과 자음으로 각각의 조합을 만들 수 있다.

문자 인코딩 방식이 달라질 경우, 모음과 자음으로 글자를 만드는 것이 아닌 '딩'글자가 온전히 존재해야지 문자로 출력이 가능할 수 있다.

(e.g. EUC-KR 옛날 인코딩 방식)

최근에는 웹에서 UTF-8 인코딩 방식을 표준처럼 사용하고 있다. 

반응형

'HTML' 카테고리의 다른 글

[HTML] 전역 속성(기본 태그)  (0) 2023.12.06
[HTML] 핵심 요소 정리  (0) 2023.12.03

+ Recent posts

티스토리툴바