728x90

[정의]

label 태그는 input 태그를 정의하기 위한 태그

해당 label이 설명하는 입력창이 활성화 또는 체크됨(text인경우 입력창 활성화, selectbox인 경우 체크가됨)

 

[형식]

<label for="id값">

 

- 함께 쓰이는 input 태그

 

HTML input type="week"

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[예시]

 

<label for="description">설명  </label>
 <input type="text" id="description">

 

728x90
저작자표시 (새창열림)

'HTML5&CSS' 카테고리의 다른 글

유용한 이미지 무료 사이트 정리(가입없음!)  (0) 2021.03.31
html&css : css style 지정하는 방법, 기본 문법  (0) 2021.03.31
html5 유용한 사이트 정리  (0) 2021.03.29
html5 : <video> <audio> 태그 이용해서 동영상 넣기  (0) 2021.03.29
html5 : <ul> <ol> <li> 자주 쓰이는 목록 태그  (0) 2021.03.26
728x90

저작권 문제없이 사용가능한 유용한 이미지 무료 사이트들을 정리해보았다.

 

1. png wing

png 이미지만 모아 놓은 사이트로 무료 다운이 가능하다.

 

 

PNGWing - 독점적 인 PNG 이미지

 

www.pngwing.com

2. pixabey

이미지와 동영상을 무료로 다운 가능하다. jpg png등 다양한 파일 형식 이미지가 제공된다.

pixabay.com/ko/

3. pexels

무료로 이미지 다운이 가능하며 가입하지 않아도 된다.

 

www.pexels.com/ko-kr/

 

728x90
저작자표시 (새창열림)

'HTML5&CSS' 카테고리의 다른 글

HTML : label 태그 속성  (0) 2022.05.12
html&css : css style 지정하는 방법, 기본 문법  (0) 2021.03.31
html5 유용한 사이트 정리  (0) 2021.03.29
html5 : <video> <audio> 태그 이용해서 동영상 넣기  (0) 2021.03.29
html5 : <ul> <ol> <li> 자주 쓰이는 목록 태그  (0) 2021.03.26
728x90

1. CSS style 지정하는 방법  

: head 태그 사이에 style 태그를 작성함

 body에는 태그 내용을 작성한다.

 

 

2. 기본 문법 
p { color : red; padding : 5px}


p= 선택자 color = 속성 red =속성값 padding =속성 5px; = 속성값
(속성과 속성값이 같으면 생략 가능함)

 

body에서 작성된 태그만 스타일 지정이 가능하다.

아래 작성된 div, h1, h3 에 대한 스타일을 지정하였다.

3. 예시화면

 

728x90
저작자표시 (새창열림)

'HTML5&CSS' 카테고리의 다른 글

HTML : label 태그 속성  (0) 2022.05.12
유용한 이미지 무료 사이트 정리(가입없음!)  (0) 2021.03.31
html5 유용한 사이트 정리  (0) 2021.03.29
html5 : <video> <audio> 태그 이용해서 동영상 넣기  (0) 2021.03.29
html5 : <ul> <ol> <li> 자주 쓰이는 목록 태그  (0) 2021.03.26
728x90

1. HTML 태그와 예시가 있는 사이트

 

www.w3schools.com/default.asp

 

 

W3Schools Online Web Tutorials

HTML Example:

This is a heading

This is a paragraph.

