-
HTML 기본 태그프로그래밍/HTML & CSS 2021. 9. 13.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 기본은 ISO-8859_1 = 한글 깨짐 --> <meta name ="keywords" content="html, css, javascript, tag"> <!-- 검색 엔진에 제공하는 키워드 --> <meta http-equiv="refresh" content="10; url=https://www.naver.com"> <!-- HTTP 응답 메세지 헤더에 대한 정보를 제공 --> <title>첫번째 예제</title> </head> <body> <h3>환영합니다.</h3> <!-- 주석 = 실무에선 주석 달면 안됨. --> <!-- 주석 => 부등호 느낌표 빼기 빼기 --> <p style="background: green; color:red;">반가워요!! <!-- 배경색 설정 시작 태그에 담--> </p> <p>10초후 이동합니다.</p> </body> </html>
- charset과 name, content, http-equiv는 모두 메타 데이터 임
<title> : 말 그대로 제목 부분
인터넷 창 탭 이름 <h1>~<h6> : 인터넷창 내용물에서 제목 헤드라인 담당 숫자는 크기임 1~6까지 있음
<p> : 안에 일반적인 글을 쓸때 사용함
p안에 style을 넣는 것으로 여러가지 상태들을 바꿀 수 있음.
background = 배경색
color = 글자색
위 코드의 결과물 그리고 meta데이터 http-equiv로 인해서 10초뒤에 네이버로 이동함.
h 태그
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3> h 태그 </h3> <p> 글자 크기를 지정하는 태그로 보통 제목을 나타낼때 사용함<br> 크기는 1~6이며 1이 가장 큼 </p> <h1> h1 태그 예제 </h1> <h2> h2 태그 예제 </h2> <h3> h3 태그 예제 </h3> <h4> h4 태그 예제 </h4> <h5> h5 태그 예제 </h5> <h6> h6 태그 예제 </h6> </body> </html>p 태그
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3> 기본 태그 </h3> <div> - p 태그 : 문단 태그. 단락을 정의하여 한 문단을 나타내는데 사용<br> p 태그는 <br><br>과 유사한 정도의 간격이 생김<br> - br 태그 : 줄 바꿈 태그.<br> HTML은 엔터로 줄을 바꿀 수 없고, 공백도 한칸만 표시됨.<br> - hr 태그 : 수평선 태그. 문서 내에 수평선을 넣어주는 태그<br> </div> <p> p 태그 예제 1 </p> <p> p 태그 예제 2 </p> 자바 안드로이드<br> HTML CSS<br><br> servlet JSP <hr> <!-- hr은 선 태그 --> <hr color="blue"> <hr width="50%" align="center"> <hr size="5" width="50%" align="right"> <hr noshade="noshade" size="5" width="50%"> </body> </html><br>은 줄 넘기기 = 즉 엔터
<hr> = 수평선 = 즉 그냥 일반 선 긋는거
block 태그와 inline 태그
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3>block 태그와 inline 태그</h3> <div> <p> - block 태그 : 혼자 한줄을 차지하며, 항상 새로운 라인에서 시작<br> 화면 전체의 가로폭을 차지<br> width, height, margin, padding 속성 지정이 가능<br> block 태그에서는 inline 태그를 포함 할 수 있음<br> 주요 block 태그 : div, h1~h6, p ol, ul, li, table, form 등 </p> <p> - inline 태그 : 새로운 라인에 시작하지 않고 다른 요소들과 나란히 배치<br> content 요소 만큼 폭을 차지<br> width, height는 무시되고 margin, padding은 좌우 간격만 적용<br> inline 태그 뒤에 공백이(엔터 포합) 있는 경우 4px 정도의 공백이 자동으로 생김<br> 주요 inline 태그 : span, a, img, input, select, textarea, button 등 </p> <hr> <h3> block 태그 예 </h3> <p style="background: yellow;">자바</p><p style="background: tomato;">스프링</p> <p style="width: 200px; background: gray;">웹</p> <p style="background: blue;">CSS</p> <hr> <h3>inline 태그 예</h3> <span style="background: red;">자바</span><span style="background: green;">안드로이드</span> <span style="background: tomato;">인라인태그의 공백 엔터등은 4px정도의 자동 공백이 생김</span> <span style="width: 300px; background: black; color:white;">오라클</span> <hr> </div> </body> </html>
블락 태그와 인라인 태그는 쉽게 말하면
블락 = 코드 한줄에 한 문장
인라인 = 한줄에 여러 문장 넣을 수 있음
이런식으로 블락 태그는 한줄에 한개
인라인 태그는 여러개를 한줄에 가능
inline태그 = <span>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3>span 태그 </h3> <p>대표적인 인라인 태그로 스타일을 그룹화 할 목적으로 사용</p> <p>인라인 태그는 요소 뒤에 공백, 엔터 등이 있는 경우 정의하지 않는 공백(4px)이 지정된다.</p> <p>인라인 태그는 width 등이 적용 되지 않는다</p> <span style="background: tomato;">자바</span> <span style="background: red;">안드로이드</span> <span style="background: yellow;">스프링</span> </body> </html>- span 태그는 스타일을 그룹화 하기 위해 사용함.
- 인라인 태그는 width 등이 적용 안됨.
html 특수문자
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3>html 특수문자</h3> <p> <br><br> : 라인을 넘긴다. </p> <p> html은 공백을 많이 띄워도 한칸만 떨어진다. 이럴경우에는 &nbsp;으로 공백을 띄울 수 있다. </p> <p> 스 프 링 </p> </body> </html>
- html에서 <br>을 나타나게 하고 싶은데 그대로 쓰면 줄 바꿈이 되어버림.
- 그래서 특수문자는 따로 입력하는 코드가 있음
- < 이 부등호는 < 이고 > 부등호는 > 이다. 땀 표시 꼭 붙여야함
- 이런식으로 앞뒤로 붙여줘야 결과적으로 <br>이 표시가 됨.
- 공백은  
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .box { border: 3px solid gray; width: 500px; height: 100px; } </style> </head> <body> <h3>공통 속성</h3> <p>노랑 상자에 마우스를 올려 보세요</p> <div title="안녕" style="width: 300px; height: 50px; background: yellow;"></div> <hr> <!-- contenteditable 내용을 입력할수 있는지의 여부를 지정하며 입력된 내용의 제어는 자바스크립트로함 --> <p class="box" contenteditable="true"></p> <hr> <p>data-* : 개발자가 임의의 속성을 html 요소에 추가할때 사용 </p> <ul> <li data-subject="java">자바<li> <li data-subject="spring">스프링<li> <li data-subject="oracle">오라클<li> </ul> <hr> <p> draggable = 지정된 요소의 드래그 가능 여부를 지정</p> <div class="box" draggable="true">드래그 예제</div> </body> </html>- div태그에 title 속성을 주면 마우스를 올렸을때 메세지 박스가 작게 나올때 원하는 문구를 설정 할 수 있음
- 태그마다 일일히 따로 속성을 안주고 위에 <style type="text/css">을 시작으로
클래스를 만들어 버리면 한꺼번에 같은 속성을 줄 수 있다.
- box에 담긴 속성들을 태그 옆에 class="box" 를 입력하면 box의 속성들이 다 딸려온다.
- contenteditable => 텍스트 입력이 가능하게 설정한다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3>formatting 관련 태그</h3> <p>b : 글자 <b>강조</b> 태그</p> <p>em : 텍스트 <em>강조 글자 기울어짐</em>. 이탤릭체. i 태그와 동일</p> <p>i : <i>이탤릭체</i> 태그</p> <p>pre : 문서 서식 태그. 공백, 탭, 엔터 등을 화면상에 표현 가능.</p> <pre> 자바 스프링 HTML CSS Javascript </pre> <hr> <p> sub : 아래 첨자, sup : 위 첨자</p> <p> log<sub>2</sub>x<sup>10</sup> </p> <p> code : 코드 예제 태그. 마크업 하는 코드, XML 속성이름, 파일명 등을 표시 </p> <code>sample.html</code> </body> </html>- formatiing -
- b : 글자 두껍게 볼드 처리
- em : 글자 기울게 표시함
- i : 이텔릭체 라고해서 em이랑 동일함 글자가 기울어짐
- pre : 문서 서식 태그 공백, 탭, 엔터 등을 화면상에 표현 가능하게 함.
(공백이 눈으로 보인다는 소리)
- sub : 숫자를 조그맣에 아래에 넣어줌 (수학 수식)
- sup : 제곱승 처럼 숫자를 위에 조그맣게 넣어줌
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
HTML - 리스트 관련 태그 (1) (0) 2021.09.14 HTML - 테이블(table) 태그 (0) 2021.09.14 HTML - 레이아웃 / 시멘틱 태그 (0) 2021.09.14 HTML 선택자 / CSS 개요 (0) 2021.09.13 HTML 개요 (0) 2021.09.13
