반응형
반응형

메타 태그는 HTML 태그중 하나로 문서 자체의 추가적인 정보를 주는 태그입니다

어떤 내용을 담고 있으며 키워드는 무엇이며 default charset은 어떤 것을 사용하는지 등의 정보를 담고 있는 태그입니다

 

기본적으로 활용하는 것과 대표적인 것들을 알아보겠습니다

 

📝viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모바일 디바이스 넓이에서는 1.0 (100%)으로 비율을 맞춘다는 것이다

 

 

기본HTML 화면

 

 

<좌> viewport 적용 (모바일) | <우> viewport 미적용 (모바일)

 

📝charset

<meta charset="EUC-KR">

 EUC-KR로 설정한 후 서버로 기동 안 하고 파일로 HTML파일을 open한 경우 HTML페이지가 EUC-KR로 열리게 되어 글자가 깨지게 된다 (윈도우에서 작성한 글자들은 UTF-8로 작성되었기 때문에 EUC-KR로 읽어버리면 깨지게 되어버린다) → 물론 서버로 기동하는 경우 서버의 charset이 우선순위가 높다

 

 

📝검색엔진

<!-- 검색 엔진에 의해 검색되는 단어를 지정 -->
<meta name="Keywords" content="Web, html, 웹 표준" />

<!-- 검색 결과에 표시되는 문자를 지정 -->
<meta name="Description" content="Web, html, 웹 표준" />

<!-- 검색 로봇 제어 -->
<meta name="Robots" content="noindex, nofollow" />

그 외에 저작권자 최종 수정일 위치 홈페이지 주제 등에 대한 걸 설정할 수 있다

 

마우스 오버시 관련 툴바, 캐시 되지 않도록 지정 등을 할 수 있지만 이거는 IE쪽에서만 동작 가능성이 높기 때문에 따로 기

능을 만들어서 사용하는게 옳다

 

 

 

🔗 참고 및 출처

https://webclub.tistory.com/354

반응형

'[HTML && CSS] > [HTML]' 카테고리의 다른 글

