Computer Science/웹 프로그래밍

HTML 문법과 태그들

mitdog 2024. 6. 29. 11:03

기본 형태

요소(Element)

시작 태그 ... 종료 태그 의 형태를 취한다. 그리고 그것이 하나의 요소이다.

규칙이 존재한다:

  1. 태그는 대소문자 구분이 없다.
  2. 다른 태그끼리 겹칠 수 없다. (예시)
  3. <strong> .. <p> .. </strong> .. </p>
  4. 다른 태그를 포함 할 수는 있다.
  5. <strong> .. <p> .. </p> .. </strong>

태그에 구체적인 속성을 입력해 줄 수도 있다.
형식 : <태그 + 속성이름 + = "속성값">

HTML 주석(Annotation)
<!-- 주석입니다. -->

특수 문자

", &, <, >, 공백 과 같이 문법에 사용되는 문자들은 특수한 방법으로만 텍스트로 사용이 가능하다.
그 중에서도 공백을 알아두자 : &nbsp; (non-breaking space)

태그

h 태그
<h1></h1>
<h2></h2>
...
<h6></h6>

옵시디언에서의 '#'과 같은 느낌이다. 숫자가 클수록 글자 크기가 작아진다.

p 태그
<p></p>

문단을 나눠준다.


!주의! : 처음의 <p>는 현재 커서 다음 줄부터 시작하게 하고, </p>는 커서를 다음 줄 첫 번째로 보낸다.

br 태그
<br>

줄을 바꿔준다. (엔터키)

hr 태그
<hr />

줄이 생긴다. 옵시디언에서의 '---'와 같다.

pre 태그
<pre></pre>

내용으로 입력한 그대로 나온다. 띄어쓰기 엔터까지 전부 그대로다.
(거의 안쓰는 태그라고 한다)

텍스트 서식
*b와 strong은 같다고 봐도 된다
<b>텍스트 볼드체</b>
<strong>텍스트 강하게 표시</strong>

*i와 em은 같다고 봐도 된다
<i>텍스트 기울임꼴(이탤릭체)</i>
<em>텍스트 강조</em>

<code>텍스트 코드체(코드 같은 폰트임)</code>

<sup>위 첨자 2의 n승 같이 표현 가능</sup>
<sub>아래 첨자</sub>

위 첨자 예: 2^n
아래 첨자 예: A_i

리스트
  • 번호 없는 리스트ul 태그로 감싸주고 li로 한 항목씩 표시
  • <ul> <li> </li> </ul>
  1. 번호 있는 리스트ol 태그로 감싸주고 li로 한 항목씩 표시
    속성 값으로 번호 표기를 바꿀 수 있다.
    type="표기할 속성": 1, a, A, i, I
  2. <ol> <li> </li> </ol>
  • dl의 경우
  • <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
링크

a(anchor:앵커; 닻) 태그를 사용하며, 속성으로 href(hyperLink Reference)를 사용한다.

<a href="http://www.naver.com">...</a>
  • href는 파일의 경로로도 할 수 있는데, 반드시 상대 경로여야 한다. 절대 경로이면 컴퓨터마다 파일의 위치가 다 다르기 때문에, 정상적인 작동이 되지 않는다.
  • 상대 경로 사용:
    • 상위 폴더로: ..￦(올라가는 명령어)로 상위 폴더가 있는 곳까지 가서 파일명￦파일명￦... 이런식으로
    • 하위 폴더로: ￦하위 폴더 명￦...
  • target 속성:
    • 링크를 클릭했을 때 새창을 띄울 것인지, 그 창에서 넘어갈 것인지 등을 지정해주는 속성
    • <a href="..." target="_blank"></a> 새 창을 띄워주는 속성 <a href="..." target="_self"></a> 현재 페이지에서 넘어가는 속성
이미지

img(image) 태그를 사용, 속성으로 src(source)를 사용한다. 종료 태그가 없다.

<img src="logo.png">
  • src의 값은 다른 페이지의 링크(어디 구글의 사진의 URL 이라던가), 파일의 경로 모두 가능하다.
  • 이미지도 문자처럼 하이퍼링크를 씌울 수 있다. (a태그에 포함할 수 있다는 뜻)
  • width, height 속성:
    • 크기를 지정해 줄 수가 있다.
    • <img src="logo.png" width="100" height="100"> 기본 단위는 px(픽셀)이다. <img src="logo.png" width="50%" height="50%"> 웹 페이지에서 몇 %의 크기로 지정도 가능하다.
  • alt(alternative text) 속성:
    • 사진을 불가피하게 띄우지 못했을 때 대신 띄우는 메시지(문자)
    • <img src="logo.png" alt="image loading error">
  • 섬네일(Thumnail) 방식:
    • 주로 웹에서는 사진의 크기가 크고 해상도가 높으면 용량이 커서 로딩에 오래 걸리는데, 작은 사진을 먼저 띄워 줌으로 인해 그것을 방지한다.
    • 작은 이미지를 만들고 큰 이미지 링크를 달아놓아서 사용