Try it Yourself » CSS Example: body {   background-color: lightblue; } h1 {   color: white;   text-align: ce

 

www.w3schools.com

 

 

W3Schools Online Web Tutorials

HTML Example:

This is a heading

This is a paragraph.

Try it Yourself » CSS Example: body {   background-color: lightblue; } h1 {   color: white;   text-align: ce

 

www.w3schools.com

 

 

 

2. HTML 컬러 코드 확인 가능한 사이트

html-color-codes.info/Korean/

 

HTML 컬러 코드

HTML 컬러 차트 사각형 모양의 컬러버튼을 클릭하여 HTML 컬러 코드를 찾으세요. HTML 컬러 코드 이론 "이 이상한 기호와 숫자와의 조합이 어떤 의미가 있을까?" 하고 궁금하신가요. 그 답은 "예" 입

html-color-codes.info

 

 

3. CSS와 스타일시트를 포함한 HTML, XML 문법 검사가 가능한 곳

jigsaw.w3.org/css-validator/#validate_by_upload

 

W3C CSS 검사 서비스

파일 업로드를 통한 검사 직접 입력을 통한 검사

jigsaw.w3.org

 

728x90
저작자표시 (새창열림)

'HTML5&CSS' 카테고리의 다른 글

유용한 이미지 무료 사이트 정리(가입없음!)  (0) 2021.03.31
html&css : css style 지정하는 방법, 기본 문법  (0) 2021.03.31
html5 : <video> <audio> 태그 이용해서 동영상 넣기  (0) 2021.03.29
html5 : <ul> <ol> <li> 자주 쓰이는 목록 태그  (0) 2021.03.26
css : border, margin, padding 정리  (0) 2021.03.24
728x90

<img>태그 뿐 아니라 <video>와 <audio>를 이용해서 동영상을 넣을 수 있다.

 

video 파일 삽입태그
<video arc="파일경로></video>

재생 버튼
<video src="파일경로" controls></video>

자동재생
<video src="파일경로" autoplay></video>
자동재생 반복
<video src="파일경로" loop autoplay></video> 

(요즘은 잘 안사용한다고 함.........)

 

audio 태그는 video로 태그만 바꿔서 적용하면 된다.

 

 

적용화면 

728x90
저작자표시 (새창열림)

'HTML5&CSS' 카테고리의 다른 글

html&css : css style 지정하는 방법, 기본 문법  (0) 2021.03.31
html5 유용한 사이트 정리  (0) 2021.03.29
html5 : <ul> <ol> <li> 자주 쓰이는 목록 태그  (0) 2021.03.26
css : border, margin, padding 정리  (0) 2021.03.24
html 5 : <input> 입력태그, 자주 쓰이는 속성 정리  (0) 2021.03.24
728x90

1. 목록을 만드는 태그 정리

 

목록을 만드는 태그로는 ul 과 ol이  쓰인다.

 

<ul>  순서가 없는 리스트를 만들 때 사용한다.
<ol>  순서가 있는 리스트를 만들 때 사용한다.
<li> 태그는 list를 의미한다
독립적으로 사용이 불가하여 <ul>  <ol> 태그와 함께 사용한다.

 

2. 예시

 

순서가 있는 목록과 순서가 없는 목록을 만들어봣다.

3. 적용 화면

 

아래와 같이 목록이 생긴다. 스타일은 자동으로 지정되어서 생긴다(아래 없애는 방법이 있음)

ul은 자동으로 번호가 만들어 진다.

 

** 팁

 

CSS를 통해서 리스트에 스타일이 생기는 것을 없앨 수 있다.

head 태그에 list-style none을 설정하면 된다!

 

 

head 태그에 list-style none을 설정 시 아래와 같이 스타일이 없어진다.

728x90
저작자표시 (새창열림)

'HTML5&CSS' 카테고리의 다른 글

html5 유용한 사이트 정리  (0) 2021.03.29
html5 : <video> <audio> 태그 이용해서 동영상 넣기  (0) 2021.03.29
css : border, margin, padding 정리  (0) 2021.03.24
html 5 : <input> 입력태그, 자주 쓰이는 속성 정리  (0) 2021.03.24
html5 : <hn> <p> <br> <b> <i> <img> <a> / 자주 쓰는 기본 태그  (0) 2021.02.25
728x90

border, margin, padding는 css에서 콘텐츠에 여백을 주는 요소이다.

 

보더(border) : 콘텐츠의 테두리
패딩(padding) : 콘텐츠와 테두리 사이
-> 여기까지가 background
마진(margin) : 테두리를 기준으로 바깥으로 존재하는 여백

 

 

728x90
저작자표시 (새창열림)

'HTML5&CSS' 카테고리의 다른 글

html5 : <video> <audio> 태그 이용해서 동영상 넣기  (0) 2021.03.29
html5 : <ul> <ol> <li> 자주 쓰이는 목록 태그  (0) 2021.03.26
html 5 : <input> 입력태그, 자주 쓰이는 속성 정리  (0) 2021.03.24
html5 : <hn> <p> <br> <b> <i> <img> <a> / 자주 쓰는 기본 태그  (0) 2021.02.25
html5 : html,head,body,img,p / 기본 HTML5 문서 만들기  (0) 2021.02.24
728x90

input 태그는 주로 form 태그 안에 많이 쓰인다.

속성들이 많지만 아래 자주 쓰이는 속성들을 정리했다.

 

 

1. 자주 쓰이는 속성

<input type="text"> : 기본 텍스트 입력 상자

<input type="image"> : 기본 이미지 입력 상자

<input type="file"> : 기본 파일 입력 상자

<input type="button"> : 버튼

<input type="checkbox"> : 체크박스

<input type="password"> : 패스워드 입력상자 

<input type="submit"> : 폼 전송 버튼

 

 

 

2. input 태그의 사용 예시

아래 세가지 태그를 이용해 사이트 회원가입 화면을 만들 수 있다.

 

<input type="text"> 

<input type="password">

<input type="submit"> 

 

* placeholder 태그는 박스 안에 텍스트를 넣을 수 있는 태그이다.

 

 

적용하면 아래와 같은 화면이 나온다.

728x90
저작자표시 (새창열림)

'HTML5&CSS' 카테고리의 다른 글

html5 : <video> <audio> 태그 이용해서 동영상 넣기  (0) 2021.03.29
html5 : <ul> <ol> <li> 자주 쓰이는 목록 태그  (0) 2021.03.26
css : border, margin, padding 정리  (0) 2021.03.24
html5 : <hn> <p> <br> <b> <i> <img> <a> / 자주 쓰는 기본 태그  (0) 2021.02.25
html5 : html,head,body,img,p / 기본 HTML5 문서 만들기  (0) 2021.02.24
728x90

자주 쓰는 기본 태그를 알아보자

 

<hn> : 제목을 입력하는 태그, h1 h2와 같이 순서대로 지정해서 태그를 쓸 수 있다.

<p> : 일반 텍스트에 사용하는 태그이다. 가장 많이 사용하는 태그 중 하나이다.

텍스트를 입력하면 앞뒤로 빈줄이 생기면서 텍스트 단락이 만들어진다.

<br> : br도 자주 쓰는 태그로 줄바꿈 태그이다. 닫는 태그는 없다.

<b> : 텍스트를 진하게 해준다.

<i> : 텍스트를 이탤릭체로 표기 해준다.

<img> : img를 삽입할 수 있다.

주요 속성은 src, alt, width, height, loading이다.
-src : 이미지의 경로 (이전 게시글에서 사용했다)
-alt : 이미지를 표시할 수 없을 때 출력할 내용
-width : 이미지의 가로 크기
-height : 이미지의 세로 크기
-loading : 이미지 로딩 방식

 

<a> : 웹 문서나 웹 사이트를 연결할 수 있다.

<a href="웹사이트 주소"> 형식으로 입력하면 된다.

 

그리고 주석을 붙일 수 있다. 주석은 웹에서는 보이지 않는다

<!--주석의 내용--> 와 같은 형식으로 입력하면 된다.

 

이를 이용해 실습해보자.

 

1. h1으로 제목, p1으로 텍스트, img로 이미지를 삽입한다.

2. a href를 통해 링크를 삽입

링크를 보여주는 h2 제목 입력

a href에서 노출할 링크를 입력한다.

</a>로 끝맺음도 반드시 해야한다. 안하면 하이퍼링크가 끝나지 않는다...

p로 텍스트를 달아준다.

 

 

3. 줄바꿈, 강조, 이탤릭체를 연습해보았다.

끝!

 

저장 후 html 페이지를 열어보니,

이미지 하이퍼링크 모두 맞게 들어가 있고 주석도 노출되지 않고 있다.

h1, h2 태그는 자동으로 글씨 크기가 다르게 들어가는 것 같다.

 

728x90
저작자표시 (새창열림)

'HTML5&CSS' 카테고리의 다른 글

html5 : <video> <audio> 태그 이용해서 동영상 넣기  (0) 2021.03.29
html5 : <ul> <ol> <li> 자주 쓰이는 목록 태그  (0) 2021.03.26
css : border, margin, padding 정리  (0) 2021.03.24
html 5 : <input> 입력태그, 자주 쓰이는 속성 정리  (0) 2021.03.24
html5 : html,head,body,img,p / 기본 HTML5 문서 만들기  (0) 2021.02.24
728x90

HTML5의 기본 구조를 알아보자

5가지 태그만 알면 기본 문서를 만들 수 있다.

 

<html> 태그 : html문서의 시작과 끝을 알린다.

<head> : 웹 브라우저 화면에서는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들을 표기한다.

문서에서 사용할 외부 파일 링크도 노출한다

- 주로 쓰이는 태그 :

<title>  문서 제목을 입력

<meta> 문자 인코딩 및 문서 키워드, 요약 정보를 입력

<body> : 문서의 몸통, 실제 브라우저에 보이는 정보를 입력

<img> : 이미지를 삽입하는 태그, 이번엔 src 속성을 이용할 것이다.

 

그럼 이제 HTML의 기본 문서를 만들어보자

 

1. html 문서 타입 지정 및 head와 body 태그 만들기

<! doctype html>로 문서 형식을 지정하고 head와 body를 만들어 주었다.

이때 html태그 먼저 입력 후, 탭으로 들여 쓰고 head와 body를 입력해야 한다.

 

2. title 만들기

head에서 탭을 눌러 인코딩 방식을 입력한다

<meta charset="utf-8">은 한글과 영어를 모두 지원하는 인코딩 방식이다.

제일 많이 쓰니까 쓰겠지 모를 땐 외우자

 

인코딩 방식 입력 후 title 지정한다

나의 기분을 표현하였다.

 

3. body에 웹브라우저에 표시할 이미지와 텍스트 입력

body에 이미지 src 태그를 통해 사용할 이미지 파일 제목과. 형식을 입력한다

이때 html5 저장하는 문서와 같! 은! 폴더에 이미지가 있어야 제대로 이미지가 로딩된다.

 

텍스트는 p 태그를 이용해 표시할 텍스트를 입력한다.

 

4. 저장 후 확인하기

html 문서로 저장 후 폴더에서 해당 문서를 열면 적용된 화면이 나온다

이렇게 다섯 가지 태그를 활용하여 기본적인 문서를 만들어 보았다.

728x90
저작자표시 (새창열림)

'HTML5&CSS' 카테고리의 다른 글

html5 : <video> <audio> 태그 이용해서 동영상 넣기  (0) 2021.03.29
html5 : <ul> <ol> <li> 자주 쓰이는 목록 태그  (0) 2021.03.26
css : border, margin, padding 정리  (0) 2021.03.24
html 5 : <input> 입력태그, 자주 쓰이는 속성 정리  (0) 2021.03.24
html5 : <hn> <p> <br> <b> <i> <img> <a> / 자주 쓰는 기본 태그  (0) 2021.02.25

+ Recent posts

티스토리툴바