day 21 실습 - HTML 태그

basic/HTML, CSS

day 21 실습 - HTML 태그

못지(Motji) 2021. 5. 24. 22:50

HTML 기본구조

<!doctype html>
<html lang="ko">
    <head>
       <meta charest="UTF-8" />
        <title>탭제목</title>
        
    </head>
    <body>
        html 기본구조
        <h1>html 기본구조</h1>
        <h3>기본구우조</h3>
    </body
</html>

🔎 미리보기

💬

doctype 선언은 태그는 아니지만 HTML의 버전인 무엇인지 알려주는 것으로 맨처음에 적어줘야함

<html>은 웹문서의 시작과 끝을 알려주는 태그

<head> 화면에는 표시되지 않지만 브라우저가 알고 있어야할 정보를 안에 써줌

<body> 브라우저에 표시될 내용

HTML 텍스트 태그

<!doctype html>
<html>
    <head>
       <title>html02</title>
        <body>
            <h1>안녕하세요</h1>
            <h2>안녕하세요</h2>
            <h3>안녕하세요</h3>
            <h4>안녕하세요</h4>
            <h5>안녕하세요</h5>
            <h6>안녕하세요</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam accusamus necessitatibus, tenetur, veritatis ea eaque porro optio laborum magni ducimus voluptatem libero nemo eius iusto aperiam ex recusandae illo consequatur.</p>
            <p>Lorem ipsum dolor sit amet, <span><!--줄바꿈 없이 묶어주기-->consectetur adipisicing <br />elit. Quibusdam accusamus necessitatibus, </span>tenetur, veritatis ea eaque porro optio laborum magni ducimus voluptatem libero nemo eius iusto aperiam ex recusandae illo consequatur.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam accusamus necessitatibus, tenetur, veritatis ea eaque porro optio laborum magni ducimus voluptatem libero nemo <br /> eius iusto aperiam ex recusandae illo consequatur.</p>
            <hr />
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam accusamus necessitatibus, tenetur, veritatis ea eaque porro optio laborum magni ducimus voluptatem libero nemo eius iusto aperiam ex recusandae illo consequatur.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam accusamus necessitatibus, tenetur, veritatis ea eaque porro optio laborum magni ducimus <u>voluptatem</u> libero nemo eius iusto aperiam ex recusandae illo consequatur.</p>
            
        </body>
    </head>
</html>

🔎 미리보기

💬

Lorem 작성하고 Tep 키 누르면 임의의 텍스트가 작성됩니다.

<h1~6> 제목표시를 해줌에 따라 글자크기와 간격이 달라집니다. 1이 제일 큰 제목

<p></p> 태그로 묶어주면 단락이 된다.

<span>은 줄바꿈없이 묶어준다.

<hr /> 선이 쭈우욱 생긴다.

목록 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2> 웹 개발 커리큘럼 </h2>
    <h3>u1, li</h3>
    <ul>
       <!--css에서 변경 가능 앞에 동글뱅이-->
        <li>javja</li>
        <li>html, css</li>
        <li>script</li>
        <li>jsp</li>
    </ul>
    <h3>ol, li</h3>
    <ol type="I" start="4" reversed >
    <!--기본 타입은 1 > 숫자로표시 이며 start 안에숫자를 시작번호로 지정가능
    reversed는 순서를 역순으로 바꿔줌-->
        <li>javja</li>
        <li>html, css</li>
        <li>script</li>
        <li>jsp</li>
    </ol>
</body>
</html>

🔎 미리보기

💬

ul, li 은 순서없는 목록을 만들어주고 ol, li은 순서 있는 목록을 만들어준다.

표 만드는 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table tag</title>
</head>
<body>
   <table border="1" bgcolor="yellow" width="50%" cellspacing="5" cellpadding="10">
   <!--border은 테두리 두께, bgcolor 백그라운 색(색단어나 rgb컬러 적으면 됨) 
   width은 가로폭결정, 퍼센트도 되고 픽셀도 되고-->
      <!-- cellspacing 셀과 셀간의 공간조정 
      cellpadding 글자와 셀간의 공간조정-->
       <tr>
           <td rowspan="2" valign="bottom">1행 1열</td>
           <td>1행 2열</td>
           <td>1행 3열</td>
       </tr>
       <tr heigth="100">
           <td colspan="2" align="center" >2행 2열</td>
       </tr>        
   </table> 
