* Entity(엔티티):
HTML 코드는 < ~~ > 형식의 태그들로 구성되어 있다 보니 < 와 > 등을 나타낼때는 특수한 방법을 사용해야 한다.
바로 & 로 시작 하는 엔티티(Entity)라 불리우는 것들입니다
non-breaking space
< less than <
> greater than >
& ampersand &
" double quotation mark "
' single quotation mark (apostrophe) '
칸 띄우기는 여러칸 하려면 라고 입력한다.
P 태그:
문단을 나타내는 태그
문단과 문단 사이는 줄바꿈됩니다.
h 태그 :
heading, 혹은 headline 이라 합니다.
h1 ~ h6 총 6가지 h태그가 있습니다.
웹 문서 검색시 SEO 와도 중요한 관련이 있는 태그
SEO (Search Engine Optimization)
검색엔진 최적화 : 웹 문서가 검색엔진에 의해 더 잘 검색되고, 핵심 키워드에서 더 좋은 노출도를 갖기 위해
이를 고려하여 웹 문서 작성하는 것.
요즘 SEO 는 단순히 어휘의 반복 사용으로 인한 것은 인공지능으로 걸러냄. Semantic tag 등을 잘 사용해야 함
Attribute
start tag 안에는 그 element 의 부가적인 속성(atttibute) 를 지정해줄수 있다.
기본구문 attribute name(속성이름) = "attribute value(속성값)" 이며 여러개의 속성을 지정해줄수 있다.
띄어쓰기로 구분. 속성값은 반드시 따옴표 (쌍타옴표 혹은 홀따옴표) 쌍으로 감싸주자
HTML에서 style 속성의 속성값에는 CSS (Cascading Style Sheet) 스타일 구문이 들어갑니다.
구문:
<tagname style="property:value;">
대표적인 스타일 property 는
background-color 배경색
color 글자색
text-align 좌우정렬 (left, center, right)
font-size 글자크기 %, px 사용 가능
font-family 글꼴
한글 글꼴은 그 수가 많지 않아서 선택의 폭이 좁습니다.
가변폭 글꼴과 고정폭 글꼴이 있는데 고정폭은 글자사이 간격을 조절할 수 없으므로
가변폭 글꼴을 사용하는 것이 좋습니다.
가변폭 글꼴 : 굴림(Gulim), 돋움(Dotum), 바탕(Batang), 궁서(Gungsuh)
고정폭 글꼴 : 굴림체(GulimChe), 돋움체(DotumChe), 바탕체(BatangChe), 궁서체(GungsuhChe)
* div, span
다른 요소들을 담는 용도(컨테이너)로 주로 사용되는 태그 div, span
화면 레이아웃 상의 구역별로 나누는 용도로 많이 사용
** 단연코 가장 많이 사용되는 태그들
div 는 block 속성이다. 항상 줄바꿈, 좌우폭 100% 차지
span : div 와의 결정적 차이점은 inline 속성, 필요한만큼의 폭 차지. 줄바꿈 안함.
HTML 에서 색상값 지정하는 방법
1. 이름으로 지정 : 많이쓰는 색상에 대해 140종의 이름이 정의되어 있음
https://www.w3schools.com/colors/colors_names.asp
2. rgb() 사용 : rgb(255, 99, 71) ← Red, Green, Blue 값, 각각 0 ~ 255
https://www.w3schools.com/html/html_colors.asp
3. 16진수 사용: #rrggbb 혹은 #rgb
4. hsl 사용 :
ex) hsl(147, 50%, 47%)
hsl(hue, saturation, lightness)
hue 0 ~ 360 (색상/색조: 0 빨강 ~ 240 블루 ~ 360 그린)
saturation 0% ~ 100% (채도: 0 흑백 ~ 100 풀칼라)
lightness 0% ~ 100% (휘도/밝기: 0 블랙 ~ 100 화이트)
5. rgba color
rgba() alpha 0.0 (투명) ~ 1.0 (불투명)
ex) rgba(255, 99, 71, 0.6)
#rrggbbaa 혹은 #rgba
* CSS : Cascading Style Sheets.
HTML elements 들이 화면상에 어떻게 표시될지 기술함.
적용방식 3가지
1. Inline : 시작태그에 style 속성과 함께 기술
2. Internal : <head> 안에 <style> 태그로 기술
3. External : 외부 파일 (*.css) 로 만들고 연결
selector {property:value; property:value, ...}
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
#p01 { /* id="p01" 인 element 를 select*/
color: green;
}
.error { /* class="error" 인 element 들을 select */
color: beige;
* links
기본 구문 : <a href="url">link text</a>
* target attribute
_blank : 새 윈도우나 탭에.
_self : 현재 브라우저창에 (디폴트)
_parent : 상위 frame 에
_top : 최 상위 윈도우에
* <img> 이미지 태그
- src : 이미지 경로 지정
- 웹에서 가용한 이미지 포맷 3가지
.jpg : 압축률 높음(손실압축), 큰 이미지에 사용
.gif : 256색, 투명지원, 아이콘등 작은 이미지에 적합, 애니메이션
.png : 알파(투명도)지원, 픽셀당 4byte. ARGB
- alt : 이미지가 없는 경우 보여지는 글자, 웹접근성 에서 시각장애인을 위한 용도
- width, height : 브라우저에서 표현하는 이미지 크기
경로지정 시 참조
. : 현재 디렉토리
.. : 부모 디렉토리
image의 width 와 height 는 항상 지정하자. 지정안하면, 이미지 로딩시 화면 깜빡임 증상 발생
HTML 문서에 '표' 를 나타내기 위한 태그로 <table> 제공. 다음 태그들과 같이 사용된다.
- <tr> : table row
- <td> : table data
- <th> : table header
실제 내용을 담는 태그는 td, th 다.
- <thead> : table header들을 담는 태그
- <tbody> : table body들을 담는 태그
- 정렬관련 (td, th 에 적용)
좌우 정렬: text-align
세로 정렬: vertical-align
- colspan : 열병합
- rowspan : 행병합
* colspan
* rowspan
* List
<ul> Unordered List
<ol> Ordered List
style 적용시 '어느 element' 에 '어느 style' 을 적용시켜야 하는지 알아야 한다.
list-style-type 의 값은
disc(디폴트) / circle / square / none이 있다
type 값은
1 숫자 (디폴트)
A 알파벳 대문자
a 알파벳 소문자
I 로무숫자 대문자
i 로마숫자 소문자
* 오늘날 웹에서 li, ol 은 메뉴 작성에도 많이 사용됨.
'모~든' HTML elements 들은 display 스타일 값을 가지고 있다.
1. display: block
- block 속성 elements 들은 '항상' 새 라인에서 시작하고 가용한 좌우폭을 다 차지한다.
- CSS height. width 속성이 적용됨.
디폴트 display 속성이 block 인 element 들.
<div>, <h1> ~ <h6>, <p>, <table>, <ol>, <ul>..
2. display: inline
- inline 속성 element 들은 새 라인에서 시작하지 않고 필요한 만큼의 좌우폭만 차지한다
- CSS height. width 속성이 적용 안 됨★
- CSS의 padding-left 와 padding-right 적용되나 padding-top, padding-bottom 은 적용 안 됨
디폴트 display 속성이 inline 인 element 들.
<span> <a> <img> <input>
※ 위 4개 정도만 디폴트가 inline 이고 나머지는 block 이라 생각해도 됨.
background-color 나 border 등을 주면 그 element 가 차지하고 있는 영역이 보인다
크롬 등에서 element selector 등을 사용하면 해당 element 가 차지하는 영역이 보인다.
HTML 에서 대표적인 grouping 목적의 태그 두가지
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
3. display : none /* 해당 요소 감추기 */
4. display : inline-block
- element 들끼리는 inline 으로 배치되고,
element 는 block 처럼 동작 (width, height 적용됨)
HTML 에서 element 를 식별하는 수단 3가지 (attribute)
1. id
: 고유(unique) 한 element 식별용으로 사용
: 사용처: CSS, JavaScript
2. class
: 그룹으로 여러 element에 적용
: 한 element에 복수 class 적용 가능.
: 사용처: CSS, JavaScript
3. name
: 주로 form 관련 element에 적용
: 사용처: JavaScript, 서버프로그래밍(PHP, JSP 등..)
서버에 데이터를 전송할때는 반드시 name 사용!!
* form
<form> 안에 있는 form element 들의 내용들만! 서버로 전달됩니다.
이때 전달되는(받는) 곳은 서버의 특정 페이지가 되며, 이렇게 전달하는 것을 'submit' 한다고 합니다
<form> 에 사용되는 중요한 attribute 는
1. action :
submit 하는 대상 페이지 url
2. method :
form 데이터를 전송하는 방식
- get 방식 : url에 모든 데이터 명시, 눈에 보임, 용량제한. 북마크 가능
- post 방식 : url에 안보임, 용량제한 없음, 북마크 불가
데이터는 request body 영역에 담겨서 서버에 전송
3. onsubmit :
submit 발생 직전에 수행하는 JavaScript 코드
form 데이터 검증을 위해 쓰임.
4. target :
<a> 에서의 target 과 동일
(_self, _blank, ...)
5. name :
submit 하기 전에 form 데이터 검증을 위해선 필요하게 됨.
특히, 한 페이지 내에 form 이 여러개의 경우
form element 종류에는 아래와 같은 것들이 있다.
1. <input>
2. <select>
3. <textarea>
4. <button>
* select
- selected 넣으면 기본으로 선택됨
- size 추가
* 여러가지 input 타입
- text
- 필수요소인 경우 : required
- 건드리면 안되는 값 : disabled
- 읽기전용 : readonly
- number, password
* radio, checkbox
* button, reset, submit
* iframe : 웹 페이지 안에 웹페이지 표현
data-* attribute 구문
<element data-*="somevalue">
data-* attribute 는
페이지에 custom data 등을 저장하는 용도로 사용.
element 에 emebed 된 데이터
JavaScript 와 연동하여 다양한 사용자 편의성 증가한 인터페이스 구현
(jQuery, BootStrap 등에서도 많이 사용함)
data-* attribute 형식
'data-' 로 시작하며 이후 최소 1글자는 붙어야 한다. 대문자 안됨.
브라우저에선, data-* attirbute 는 무시된다.
'HTML' 카테고리의 다른 글
| [프론트엔드] HTML 4 (0) | 2021.11.07 |
|---|---|
| [프론트엔드] HTML 3 (0) | 2021.11.07 |
| [프론트엔드] HTML 2 (0) | 2021.10.14 |
| [프론트엔드] HTML 1 (0) | 2021.10.09 |