[HTML] 시멘틱태그  (0) 2021.06.26
[HTML] select 태그, iframe 태그, button vs input  (0) 2021.06.21
[HTML] input태그  (0) 2021.06.21
[HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td)  (0) 2021.06.21
[HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그  (0) 2021.06.21
반응형

시멘틱태그를 왜 쓰냐면 다른 사람이 작업할 때 보기 쉽고

내가 유지보수할 때 하기 쉬우라고 만들어놓은 거라고 생각하시면됩니다.

📝HTML5 <section> 태그

문서에서 특정 구역을 나타낼때 쓰입니다.

 

📝HTML5 <article> 태그

말 그대로 기사에 관련된 거라든가 그와 유사한걸 나타날때 쓰입니다.

  1. 포럼관련 포스트
  2. 블로그 포스트
  3. 뉴스기사

 

📝HTML5 <header> 태그

말 그대로 헤더 위에 부분을 가르킵니다. 어떤 영역안에 헤더가 또 있을 수도 있습니다.

 

📝HTML5 <footer>태그

말 그대로 푸터 밑에 부분을 가르킵니다. 어떤 영역안에 푸터가 또 있을 수도 있습니다.

 

📝HTML5 <nav> 태그

navigationBar를 의미합니다. 어떤 영역안에 nav가 또 있을 수도 있습니다.

 

📝HTML5 <aside> 태그

사이드바와 같은 걸 의미합니다. 어떤 영역안에 aside가 또 있을 수도 있습니다.

 

📝HTML5 <main> 태그

문서의 주요 본문 내용이 들어갑니다. 어떤 영역안에 main이 또 있을 수도 있습니다.

 

 

그 외에 것들 입니다. 제가 자주 쓰는 것들 7가지를 소개했습니다.

<article> 기사를 정의
<aside> 주요페이지의 컨텐츠에서 분리될 정보를 정의
<details> 보이거나 숨길 수 있는 추가적인 정보
<figcaption> <figure>요소에 캡션정의
<figure> 일러스트나,다이어그램, 사진, 코드등과 같이 독립적인 컨텐츠 정의
<footer> 문서의 하단영역
<header> 문서의 상단영역
<main> 문서의 주요본문내용
<mark> 중요표시된 텍스트
<nav> 메뉴링크 영역
<section> 문서의 특정 구역
<summary> <detail>의 제목부분
<time> 날짜와 시간을 정의

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
        *{
            border-color:black;
            margin:5px;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div>
        안녕
    </div>
    <header>
        안녕
    </header>
    <article>
        안녕
    </article>
    <aside>
        안녕
    </aside>
    <nav>
        안녕
    </nav>
    <main>
        안녕
    </main>
    <footer>
        안녕
    </footer>
    <br>
    <header>
        안녕
    </header>
    <article>
        안녕
    </article>
    <aside>
        안녕
    </aside>
    <nav>
        안녕
    </nav>
    <main>
        안녕
    </main>
    <footer>
        안녕
    </footer>
    
</body>
</html>

이걸 보시면 모두 여러번 사용이 가능하며 div와 동일한형태를 가지는 것을 알 수 있습니다.

반응형

'[HTML && CSS] > [HTML]' 카테고리의 다른 글

[HTML] <Meta> 태그  (0) 2023.12.10
[HTML] select 태그, iframe 태그, button vs input  (0) 2021.06.21
[HTML] input태그  (0) 2021.06.21
[HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td)  (0) 2021.06.21
[HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그  (0) 2021.06.21
반응형

📝select 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Document</title>
</head>
<body>
<h3>오늘 점심은?</h3>
<select>
    <option>짜장면</option>
    <option>짬뽕</option>
</select>
</body>
</html>

 

📝iframe 태그

iframe은 모듈화된 페이지를 하나로 뭉치는 것입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
        div{
            border-color:black;
            border-style:solid;
        }
    </style>
</head>
<body>
    <div class ="container">
        <iframe src ="TopBanner.html" height="400px"; width ="500px" scrolling="no" ></iframe>
    </div>
</body>
</html>
  • height
    • 높이입니다.
  • width
    • 넓이입니다.
  • src
    • 어떤 걸 참조할지 입니다. 저는 현재 같은 폴더에 있는 TopBanner.html를 참조하기로 했습니다.
  • scrolling
    • 스크롤을 보이게할거인지 아닐지입니다. 위에 코드블럭처럼 스크롤바가 default값으로 생깁니다.

 

📝button vs input

button의 경우 디자인적인 관점에서 input 요소와 달리 매우 자유롭다. 일반적인 요소들을 디자인하는 모든 것들을 적용할 수 있어 배경으로 이미지를 넣을 수도 있다. <button> 과 </button> 사이에 다른 태그들을 삽입할 수도 있다. 

최근에는 각종 라이브러리에서 button 요소들에 대한 꾸밈을 적용한 CSS를 배포하기에 간단히 클래스명을 이용해 이를 적용할 수도 있다.

반응형

'[HTML && CSS] > [HTML]' 카테고리의 다른 글

[HTML] <Meta> 태그  (0) 2023.12.10
[HTML] 시멘틱태그  (0) 2021.06.26
[HTML] input태그  (0) 2021.06.21
[HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td)  (0) 2021.06.21
[HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그  (0) 2021.06.21
반응형

input 태그는 진짜 많이 씁니다. 이번엔 한번에 다 제가 아는 거 올려봤습니다. 이번에 기니까 코드까지 같이 올려드립니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld!</title>
</head>
<body>
    <fieldset>
        <legend> 이필드의 제목 </legend>
        <foam action = "http://.....">
        <pre>
          <input type = "text">( 글을 쓸 수 있다. ) 
          <input type = "password"> ( **** 암호화표시 )
          <input type = "button" value = "버튼"> (버튼)
          <input type = "submit" value = "전송"> （ foam 태그에 연결 시키는 버튼 )
          <input type = "reset"> : (　원래대로 되돌리는 버튼　）
          <input type = "image" src ="벽지.jpg" width ="20px"> ( 이미지 표시 클릭 가능 )
          <input type = "checkbox" value ="1"> ( 체크 박스 ) <input type = "checkbox" value="2" checked> ( 체크 박스 2)
          <input type = "radio"> 라디오버튼1<input type ="radio"> 라디오버튼2 ( 해제 불가능 동그라미 체크 박스 )
          <input type = "month"> ( 년 , 월 )
          <input type = "week"> ( 몇 주 , 년 )
          <input type = "date"> ( 년 , 월 , 일 )
          <input type = "time"> ( 시각 )
          <input type = "datetime-local"> ( 연도 , 월일 , 시각 )
          <input type = "color"> ( 색깔을 정할 수 있다. )
          <input type = "email"> ( email 형식인지 확인해줌 )
          <input type = "url"> ( url 형식인지 확인해줌 )
          <input type = "tel"> ( 전화번호 형식인지 확인해줌 )
          <input type = "serach"> ( 검색 키워드 )
          <input type = "file"> ( 파일 업로드 버튼 )
          <input type = "number">  (숫자만 입력가능)
          <input type = "range" min = "10.0" max = "30.0" list="epype"> 30 df
          ( 30df 라는게 적혀있고 게이지 바로 10 ~ 30 까지이다 )
          <datalist id = "epype"> ( input range 랑 같이 쓰인다 )
              <option value ="12" label = "low"> ( 12 일 때 표시선 하나 )
              <option value ="20" label = "Medium"> ( 20 일 때 표시선 하나 )
              <option value ="28" label = "High"> ( 28 일 때 표시선 하나 )
          </datalist>
          <input type="text" list="countries">
			<datalist id="countries">
				<option value="가나">
				<option value="스위스">
				<option value="브라질">
			</datalist> (입력도 가능하고 선택도 가능하다)
          </pre>
        </foam>
      </fieldset>
        


</body>
</html>

 

반응형

'[HTML && CSS] > [HTML]' 카테고리의 다른 글

[HTML] 시멘틱태그  (0) 2021.06.26
[HTML] select 태그, iframe 태그, button vs input  (0) 2021.06.21
[HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td)  (0) 2021.06.21
[HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그  (0) 2021.06.21
[HTML] div태그, span태그 (블록태그 , 인라인태그)  (0) 2021.06.21
반응형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border='1'>
        <thead>
            <tr>
                <th>출장비 내역</th>
                <th>금액</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>교통비</td>
                <td>45000</td>
            </tr>
        </tbody>
            <tr>
                <td>총 합계</td>
                <td>103000</td>
            </tr>
        </tfoot>
    </table>
    
</body>
</html>

 

table, thead, tfoot

<table>로 시작하고 </table>로 끝납니다

<thead>란 표의 가장 위에를 의미합니다. 

<thead>에 포함되는 <tr>이 행이 되고 <th>열이 됩니다.

<tr>이 1개이고 <th>가 2개이니 1행 2열이 되는 것이죠

 

<tfoot> 가장 마지막 줄을 의미합니다.

<tfoot> 의 경우는 <tr>이 행이 되고 <td>가 열이 됩니다.

 

<tbody>는 <thead>와 <tfoot>을 제외한 나머지 부분을 의미합니다.

<tbody>의 경우 <tr>이 행이 되고 <td>가 열이 됩니다.

 

<thead> <tbody> <tfoot>의 경우 안 써도 결과 무방하지만 나중에 부트스트랩이라는 걸 쓰면 구분해서 써야합니다. 그리고 여러 태그중에 어디서 부터 헤드이고 바디이고 푸터인지 알아보기도 쉬워지죠

 

 

반응형

'[HTML && CSS] > [HTML]' 카테고리의 다른 글

[HTML] select 태그, iframe 태그, button vs input  (0) 2021.06.21
[HTML] input태그  (0) 2021.06.21
[HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그  (0) 2021.06.21
[HTML] div태그, span태그 (블록태그 , 인라인태그)  (0) 2021.06.21
[HTML] 텍스트 태그 <b>,<strong>,<i>,<del>,<ins>,<mark>,<sup>,<sub>,<small> [진하게, 강조, 이탤릭, 취소선, 밑줄, 하이라이팅, 윗첨자, 아랫첨자]  (0) 2021.06.21
반응형

📝ol 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Document</title>
</head>
<body>
<h3>라면 끓이는 방법</h3>
<ol type="A">
    <li>물을 끓인다</li>
    <li>라면과 스프를 넣는다</li>
</ol>
</body>
</html>

사진으로 이해하시면 편합니다.

 

📝ul 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Document</title>
</head>
<body>
<h3>먹고 싶은 음식</h3>
<ul>
    <li>감자탕</li>
    <li>피자</li>
</ul>
</body>
</html>

ol태그와 다른 점은 마커 타입을 정할 수 없습니다. 하지만li을 쓴다는 공통점이 있습니다.

 

📝dl, dt, dd 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Document</title>
</head>
<body>
<h3>웹 브라우저 종류</h3>
<dl>
    <dt>Internet Explorer</dt>
    <dd>
        마이크로소프트에서 만든 브라우저로
        현재 시장에서 가장 많이 사용한다.
    </dd>
</dl>

</body>
</html>

사진으로 보시는 거와 같이 용어 설명과 같은 구조에서 자주 쓰입니다. <dl>  로 감싸주고, <dt>  는 용어이름, <dd> 세부내용입니다.

반응형

'[HTML && CSS] > [HTML]' 카테고리의 다른 글

[HTML] input태그  (0) 2021.06.21
[HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td)  (0) 2021.06.21
[HTML] div태그, span태그 (블록태그 , 인라인태그)  (0) 2021.06.21
[HTML] 텍스트 태그 <b>,<strong>,<i>,<del>,<ins>,<mark>,<sup>,<sub>,<small> [진하게, 강조, 이탤릭, 취소선, 밑줄, 하이라이팅, 윗첨자, 아랫첨자]  (0) 2021.06.21
[HTML] 특수기호 사용법  (0) 2021.06.21
반응형

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Document</title>
</head>
<style>
div {
    background-color: skyblue; 
    padding: 20px;
}

span {
    color:red;
}
</style>
<body>
<div>
    우리는 반드시<span>성공</span>한다
</div>
</body>
</html>

📝Div

div의 태그의 경우 진짜 많이 쓰이는 태그입니다. 네모안에 글씨나 이미지를 넣거나 하죠 항상 새 줄에서 시작하여 왼쪽에서 오른쪽으로 페이지의 전체 너비를 차지합니다. 이러한 걸 블록태그라고 합니다.

 

📝Span

span 태그의 경우 새줄에서 시작하지 않고 페이지의 전체 너비를 차지하지 않고 필요한 만큼만 너비를 차지합니다 인라인태그라고 합니다. 그냥 사진으로 이해하시는게 더 편하실 겁니다.

반응형

'[HTML && CSS] > [HTML]' 카테고리의 다른 글

[HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td)  (0) 2021.06.21
[HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그  (0) 2021.06.21
[HTML] 텍스트 태그 <b>,<strong>,<i>,<del>,<ins>,<mark>,<sup>,<sub>,<small> [진하게, 강조, 이탤릭, 취소선, 밑줄, 하이라이팅, 윗첨자, 아랫첨자]  (0) 2021.06.21
[HTML] 특수기호 사용법  (0) 2021.06.21
[HTML] h 태그, img 태그, p 태그, hr 태그, br 태그, pre 태그 [제목, 부제목, 이미지, 단락 나누기, 선 그리기, 줄바꿈, 자유로운 텍스트 형식]  (0) 2021.06.21
반응형

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Document</title>
</head>
<body>
<pre>
<b>진하게</b>
<strong>중요한</strong>
<em>강조</em>
<i>이탤릭으로 강조</i>
<b><i>진하게 이탤릭으로 강조</i></b>
보통 문자<small>한 단계 작은 문자</small>
<del>삭제</del>
<ins>추가</ins>
보통문자<sup>윗첨자</sup>
보통문자<sub>아랫첨자</sub>
<mark>하이라이팅</mark>
</pre>
</body>
</html>

 

 

반응형

'[HTML && CSS] > [HTML]' 카테고리의 다른 글

[HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td)  (0) 2021.06.21
[HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그  (0) 2021.06.21
[HTML] div태그, span태그 (블록태그 , 인라인태그)  (0) 2021.06.21
[HTML] 특수기호 사용법  (0) 2021.06.21
[HTML] h 태그, img 태그, p 태그, hr 태그, br 태그, pre 태그 [제목, 부제목, 이미지, 단락 나누기, 선 그리기, 줄바꿈, 자유로운 텍스트 형식]  (0) 2021.06.21
반응형

html의 경우 <, > ," , ' 의 경우 등 기본 태그라든가 문법같은 곳에 쓰이기 때문에 이걸 쓰려면 위와같이 코드표현으로 해야합니다.

 

 

 

 

 

반응형

'[HTML && CSS] > [HTML]' 카테고리의 다른 글

[HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td)  (0) 2021.06.21
[HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그  (0) 2021.06.21
[HTML] div태그, span태그 (블록태그 , 인라인태그)  (0) 2021.06.21
[HTML] 텍스트 태그 <b>,<strong>,<i>,<del>,<ins>,<mark>,<sup>,<sub>,<small> [진하게, 강조, 이탤릭, 취소선, 밑줄, 하이라이팅, 윗첨자, 아랫첨자]  (0) 2021.06.21
[HTML] h 태그, img 태그, p 태그, hr 태그, br 태그, pre 태그 [제목, 부제목, 이미지, 단락 나누기, 선 그리기, 줄바꿈, 자유로운 텍스트 형식]  (0) 2021.06.21

티스토리툴바