패캠 네카라쿠배 도전: HTML CSS

[패캠 네카라쿠배 2기 도전] HTML/ 전역 속성, 기타

닉네임이 멋이 중헌디 2021. 5. 27. 14:01

1. 전역속성 

1) class와 id 

모든 HTML 요소에서 공통적으로 사용 가능한 속성.

class

공백으로 구분된 요소의 별칭을 지정. [별명 : 여럿이 class같아도 됨]
CSS 혹은 JavaScript의 요소 선택기

(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)

를 통해서 요소를 선택하거나 접근.

 

id

문서에서 고유한 식별자(idenifier, ID)를 정의. [이름(고유) : 하나만]
CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서

요소를 선택하거나 접근.

 

ex. <div class = "section"></div> =>여러개 가능 

 <div class = "section"></div>

<div class = "section"></div> 

<div id = "section"></div>  => 한 개 가능 

 

.section { CSS 내용 } : class

#section { CSS 내용} : id

 

const section = document.querySelector('.section')

const sectionId = document.getElementById('section')

 

2)style

style

요소에 적용할 CSS를 선언.

style = "color: red; background: blue"

=> 모든 html태그 안에서 사용할 수 있다 

 

 

 

3)title 

title

요소의 정보(설명)을 지정.

모든 html 태그에도 쓸 수 있다 

커서를 갖다 대면 title에 넣은 내용이 나온다 

 

ex. 

<h2 title = "이 부분은 제목2입니다">제목2</h2>

<a href = "google주소" title="google.com">Google</a>

<div title = "DIV 태그입니다.">DIV</div>

 

4)lang

요소의 언어(ISO 639-1)를 지정.

<p lang="en">This paragraph is English</p>

<p lang="ko">이 단락은 한글입니다.</p>

<p lang="fr">Ce paragraphe est défini en français.</p>

 

html 외에도 다른 태그에서 쓸 수 있는 전역 속성이지만 웬만한 페이지에서는 언어 하나만 선언하니까 

<html lang = "ko">식으로 사용 

 

5)data-* 

사용자 정의 데이터 속성을 지정

: 사용자가 원하는 대로 데이터 속성을 정할 수 있다

 js에서 이용할 수 있는 데이터(정보)를 html에 저장하는 용도로 사용 

형태 : data-내가 원하는 이름 

JS에서 가져올 떄는 해당 태그를 잡은 뒤, "dataset.내가 정한 이름(-이 있으면 camelcase로)" 형태로 사용한다

 

<!-- data-custom-data-attributes -->

<div id="me" data-my-name="Heropy" data-my-age="851">Heropy</div>

=> my-age, my-name라는 정보를 넣어놓는다 

=>html에서 저장하고 있다가 JS에서 활용할 수 있다 

 

// dataset.customDataAttributes

const $me = document.getElementById('me'); => 위의 div를 가져와서

console.log($me.dataset.myName); // "Heropy" => me에게느 ㄴdataset 속성이 있고 그 안에 myName 이름의 data가 있다 (my-name으로 저장을 했지만 JS는 -을 좋아하지 않기 때문에 myName으로 가져온다) 

console.log($me.dataset.myAge); // "851"

 

6)draggable 

요소가 Drag and Drop API를 사용 가능한지 여부를 지정.

<div draggable="true">The element to drag.</div>

이 텍스트를 drag and drop으로 가져갈 수 있는지

-> 태그에 속성으로 draggable = true : 그러므로 가능,

false로 작성하면 방지 가능

만약 draggable을 설정하지 않으면 브라우저가 알아서 판단한다

ex. 복붙할 때 등

 

7)hidden 

요소를 숨길 때 사용. 

- 숨겨져 있지만 사용은 할 수 있다. 

<form id="hidden-form" action="/form-action" hidden>

  <input type = "text" name="id" value = "Heropy">

//form 태그 안에 action으로 이동할 주소 부여

//hidden속성을 form태그에 부여했기 때문에 form태그의 내용이 모두 숨긴다

<!-- 숨겨진 양식들.. -->

</form>

<button form="hidden-form" type="submit">전송</button>

//button은 form밖, 그러므로 form속성으로 이어줌. type은 보내는 스타일

 

8)tabindex

 

Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정.

  • 대화형 콘텐츠(Interactive Content)는 기본적으로 html을 작성하는 코드 순서대로 탭 순서가 지정됨.
  • 탭으로 태그 간 이동을 할 수 있다.
  • ex. input 태그, 이미지 태그
  • cf. 대화형 콘텐츠
  • 대화형 콘텐츠 는 사용자와의 상호작용을 위해 특별하게 설계된 요소를 포함합니다.
  • 특정 조건을 만족하는 경우 대화형 콘텐츠에 속하는 요소도 있습니다.
  • <audio>, controls 속성을 가진 경우.
  • <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, <textarea>.
  • 비대화형 콘텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용.
  • tabindex="-1"을 통해 클릭을 하면 포커스는 가능하지만 탭 순서에서 제외 가능. (탭으로 선택되지 않는다) 
  • tabindex="1" 이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음.