테이블

table 태그를 사용, 다양하게 사용된다. 로그인 창도 table로 한다는 사실
근데 table 태그는 여러개가 사용된다.

<table> -> 테이블 영역이라는 표시
    <tr> -> 행 하나 표시
        <th>...</th> -> 강조 열 표시(달력으로 치면 요일 부분)
    </tr>
    <tr>
        <td>...</td> -> 일반적인 열 표시
    </tr>
...

</table>
  • 행, 열 합치기: 기본적으로 tr혹은 th(열 태그)에 쓰고, 그 셀 기준으로 거기부터 합쳐진다. 그리고 합쳐진 부분은 다음 행 영역에서 적으면 안된다.
  • <table> <tr> <th rowspan="합칠 칸 수"></th> ... </tr> <tr> <td colspan="합칠 칸 수"></td> ... </table>
오디오

audio 태그를 사용한다. 이미지와 같은 src 태그로 음원을 불러온다. (절대 경로 절대 쓰지마)

<audio src="..." autoplay controls></audio>
  • autoplay : 사이트가 로딩 되자마자 재생하도록 하는 속성.
    단, 크롬은 muted 속성을 추가해주어야 작동한다.
  • controls : 음량 조절과 같은 기본적인 컨트롤 바가 나타난다.
  • 지원 형식: mp3, ogg, wav모든 브라우저에서 지원되는 오디오 형식은 없기 때문에, 여러 개의 형식 음원을 넣은 뒤 되는 것이 틀어지도록.
  • <audio controls autoplay> <source src="od_pop.ogg" type="audio/ogg"> <source src="od_pop.mp3" type="audio/mp3"> </audio>
  • source 태그
비디오

video 태그를 사용한다. 속성은 audio 태그와 거의 유사하다. source 태그의 사용도 동일하다.
단, audio 태그와 달리 크기 속성을 정해줄 수 있다. (width, height)

<video controls src="...">
form 태그

form 태그는 입력된 데이터를 전송하기 위해 사용하는 태그이다. 그 안에서 input과 같은 태그들을 이용하여 전송할 데이터들을 입력 받는다. 보통 name들을 붙이는 것 같다. 서버에서 받아야 하니깐.

<form action="input.jsp" method="post"> 
    <input ...>
    <input ...>
</form>
  • action 속성: 이 form의 데이터를 처리하는 서버 스크립트의 주소.
  • method 속성: GET 혹은 POST 속성을 가진다. 서버와 어떻게 통신할 것인지를 결정.
input 태그(form에 종속)

말 그대로 데이터를 입력 받기 위한 태그. type에 따라 종류도 다양하다.

<input type="text"> // 한 줄짜리 텍스트 필드 생김
<input type="password"> // 비밀번호 입력 필드 생김
<input type="radio"> // 라디오 버튼 생김 (O)
<input type="checkbox"> // 체크 박스 생김
<input type="file"> // 파일 이름 생성하는 필드 생성
<input type="reset"> // 초기화 버튼, 누르면 모든 입력 필드 초기화
<input type="image"> // 이미지 전송 버튼으로 생성

입력 받은 데이터를 사용하기 위해 input 마다 id, class, name같은 식별을 붙일 수가 있다.
id : 모든 태그(같은 종류여도) 중에서 유일한 이름. CSS, JS 둘 다 주로 사용 가능하다.
class : 어떤 스타일의 종류. CSS에서 주로 이용.
name : JS에서 사용하기 위해 이름 붙여놓기(?), 서로 구분 용도로도 사용 가능.

input 태그는 타입마다 속성이나 특징이 상이하다.
<자유 입력 류>: 말 그대로 자유롭게 입력하는 것들.

  • text : size 정해줄 수 있다.
  • password : 말 그대로 비번 받는 곳. 비번 가리기 위해 입력 시 점으로 표시된다.

<체크 류>: 체크 하는 기능을 지닌 것들. value 속성 값을 지정해 줘야 받을 때 편하다.

  • radio : 말 그대로 동그라미 체크. 같은 name 끼리는 하나만 선택이 가능하다.
  • checkbox : 다중 선택이 가능한 체크.

<파일 업로드>: 파일 업로드 기능을 가진 버튼을 생성한다.

