예전 싸이월드나 홈페이지가면 그 홈페이지에서 음악이 나오는걸 경험 한적이있습니다.

저희는 그 음악이나 음성 오디오 파일을 넣을 수있는 태그를 알아보겠습니다.

<audio> </audio> 태그를 알아보겠습니다.

 

오디오 태그안에는 소스라는 태그가 하나 더들어가야 합니다.

소스태그는 오디오나 미디어 파일을 넣을 때 사용됩니다.

<source src="주소"> 소스 태그는 src로 그 파일에 주소를 가리 키고 있어야 사용가능합니다.

 

그럼 이제 html 파일을 저장 하는 파일에 .mp3 파일을 넣어 줍니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>
<audio controls>
	<source src="Beat Your Competition - Vibe Tracks.mp3" type="audio/mp3">
</audio>

</body>
</html>

 

   controls  는 비디오 재생 타입을 말해 줍니다.

<audio controls autoplay>
	<source src="Beat Your Competition - Vibe Tracks.mp3" type="audio/mp3">
</audio>

 이렇게 controls autoplay를 작성을 하면 페이지가 열리면 자동으로 재생이 됩니다.

 

<audio controls loop>
	<source src="Beat Your Competition - Vibe Tracks.mp3" type="audio/mp3">
</audio>

loop를 넣어주면 음악이 끝나면 다시 재생을 시작합니다.

그리고 type은 음악 재생파일의 타입을 작성하여야 합니다 . 

오디오 파일이 mp3면 mp3를 기재 하고 wav 파일이면 wav로 바꿔 작성해주어야합니다.

 

결과 화면은 이렇게 나옵니다.

Beat Your Competition - Vibe Tracks.mp3
6.63MB

이렇게 오디오 파일을 재생할수있게 디자인이 나왔습니다.

 

오디오파일은 저작권이 없으므로 이블로그에서 가져다 쓰셔도 됩니다.

감사합니다.

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (입력) 기초 6편  (0) 2021.04.14
HTML (박스 모델) 기초 5-2편  (0) 2021.04.12
HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09

웹사이트들 돌아 다니다 보면 로그인 창이나 입력 창을 볼수있습니다.

오늘은 입력할수있는 태그를 알아보겠습니다.

<input> 태그입니다 이태그는 다른 태그와는 다르게 </input>이라는 끝나는 태그가 없습니다.

그리고 오늘은 input 태그의 Type 들중 Text에 대해 설명을 해보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1 style="margin:30px;"> HTML 기초배우기 </h1>
	로그인<input type="Text">

</body>
</html>

 

로그인 을 타이핑 하신후에 input 태그 속성값이 있는 type 를 Text로 지정해줌니다.

 

결과값은 아래 와같이 나옵니다.

<input>태그를 이용하여 아이디와 비밀번호를 만들어 보면 결과는 이렇게 나오는데요

 

이렇게 만들기 싫고 로그인 밑에다가 비밀번호를 넣고 싶으면 여러 가지 방법이있습니다.

로그인 태그 뒤에 <br> 태그를 넣는 방법이있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>
	로그인<input type="Text"><br>
	비밀번호<input type="Text">

</body>
</html>

 

그리고 <p></p> 태그를 이용해 각각 단락을 설정해 주는 방법도있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>
<p>	로그인<input type="Text"> </p>
<p> 비밀번호<input type="Text"></p>

</body>
</html>

 

 

그리고 조금더 개발자 스럽게 <div></div> 태그를 이용하는 방법이있습니다.

저는 <div></div> 태그를 쓰는걸 추천드립니다. 이유는 조금더 위치를 조정하기 편하고 

디자인면에서와 다른 태그들을 같이 감싸주어도 용이 하다고 생각합니다 

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>
<p>	로그인<input type="Text"> </p>
<p> 비밀번호<input type="Text"></p>

</body>
</html>

 

모든 태그들을 써보시고 각자의 장단점에 맞게 사용하시면 됩니다.

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (오디오) 7편  (0) 2021.04.16
HTML (박스 모델) 기초 5-2편  (0) 2021.04.12
HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09

1편에 이어서 2편 은 박스모델 span 으로 알아보겠습니다.

<span> </span> 은 div와달리 박스모델이지만 주 은 박스모델 span 으로 알아보겠습니다.

span과 div 의 차이점은 줄바꿈의 여부입니다 .

div는 자동으로 줄바꿈이 되는 박스모델이고 span은 자동 줄바꿈이 안되어있는 박스 모델입니다.

이런 디자인을 만들수 있습니다.

저희는 이제 간단한 예제로 span이 어떻게 되어있는지 알아 보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1 style="margin:30px;"> HTML 기초배우기 </h1>