</body>
</html>

🔎 미리보기

💬

<tr> 행 <td>열

rowspan 열합치기

colspan 행합치기

이미지 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img tag</title>
</head>
<body>
    <h1>이미지 태그</h1>
    <h3>귀여운 야옹세상</h3>
    <img src="야옹.jpg" width="450px" />
    <img src="https://lh3.googleusercontent.com/proxy/l0cnAtJEbPzDpJ5s7qz8CdLinI8YJor_r9uQaASa9oWyJxnU2PQ6nE5KyYMDL-UdHoZ2zcz43Hul51gY7SaRkazCl1qmS4rYHNeoLlQqOwiofulsh-c" width="450px" />
    <img src="imgs/하늘.jpg" width="450px"/>
    <img src="../투야옹.jpg" width="450px" />
    <img src="../Superimgs/투야옹.jpg" width="450px" />
</body>
</html>

🔎 미리보기

💬

이미지가 같은 폴더내에 있으면 이미지명.확장자만 src안에 써주면 된다.

하위로 이동할때 "/" (슬래쉬) 사용, 상위로 이동할때 ".." (점두개) 사용

링크 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>링크</title>
</head>
<body>
   <a href="http://www.naver.com"> 네이버로 이동 </a> <br />
   <a href="http://www.naver.com" target="_blank"> 네이버 새창에서 열기 </a>
    
</body>
</html>

🔎 미리보기

💬

새창으로 열리게 하고싶으면 a 코드 안에 target="blank"를 적어주면 된다.

링크 태그 - 앵커

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a 태그</title>
</head>
<body>
   <h1>앵커 만들기</h1>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이기능을 앵커anchor라고 한다.</p>
    <ul id="menu"> <!-- id는 고유의 값-->
        <li><a href="#content1">메뉴 1</a></li>
        <li><a href="#content2">메뉴 2</a></li>
        <li><a href="#content2">메뉴 3</a></li>
    </ul>
    <h2 id="content1">내용1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolam</p>
    <p><a href="#menu">[ 메뉴로 이동 ]</a></p>
    <h2 id="content2">내용2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolam</p>
    <p><a href="#menu">[ 메뉴로 이동 ]</a></p>
    <h2 id="content3">내용3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolamLorem ipsum dolor sit amet, consectetur adipisicing elit. Facere repellat, dolorum saepe. Magni, sint, nemo. Consequatur soluta nihil, blanditiis repellendus laboriosam iste, quaerat esse, dolores cupiditate quisquam corporis culpa unde!rolam</p>
    <p><a href="#menu">[ 메뉴로 이동 ]</a></p>
</body>
</html>

🔎 미리보기

💬

앵커를 만든후 이동할위치를 #menu로 설정하여서 클릭하면 id가 menu인 곳으로 이동한게 된다.

id는 각고유가 가지는 이름값이라고 생각하면 된다. 뭐가뭔지 식별할 수 있도록 설정하는 것이다. 한국사람들이 주민등록번호를 가지고 있는것처럼.

폼 from 관련 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
   <form action="https://dandico.tistory.com/61" method="get">
       <input type="test" name="txt" />
       <input type="test" name="id" />
       <input type="submit" value="전송" />
       
   </form>
    
</body>
</html>

🔎 미리보기

전송 클릭하면 action 안에 적은 서버상의 주소(프로그램)로 이동

💬

action에서 지정한 서버로 값이 전송되어 거기서 안의 내용들을 처리하게 된다.

name을 써주는 이유는 값이 전송될때 어떤 내용인지, 무엇인지 알 수 있도록 하기 위해서다.