<form enctype="multipart/form-data">
    <input type="file" accecpt="image/jpg, image/gif">
</form>

반드시!!
제출 버튼과 같이 입력 받은 데이터를 전송하는 버튼이 있어야 한다.(form을 쓰고싶다면)

<input type="submit" value="제출" onclick="function()">
<input type="button" value="제출" onclick="function()">
<button type="button" onclick="function()">제출</button>

셋 다 버튼 기능을 한다. 차이점은 submit과 button 없다시피 하고,
button 태그만 버튼에 뭐가 적히는지 element(태그와 태그 사이 값)로 정해진다.

select 태그(form에 종속)

여러 개의 목록에서 선택할 수 있는 입력 태그. 복수 선택이 가능하다!!(multiple 속성)
종속 태그로 option이 있고, 이 또한 value를 적어놔야 한다.

<form action="..">
<select name="cars">
    <option value="bmw">BMW</option>
    <option value="benz">Benz</option>
    <option value="hyundai" selected>현대자동차</option>
    <option value="kia">기아자동차</option>
</select>
</form>

selected 미 설정시에는 자동으로 맨 첫 option이 노출되고, selected 설정시 그게 먼저 노출된다.
또한 optgroup label="" 태그로 선택 목록 안에서 레이블을 만들 수도 있다.

textarea 태그(form에 종속)

두 줄 이상의 긴 텍스트를 입력 받는 태그. rows, cols로 크기 지정이 가능하다.

<form name="input" action="getfeedback.jsp" method="get">
고객의 의견<br />
<textarea name="feedback" rows="5" cols="50></textarea>
</form>
div 태그

참고: https://cording-runner.tistory.com/entry/HTML-Block-Inline-elements-%EC%9D%98-%ED%8A%B9%EC%84%B1?category=1040520
공간을 블록 형식으로 분할해주는 태그.
p 태그도 블록 형식으로 분할해주지만, div는 진짜 웹 페이지 너비 만큼 '블록'을 차지한다.

<body>
    <div>예시 입니다 페이지 너비 만큼</div>
    <div>예시 입니다 페이지 너비 만큼</div>
    <div>예시 입니다 페이지 너비 만큼</div>
    <div>예시 입니다 페이지 너비 만큼</div>
    <div style="height:20px; background-color:yellow"></div>
    <div style="height:20px; background-color:green"></div>
    <div style="height:20px; background-color:purple"></div>
</body>
시멘틱 태그

div 태그로 공간을 마음껏(div로 나누고, div안에 div 넣어서 또 그 안을 나누고...) 나누는 건 좋은데..
div 역할을 하면서 태그에 무슨 공간인지 표시하면 알아보기 쉽잖아.
그래서 나온게 div 처럼 공간을 분할해주지만, 공간의 역할로 태그 이름을 붙인게 시멘틱 태그.

span 태그

인라인 형식으로 공간을 분할한다. 즉, 그 span 태그 사이 만큼만 한 줄 안(inline)에서 분할.

<body>
    <span>예시 입니다 작은 공간</span>
    <span>예시 입니다 작은 공간</span>
    <span>예시 입니다 작은 공간</span>
    <span>예시 입니다 작은 공간</span>
</body>
id 속성

참고: https://cording-runner.tistory.com/entry/HTML-id-%EB%B6%81%EB%A7%88%ED%81%AC-%EC%84%A4%EC%A0%95?category=1040520

  • 하나의 HTML 페이지에 '유일하게' 한 태그에만 사용 가능. 사람 구분하듯이.
  • JS, CSS에서 요긴하게 갖다가 쓴다.
class 속성

참고: https://cording-runner.tistory.com/entry/HTML-Class-%ED%81%B4%EB%9E%98%EC%8A%A4

  • 하나의 HTML 페이지에서 여러 태그에 사용 가능. 다만 그 클래스 형식(style)을 따라간다.
  • CSS에서 요긴하게 쓰는 듯.
  • 심지어 하나의 태그에 여러 개의 클래스도 가능하다. (대신 공백으로 구분)
  • <p class="class1 class2 class2...">Lorem ipsum</p>
id vs class vs name

'Computer Science > 웹 프로그래밍' 카테고리의 다른 글

JS에서의 객체(Object in Javascript)  (0) 2024.07.09
HTML의 DOM 구조  (0) 2024.07.09
Javascript 문법  (0) 2024.07.07
외부 JS 파일 HTML에 넣기  (0) 2024.07.07
HTML 페이지의 구조  (0) 2024.06.29

'Computer Science/웹 프로그래밍'의 다른글

  • 현재글HTML 문법과 태그들

관련글

티스토리툴바