본문 바로가기

HTML

HTML 전역속성과 관련된 내용


전역 속성이란? HTML 모든 요소에서 공통적으로 사용 가능한 속성

class속성:
1요소의 별칭을 설정하는 기능을 한다.
2 class라는 별칭을 이용해 js와 css를 연결시켜 줄 수 있다. css에서. className처럼. 을 사용하여 css를 사용할 수 있다.
3 class는 동일한 이름으로 여러 번 사용할 수 있다.  

<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>
<p class="note editorial">안녕하세요</p>


id속성:
1문서에서 고유한 식별자를 설정하는 기능을 한다.
2 id값은 js와 css를 연결시켜 줄 수 있다  css에서 주로 #idName처럼 #을 사용하여 css를 사용할 수 있다.
3 동일한 이름으로 여러번 사용할 수 없다 즉 1번만 사용 가능
ex)

<p id="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>
<p id="note editorial">안녕하세요</p>


위와같이 작성할 수 없다

style속성: 
특정 요소에 css를 사용하겠다고 선언하는 기능이 있다.
ex)

<div style="color: red;">안녕하세요!</div>


위 코드와같이 요소 안에 css를 직접 사용할 때 사용된다.

title속성 :
1 요소의 설멍을 지정할때 사용된다.
2 head태그의 title태그와 헷갈리지 말자 태그와 속성은 다른 것이다 
ex)
<div title="div태그로 작성되었습니다.">안녕하세요!</div>
위 코드에서 title을 통해 요소에 대한 설명을 적어봤다 화면에서 확인해 봤을 때 내용에 마우스 포인터를 가져다 놓으면 title에 작성된 설명이 표시된다.

절대 경로와 상대 경로 

절대 경로: 파일이나 이미지의 경로가 내 컴퓨터 안에 있는 것이 아니라 페이지에 있을 경우 파일이나 이미지를 가지고 있는 페이지에 url(주소)를 명시하는 방법이다.
ex)

<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver
.net%2FMjAyMjAzMDFfMjA5%2FMDAxNjQ2MTE2MDExNzc2.eIHt73eituRpz9ELaKH06lGI
IZVSkdxOFAhyAK3n088g.FLWJhBtvt7IxjW2DmWk_nlDyuBo0OhkosemzQU7w
L1Ag.JPEG.lds2032%2F1-_%25282%2529.jpg&type=sc960_832">


위와같이 image를 출력하고 싶어 img태그를 사용했고 주소를 명시하는 src속성에 해당 이미지가 있는 주소를 사용하면 절대 경로라고 할 수 있다.
상대 경로: 절대 경로와 반대로 파일이나 이미지의 경로가 내 컴퓨터 안에 있을 때 내 컴퓨터 안에서 파일이나 이미지는 다른 폴더로 이동이 가능하다 즉 파일이나 이미지의 경로가 달라질 수 있다는 의미이다 때문에 상 대경 로라 고한다 
이때 주소를 명시할때 ./과 ../를 사용할 수 있다
./ = 현재 작성하고있는 html 파일을 기준으로 하위 폴더 또는 동일 폴더에서 파일이나 이미지를 찾는다 

ex1) 현재 작성하고 있는 html 파일을 기준을 하위 폴더에서 태극기 이미지를 찾는 경우 
<img src="./태극기.jpg" alt="태극기">
위 코드에서 태
../= 현재 작성하고 있는 html 파일을 기준으로 상위 폴더 또는 다른 폴더에서 파일이나 이미지를 찾는다  

ex2) 다른 폴더에서 태극기 이미지를 가져온 경우

<img src="../mainFolder/images/태극기.jpg" alt="태극기">


위 코드를 설명하자면 태극기라는 이미지가 현재  제로베이스 강의 자료라는 폴더 안에 images안에 저장되어있다 이때../를이용해 다른 폴더인 
제로베이스 강의 자료 폴더 안에 images폴더 안에 접근하여 태극기 이미지를 추출해낸 것이다.
주석 : 
1 주석이란? 
코드를 컴퓨터가 순차적으로 해석할 때 주석은 컴퓨터 브라우저가 해석하지 않는다. 코드에 대한 내용을 사람이 빠르게 알아보기 위해 주로 작성된다.
즉 메모와 같은 기능을 한다.
2 주석은 사용하는 언어마다 작성하는 법이 다르기 때문에 vscode기준 window = ctrl + /   mac = cmd + /으로 작성한다 
한 줄만 주석 처리할 수도 있지만 드레그 해서 여러 줄을 주석처리할 수 있다.

html에서 기능이 있는 특수기호

&nbsp; : 띄어쓰기를 해주는 기능을 한다.
ex1)

[<p>hello   kim</p>


위와 같이 코드를 작성해도 p태그는 1번만 띄어쓰기를 해준다 하지만

[<p>hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;kim</p>


위와같이 작성해주면 &nbsp가 작성된 만큼 띄어쓰기가 된다.