<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid black;">첫번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid blue;">세번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid red;">두번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid green;">네번째 영역</span>
</body>
</html>

1편에서 보았던 마진과 패딩값을 설정 하여 span의 박스모델을 보겠습니다 . 

결과 값은 

이렇게 나온걸 볼수 있습니다. 이렇게 span과 div를 적절히 사용해서 디자인을 하면 저희가 원하는

디자인을 얻을수있습니다.

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (오디오) 7편  (0) 2021.04.16
HTML (입력) 기초 6편  (0) 2021.04.14
HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09

저희는 이제 박스 모델에서 알아 보겠습니다. 

HTML에서의 박스 모델이란 content를 둘러싸고 있는 테두리를 말합니다.

여기서 content란 opening tag와 closing tag 사이에 존재하는 문장들을 의미합니다.

즉 <h1>content </h1> 태그안에 있는 내용을 말하는것입니다.

그러면 content를 둘러싸고 있는  박스 모델에서 대해서 알아보겠습니다.

 

박스 모델에는 content, padding, border, margin 이있습니다.

자세한 내용은 en.wikipedia.org/wiki/CSS_box_model확인하시면 됩니다.

이제 박스 모델 <div> </div>를 알아 보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>

<div>첫번째 영역</div>
<div>두번째 영역</div>
<div>세번째 영역</div>
<div>네번째 영역</div>
 

</body>
</html>

 

이렇게 작성 하고 출력결과를 보겠습니다.

이렇게 나온걸 보면 저희는 이게 박스모델인지 구별할 수 없습니다 그래서 div 태그 속성을 들어가 테두리에 선을 그어 확인 해보겠습니다.

이렇게 라인이 생겼습니다 그러면 저희는 이 박스모델의 테두리를 제어해 저 박스의 크기도 설정 할수있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1> HTML 기초배우기 </h1>

<div style="width:50px; height:50px; border:1px solid black;">첫번째 영역</div>
<div style="width:250px; height:250px; border:1px solid red;">두번째 영역</div>
<div style="width:350px; height:50px; border:1px solid blue;">세번째 영역</div>
<div style="width:250px; height:90px; border:1px solid green;">네번째 영역</div>


</body>
</html>

 

이렇게 사이즈를 적용해보겠습니다.

이렇게 나오는 걸 확인 하실수 있습니다.

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (입력) 기초 6편  (0) 2021.04.14
HTML (박스 모델) 기초 5-2편  (0) 2021.04.12
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09
HTML( 제목, 단락) 기초 1편  (0) 2021.04.08

HTML로 리스트를 표현하고 싶으면 어떻게 해야 할까요?

단순히 - , 1. 2. 이렇게 글자로 표현하는게 맞을까요?

물론 이방법도 있지만 우리는 더 HTML 스럽게 표현 하도록 배워보도록 하겠습니다.

이렇게 표현되게 작성 되어있는 태그는 <li> </li> 입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<h1> HTML 기초배우기 </h1>
	<li>서울</li>
	<li>대전</li>
	<li>대구</li>
	<li>부산</li>
	
		

</body>
</html>

 

그리고 이번엔 리스트가 여러개가 붙어있는데 이리스트를 분류를 해보겠습니다.

만약 서울, 대전이랑 대구랑 부산을 분류를 하고싶을땐 어떻게 해야할까요

그건 <ul> </ul>태그입니다.  ul 태그안에 li 태그를 각각 분류해서 넣어보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<h1> HTML 기초배우기 </h1>
	<ul>
	<li>서울</li>
	<li>대전</li>
</ul>
<ul>
	<li>대구</li>
	<li>부산</li>
</ul>


</body>
</html>

 

 

 

이렇게 태그를 분리할수있습니다.

그러면 1. 2. 3. 4. 를 번호를 붙일수 있는 리스트는 어떻게 할까요

바로 <ol> </ol> 태그입니다 ul태그와 사용법이 같습니다. 대구 부산만 ol 태그를 묶어보도록하겠습니다.

이렇게 번호가 붙어있는걸 확인 할수있습니다. 

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (박스 모델) 기초 5-2편  (0) 2021.04.12
HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09
HTML( 제목, 단락) 기초 1편  (0) 2021.04.08
HTML 의 구조  (0) 2021.04.07

HTML 의 폰트를 사용하는 방법을 알아보겠습니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<h1> HTML 기초배우기 </h1>
    <strong>줄굵게</storng>
    <i> 기울기</i>
    <u>밑줄</u>
    <br>줄<br>바<br>꿈
    
</body>
</html>

