index.html 파일은 루트폴더에 접속했을 때 제일 먼저 보여주는 페이지의 명이다.

 

href = "주소"를 작성할 때 맨 앞에

/ 를 붙이면 최상위 폴더로 이동.

./ 를 붙이면 현재 폴더 - 현재폴더의 경우 아무것도 안붙여도 됨.

../ 를 붙이면 상위 폴더로 이동한다.

 

또한 최상위 폴더의 index.html로 이동하려면 / 하나면 경로에 넣으면 이동한다.

 

글을 인용할 때는 <blockquote>,<q> 이 둘을 사용한다. 차이는

<blockquote>는 전문을, <q>는 말하던 도중 짧은 인용을 위해 사용한다.

 

순서가 있는 리스트 <ol></ol> order list

순서가 없는 리스트 <ul></ul>unorder list

 

 

video 속성.

동영상을 재생. <video src = "비디오명.확장자"></video>

태그 : 

autoplay - 자동재생. 사파리에서만 작동 

muted - 주로 autoplay와 함께 사용되며 자동재생 후 뮤트시켜줌. 해당 태그를 추가로 달아줘야 크롬에서도 돌아감.

controls - 동영상 조절이가능. 음량 및 시간 

 

audio 속성

오디오를 재생. <audio src = "오디오명.확장자"></audio>

태그 : 

controls - 안쓰면 화면에 안나옴. 작성 해야 나온다.

autoplay - 자동재생. 사파리에서만 작동 

muted - 주로 autoplay와 함께 사용되며 자동재생 후 뮤트시켜줌. 해당 태그를 추가로 달아줘야 크롬에서도 돌아감.

 

iframe

html 안에서 html파일을 불러올 수 있다.

iframe src = "주소"

 

form post get 확인하기 좋은 사이트 : requestBin

'HTML' 카테고리의 다른 글

공부 (태그의 풀 네임)  (0) 2023.01.26
복습2(img 태그)  (0) 2022.11.13
시작(복습1)  (4) 2022.11.08
추가하면 좋을 vscode 익스텐션  (0) 2022.11.08

<br> 태그는 줄바꿈 태그로 - break line의 약자

<p> 태그는 본문 태그로,  paragraph의 약자.

< , > 는 <p> 태그 안에 직접적 작성이 불가. &lt;와 &gt;를 이용.

&lt; : less than ~보다 작다.의 약자.

&gt; : greater than ~보다 크다. 의 약자.

link 태그의 href는 hypertext reference 의 약자. 

img 태그의 src 는 sorce

'HTML' 카테고리의 다른 글

2/6 공부  (0) 2023.02.07
복습2(img 태그)  (0) 2022.11.13
시작(복습1)  (4) 2022.11.08
추가하면 좋을 vscode 익스텐션  (0) 2022.11.08

<img>태그.

이미지.

 

<img> 콘텐츠가 없는 태그.

하지만 태그만으로는 이미지 표시할 수 없음.

속성 사용

src 속성

<img src="파일경로\파일명.확장자">

파일 경로의 경우 html문서와 같은 폴더에 있다면 이미지명만 사용해도 됨.

다른 폴더라면 폴더주소를 넣어줘야함.

ex)a 폴더안에 html문서와 이미지 x 가 같이 있는 경우

<img src ="./x.jpg">

./ -> 현재 폴더

../ -> 상위 폴더

../../-> 상위폴더의 상위폴더. 계속 추가 가능

ex)a 폴더안에 b폴더 안에 이미지 x 가 있는 경우

<img src ="b/x.jpg">

=>내 컴퓨터안에 있기 때문에 '내부리소스 이미지 방법' 이라고 함.(맞는지..? 아마 맞을듯?)

주소를 제대로 안쓰면 엑박/깨진 아이콘

alt ->추가 설명을 위한 속성

ex) <img src ="./a.jpg" alt ="이미지 설명">

 

=> img 태그를 쓸 때는 반드시 src 와 alt를 사용해야함.

 

width -> 가로 길이 속성. px 단위로 입력해야함

height -> 높이 길이 속성. px 단위

ex)

width = "100"  (자동으로 픽셀단위로 설정됨) 높이도 자동으로 비율에 맞춰 조정됨.

height = "100" (자동으로 픽셀단위 설정) 가로가 비율에 맞춰 조정

 

동시에 사용시 둘 다 입력값에 맞춰짐.

-> 이미지의 원래 비율이 손상될 수 있다는 점을 유의.

 

ex)

width = "50%"

=> 원래 이미지의 50%의 크기로 표시.

 

외부 리소스 이미지 방법

<img src="외부이미지 링크">

구글에 가서 구글 로고를 우클릭하면 '이미지 새탭으로 열기' 가능.

