전역 속성이란? 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에서 기능이 있는 특수기호
: 띄어쓰기를 해주는 기능을 한다.
ex1)
[<p>hello kim</p>
위와 같이 코드를 작성해도 p태그는 1번만 띄어쓰기를 해준다 하지만
[<p>hello kim</p>
위와같이 작성해주면  가 작성된 만큼 띄어쓰기가 된다.
'HTML' 카테고리의 다른 글
HTML 표(table)와 양식(form)에 관련된 태그들 (0) | 2022.04.03 |
---|---|
HTML 멀티미디어에 관련된 태그들 (0) | 2022.04.03 |
HTML 인라인 요소인 태그들 (0) | 2022.04.03 |
HTML영역설정,문자와 관련된 태그들 (0) | 2022.04.03 |
HTML을 배우기전 알아두면 좋을 내용들 (0) | 2022.01.28 |