<storng> </strong> 글자 굵기를 나타내는 태그입니다.

<i> </i> 글자 기울기를 나타내는 태그입니다.

<u> </u> 밑줄을 나타내는 태그입니다.

<br> 줄을 바꿀수 있는 태그입니다.

결과는 이렇게 나옵니다.

 

 

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML( 제목, 단락) 기초 1편  (0) 2021.04.08
HTML 의 구조  (0) 2021.04.07
HTML소개 및 HTML Editor 설치  (0) 2021.04.07

웹페이지를 처음들어가보면 본문 제목과 본문의 글은 우리가 보는 정보문서의 필요한 요소들입니다.

오늘은 제목 태그와 단락 태그의 대해서 알아보겠습니다.

생성해둔 폴더의 우클릭후 newfile을 눌른후 파일이름.html 을작성후 생성합니다

 

<!DOCTYPE HTML>
<html>

<head>
</head>

<body>
	<h1> HTML 기초배우기 </h1>
    <p>
    하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML, 문화어: 초본문표식달기언어, 
    하이퍼본문표식달기언어)는 웹 페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, 단락,
    목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 
    인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 
  	</p>
  </body>

</html>

<h1> </h1> 제목을 나타내는 태그입니다. 이태그들은 h1~ h8 까지 존재합니다.

 

<p> </p> 단락을 나타내는 태그입니다 이태그들은 글자를 줄바꿈하지 않아도 본문의 글을 알맞게 나눠주는 역할을 합니다.

이파일을 저장하고 파일을 실행 시키면 웹브라우저로 열리는걸 알수있습니다.

 

 

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09
HTML 의 구조  (0) 2021.04.07
HTML소개 및 HTML Editor 설치  (0) 2021.04.07

HTML을 배우려면 HTML의 문서 구조를 먼저 알고 시작해야 합니다.

<> </> 여기있는 특수기호들은 마크업 언어 태그를 나타내는 기호에 해당됩니다.

<!DOCTYPE HTML>
<html>
  <head>

  </head>
  <body>
  
  </body>
</html>

 

1. <!DOCYPE HTML>

첫번째로 <!DOCTYPE HTML> 이라는 것을 알아보도록 하겠습니다

!DOCTYPE HTML 에서 DOCTYPE 이란 Document Type Definition 의 줄인말로 문서타입 정의 라는 말입니다.

그렇다면 이문서는 HTML의 문서타입으로 정의 되있다고 처음에 알려줄수 있게 되는것입니다.

처음에 브라우저는 이 !DOCTYPE HTML을 보고 어떤언어로 이문서가 작성되어있는지 확인 하게 됩니다.

 

2. <html> </html>

현재 문서웹페이지의 시작과 끝을 알리는 태그입니다.

 

3. <head> </head> 

현재 웹페이지의 메타 데이터를 입력하는 태그입니다.

문자열 배우려면 HTML의 문서 구조를 먼저 알고 시작해야 합니다.

 

<> </> 여기있는 특수기호들은 마크업 언어 태그를 나타내는 기호에 해당됩니다.

 

<!DOCTYPE HTML>

<html>

  <head>

 

  </head>

  <body>

  

  </body>

</html>

1. <!DOCYPE HTML>

 

첫번째로 <!DOCTYPE HTML> 이라는 것을 알아보도록 하겠습니다

!DOCTYPE HTML 에서 DOCTYPE 이란 Document Type Definition 의 줄인말로 문서타입 정의 라는 말입니다.

그렇다면 이문서는 HTML의 문서타입으로 정의 되있다고 처음에 알려줄수 있게 되는것입니다.

처음에 브라우저는 이 !DOCTYPE HTML을 보고 어떤언어로 이문서가 작성되어있는지 확인 하게 됩니다.

 

2. <html> </html>

현재 문서웹페이지의 시작과 끝을 알리는 태그입니다.

 

3. <head> </head> 

현재 웹페이지의 메타 데이터를 입력하는 태그입니다.

문자열집합, 웹페이지의 제목 등을 표시하는 태그를 작성하는 곳입니다 . 

 

4. <body> </body>

 

우리가 실직적으로 웹페이지를 구현하는 공간입니다 . 

여러개의 태그들을 사용하여 우리가 지금까지 보았던 사이트들을 만들수있습니다.

 

 

저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML (박스 모델) 기초 5-1편  (0) 2021.04.11
HTML (리스트 ) 기초 3편  (0) 2021.04.10
HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편  (0) 2021.04.09
HTML( 제목, 단락) 기초 1편  (0) 2021.04.08
HTML소개 및 HTML Editor 설치  (0) 2021.04.07

+ Recent posts

티스토리툴바