이미지가 저장되어 있는 서버의 링크 주소가 나옴.

해당 주소를 입력하면 외부이미지링크 삽입 완료

 

ex)

<img src ="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

 

앞서 공부하였던 a 태그로 img태그를 감싸면 이미지를 클릭했을 때 a태그의 주소로 이동할 수 있다.

ex)<a href = " https://www.google.com" target ="_blank">  => 이러면 새탭.

<img src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</a>

'HTML' 카테고리의 다른 글

2/6 공부  (0) 2023.02.07
공부 (태그의 풀 네임)  (0) 2023.01.26
시작(복습1)  (4) 2022.11.08
추가하면 좋을 vscode 익스텐션  (0) 2022.11.08

간단개념

 

-콘텐츠가 있는 태그

Ex)<p><span><div>

 

오픈태그 + 내용(콘텐츠) + 클로즈태그 -> 요소

-오픈태그와 클로즈 태그가 같으면 안됨.

 

-콘텐츠가 없는 태그

Ex)<br><img><meta> 

-오픈,클로즈 개념이 없음. 빈태그

 

기본구조.

doc 입력시 최신 구조. html5

doctype

 

태그의 속성 : 태그를 보조. 의미,기능 등

 

<head> : html 문서의 정보를 작성하는 영역.

<body> : 웹 브라우저에 표시되는 영역

 

 

h(n)태그

 

h1~6 1이 제일 큼. 헤딩태그. 대제목,중제목,소제목등

 

주로 h1태그 사용. 숫자가 작을수록 중요도 증가.

h1은 가장 중요도가 높음.

그러므로 단 한 번만 사용해야함. 검색엔진 검색시 불이익을 받을 수 있음.

검색엔진이 무슨 문서인지 파악하는데 주로 활용

 

반드시 h1부터 순차적으로 사용해야함

-h2가 사용 안되었는데 h3가 들어가면 안됨.

역시 검색엔진이 정보 수집시 순차적으로 하기때문.

h2가 없으면 이후의 h가 없다고 판단.

 

<p>단락태그.</p>

단락이 나눠짐./하나의 단락을 표현

- p태그는 가로 한 줄을 다 사용하는 태그. 한 줄이 꽉 차면 다음 줄로 넘어감.

-웹브라우저 크기에 따라 유동적으로 줄이 변함.

 

스페이스바 : &nbsp;

줄바꿈(Enter) : <br>

 

<a> : 웹 페이지 링크 거는 태그

-한 번이라도 이동한 링크는 보라색으로 바뀜. 이동 안한건 파란

-내부 링크

: 한 문서 내에서 해당 요소의 위치로 이동하는 것.

ex)나무위키 목차.

<a href ="id name">name</a>

name 클릭시 id name 위치로 이동. 

-외부 링크

<a href ="https://www.naver.com">네이버</a>

네이버 클릭 시 네이버로 이동.

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

네이버 클릭 시 네이버 새 탭창 열림

새탭 -> target ="_blank"

'HTML' 카테고리의 다른 글

2/6 공부  (0) 2023.02.07
공부 (태그의 풀 네임)  (0) 2023.01.26
복습2(img 태그)  (0) 2022.11.13
추가하면 좋을 vscode 익스텐션  (0) 2022.11.08

1.Material Theme

테마 변경하는 익스텐션

 

2.Material Icon Theme

HTML, CSS,JS 등 아이콘 디자인 변경 (식별성 증가)

 

3. Auto Rename Tag

시작태그 변경 시 끝 태그도 같이 바뀜

ex) <div></div> ->  <a></a>

 

4. HTML to CSS autocompletion

CSS에서 HTML의 클래스 자동완성을 도와줌

 

5. HTML CSS Support

HTML에서 CSS 이름 자동완성 도와줌

 

6. CSS Peek

HTML에서 CSS 이을 누르면 자동 이동.

 

7. Autoprefixer(추후 설치)

밴더프리픽스라는 기능을 도와줌

 

8. Braket Pair Colorize

->> 해당 기능은 VSCODE 기본 기능으로 추가되었음.

VSCODE 설정(Win -> Ctrl + , / Mac cmd + ,) 

Braket pair 검색 후 모두 체크, true 설정.

-> 코드 가독성을 높여줌.

 

 

9. indent-rainbow

코드에 색을 입혀 가독성 증

 

10. LIVE Server 

수정시 실시간 웹페이지 반영 

'HTML' 카테고리의 다른 글

2/6 공부  (0) 2023.02.07
공부 (태그의 풀 네임)  (0) 2023.01.26
복습2(img 태그)  (0) 2022.11.13
시작(복습1)  (4) 2022.11.08

+ Recent posts

티스토리툴바