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

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

<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

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

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문서가 있는 폴더에 저장 합니다.

그리고 에디터를 키고 <img> 링크를 사용해야합니다. 하지만 <img>를 사용하려면 

이미지 주소가 있어야합니다 . 우리는 img 태그의 속성 src를 사용할것입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<img src="HTMLI.png">
	<h1> HTML 기초배우기 </h1>


</body>
</html>

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

이미지가 너무 크게 출력 한것을 확인 할수있습니다. 이 이미지크기를 수정을해야하는데

img 태그 속성을 중 크기를 설정해보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<img src="HTMLI.png" width="400" height="150">
	<h1> HTML 기초배우기 </h1>


</body>
</html>

이미지가 작은것을 확인 할 수 있습니다.

그리고 다음 태그는 다른문서로 갈수 있는 태그는 <a> 태그입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
	<img src="HTMLI.png" width="400" height="150">
	<h1> HTML 기초배우기 </h1>

<a href="https://ko.wikipedia.org/wiki/HTML"> HTML바로가기</a>

</body>
</html>

HTML바로가기 텍스트에 링크를 걸어 둘수있습니다.   

저작자표시

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

+ Recent posts

티스토리툴바