tabindex에 부여된 양수의 순서로 움직이고 아무것도 부여되지 않은 경우에는 먼저 작성된 태그부터 간다 

ex. tabindex = 1 - 2 - 3 - (먼저 작성한 태그) 0 - 0 

<input type="text" value = "1"> 

    => input 태그 (대화형 콘텐츠) 그러므로 tabindex=0이 부여되어 있다

    => 탭을 통해 태그가 적혀져 있는 순서대로 선택할 수 있다 

<div tabindex="0"> 2.5</div> 

    => 대화형 콘텐츠는 아니지만 tabindex를 사용해서 탭으로 선택할 수 있다 

    => html이 적힌 순서대로 선택된다 

<input type="text" value = "2" tabindex = "1">

=> tabindex가 1이므로 0인 나머지 태그보다 더 먼저 선택된다

<input type="text" value = "3"> 

<input type="text" value = "4"> 

<input type="text" value = "5"> 

 

2. 절대 경로와 상대 경로 '

1)상대경로 

<img src = "./images/~~.jpg">

(1) ./는 이 해당 파일 주변에서 찾는 것 [생략 가능]

=> 경로상 주변에서 images라는 파일을 찾아야 한다 

     하지만 다른 폴더 안에 있다면 폴더를 먼저 찾고 그 다음에 images를 찾아야 한다 

: "./assets/images/xxx.jpg" 

 

(2) ../ 는 해당 폴더에서 한번 나가야 하는 경우에는 

: ../assets/images/xxx.jpg

 

=> 어떤 폴더에서 찾는지에 따라서 경로가 다르다 (상대경로니까)

 

2)절대경로 

경로가 절대적으로 바뀌지 않는다. 

ex. 블로그 도메인의 특정 경로에 해당 파일이 저장되어 있다면

사이트 - 폴더 - 파일이름 

<img src = "https://heropy.blog/assets/images/xxx.jpg"> 

=>서로 위치가 다른 파일에서 접근하더라도 경로는 똑같다 

=> 만약 다른 위치가 아닌 해당 위치에서 파일을 가져오고 사용하는 거라면 도메인 주소를 생략하고 

/assets/images/xxx.jpg이렇게 쓴다 

 

[정리]

1)상대 

./ : 현재 파일과 같은 폴더 안에 있는 파일을 찾는다 

../ : 현재 파일 상위 폴더로 나와서 파일을 찾는다 

[./폴더이름/파일이름] 

 

2)절대 

[도메인/폴더이름/파일이름]

:어디에서 접근하건 경로가 같다

 

3. 주석 

설명 이 링크는 구글 홈페이지로 이동합니다

=> 화면에 노출되지 않도록 하고 싶다면? [ctrl+/] : 특수기호들 사이에 텍스트가 주석처리가 된다 

=> html, css, js 모두 주석처리된 형태가 다르다 (특수기호를 사용해서 해도 되지만 단축키 추천)

 

링크 <a href = "구글주소">Google</a>

 

4. 특수기호(html entity) 

1)띄어쓰기를 여러번 하고 싶을 때:  &nbsp;(한번의 띄어쓰기)를 여러번 써준다

ex. Hello &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; World => [화면] Hello     World

2)화면에 코드가 <>를 포함한 채 그대로 텍스트로 나오길 바랄 때: &lt,넣고 싶은 태그이름,&gt

ex.  &lt;div&gt; &lt;/div&gt => [화면] <div></div>

 

더 알고 싶으면 더 찾아보기!

 

 

 

'패캠 네카라쿠배 도전: HTML CSS' 카테고리의 다른 글

[패캠 네카라쿠배 2기 도전]CSS/ 개요, 선택자, 상속  (0) 2021.05.27
[패캠 네카라쿠배 2기 도전]CSS/실습 환경  (0) 2021.05.27
[패캠 네카라쿠배 2기 도전] HTML/ 요소 - 표 콘텐츠&양식  (0) 2021.05.24
[패캠 네카라쿠배 2기 도전] HTML/요소 - 멀티미디어&내장 콘텐츠&스크립트  (0) 2021.05.23
[패캠 네카라쿠배 2기 도전] 6. HTML/ 요소 - 인라인 텍스트&수정  (0) 2021.05.22

'패캠 네카라쿠배 도전: HTML CSS'의 다른글

  • 현재글[패캠 네카라쿠배 2기 도전] HTML/ 전역 속성, 기타

관련글

티스토리툴바