from 관련 태그들

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>from</title>
</head>
<body>
   <from>
       이름입력 <input type="test" name="txt" size="30" required/> <br />
       비번입력 <input type="hidden" name="hiddentag" value="서버로 넘길 값 작성"/> <br />
       <input type="password" size="30" />         <br />
       <input type="radio" name="subj" value="java"/> JAVA        <br />
       <input type="radio" name="subj" value="jsp"/> JSP         <br />
       <input type="radio" name="subj" value="spring"/> SPRING      <br />
       <!-- 서버로 넘길 value 값을 꼭 써줘야함, name을 동일하게 하면 한개만 선택해서 넘어가게됨, name이 동일하지 않으면 개별적인 radio로 봄-->
       <input type="checkbox" name="html" value="html" /> HTML <br />
       <input type="checkbox" name="css" value="css" /> CSS <br />
       <input type="checkbox" name="script" value="script" /> SCRIPT <br />
       <input type="color" name="palette" value="#0f0" />  <br />
       <input type="date" name="date" />  <br />
       <input type="month" name="date" />  <br />
       <input type="week" name="date" />  <br />
       <input type="time" name="date" />  <br />
       <input type="datetime-local" name="date" />  <br />
       <input type="submit" value="전송버튼" />  <br />
       <input type="image" src="imgs/하늘.JPG" width="200px" />  <br />
       <input type="button" value="새탭 열기" onclick="window.open()"/>  <br />
       <input type="file" />  <br />
       <input type="reset" value="다시 작성" />       
   </from>   
</body>
</html>

🔎 미리보기

이름입력

비번입력
JAVA
JSP
SPRING
HTML
CSS
SCRIPT

💬 블로그글 html로 작성해서 바로 넣어보았다.

아니 근데 <reset< 태그가 왜 실행이 안되는지..... 틀린것 없이 작성했는데 안된다..... 나중에 이유를 찾게되면 추가하겠음.... <submit>도 안되고 <button> onclick은 저장된 html에서는 실행되는데 여기선 안되네요.;;;

select - option 속성, optgroup 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select</title>
</head>
<body>
   <select name="subject">
       <option value="java"> java </option>
       <option value="html"> html </option>
       <option value="css"> css </option>
       <option value="script" selected> script </option>
       <option value="jsp"> jsp </option>
   </select>
    <select>
        <optgroup label="프론트엔드">
            <option>html</option>
            <option>css</option>
            <option selected>javascript</option>
        </optgroup>
        <optgroup label="백엔드">
            <option>java</option>
            <option>spring</option>
            <option>jsp</option>
        </optgroup>
    </select>
</body>
</html>

🔎 미리보기

💬 optgroup는 선택은 안되고 그룹으로 분류되어 보여지게 해준다.

<option> 안에 selected 적어주면 기본값으로 설정되며 아무것도 선택하지 않을시에도 이값으로 설정된것

button 태그, progress 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>textarea</title>
</head>
<body>
   <input type="button" value="전송" />
    <button onclick="window.open('https://dandico.tistory.com/57')">이벤트 클릭</button>
    <form action="https://dandico.tistory.com/">
        <button type="submit">전송</button>
        <button>
            <img src="https://tgzzmmgvheix1905536.cdn.ntruss.com/2020/07/487b1064dd1b4c2791c6b46d3f99ba91" width="300px" />
        </button>
    </form>
    <progress value="50" max="100"></progress>   
</body>
</html>

🔎 미리보기

💬 button은 텍스트는 물론 img로도 가능하다.

'basic > HTML, CSS' 카테고리의 다른 글

day 22 실습(2) - 회원가입 from 만들기 (0)	2021.05.25
day 22 실습 - CSS (0)	2021.05.25
day 22 - CSS (0)	2021.05.25
day 21 실습 (2) - HTML (이력서 양식 만들기) (0)	2021.05.24
day 21 - HTML (0)	2021.05.24

현재글day 21 실습 - HTML 태그

닉네임을 못지으니 못지가 되었ㄸr

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

못지(Motji) 개발스또리