coding etude
200827 [HTML & CSS] 본문
html(HyperText Markup Language)
: 웹페이지의 틀을 만드는 마크업 언어 // tag들의 집합.
1. 태그(tag)
: 태그 란 <> 로 묶여있는 html의 기본구성요소.
태그를 열면 꼭 동일한 태그로 닫아주어야 한다.
(tree structure/ 트리구조)
<div></div> |
한줄을 모두 사용한뒤 줄바꿈한다. |
<span></span> |
내용이 끝나도 줄바꿈 하지 않고 연속 입력이 가능하다 |
<b></b> |
내용(text)을 bold 시킨다. |
<br></br> |
줄바꿈을 진행 |
<a></a> |
하이퍼 링크를 지정 |
<h1></h1> |
숫자의 따라 text 의 크기가 지정된 text를 출력한다. 6까지 있다. |
<button></button> |
클릭할수 있는 버튼을 만든다. |
<em></em> |
text를 강조(이테릭체로 변경) 한다. |
<hr></hr> |
주제 변경 시 단락 표시(하나의 선을 출력한다.) |
<iframe></iframe> |
외부 사이트를 참조해서 출력하는것 (ex 지도) |
<img> |
이미지를 삽입한다. |
<input> |
type에 해당하는 값을 출력한다. |
<lable></lable> |
input text 에 lable를 넣러 클릭이 가능하도록 만든다 |
<ol></ol> |
순서가 정해진 값을 나열 |
<ul></ul> |
순서가 없는 값을 나열 |
<li></li> |
값의 리스트 |
<p></p> |
하나의 구절을 쓸때 사용 |
<th></th> |
table에서 header cell 의 값을 정의 할 수 있다. |
<td></td> |
table에서 header cell의 하위 행을 정의 |
| <tr></tr> | table에서 하위 행의 내용을 정의 |
※ self- closing : tag의 마침이 없어서 스스로 종료 되는 tag
( <img>, <link>,<input> 등등)
※ input의 type에 대해서 숙지해야한다.
※ input type="button" vs. <button> 의 차이점을 구분하자.
2. html의 순서
: html은 정해진 순서에의 해서 사용 하여야 한다 순서는 다음과 같다
<!DOCTYPE html> // 타입의 선언
<html> // html 선언 : DOCTYPE 를 제외한 html의 container(범위)
<head> // head 선언 : m
.
.
</head> // head 마침
<body> // body 선언
.
.
</body> // body 마침
</html> // html 마침
- <html> <head> <body> 에 선언되는 내용에 대해서 구분해 본다면
▶ <html> : <!DOCTYPE html> 을 제외한 html의 container(범위)
▶ <head> : html의 meta data가 지정되는 곳으로 실제 표시되진 않지만 html의 속성을 정한다.
속성에는 title, style, base, link, meta, script, noscript 등이 있다.
▶ <body> : html의 본문을 정의 하는 곳으로 html의 모든 내용을 표시한다
<head>의 표시 내용 예시
<meta charset = "UTF-8" />
// html을 정확하게 표시하려면 웹에서 사용 할 문자를 정의 해 줘야 하는데 HTML5의 기본 문자 집합은 UTF-8로, 세계의 거의 모든 문자와 기호를 포함.
<meta name = "viewport" content = "width=device-width, initial-scale=1" >
// meta 데이터는 name와 content 로 이루어 져있고
viewport : 웹페이지의 크기를 결정
width=device-width는 웹 페이지의 크기가 모니터가 스마트폰의 실제 액정 크기를 따라가도록 합니다.
initial-scale=1는 보여지는 화면의 zoom up 정도를 1배율로 한다는 것입니다. 이 값을 키우면 보여지는 화면이 줌 되어 크게 보입니다. 마치 스마트폰에서 작은 사진을 두 손가락을 이용해 확대시키는 것과 비슷합니다.
스마트폰에서만 효과가 있는 코드
<title>타이틀</title>
//태그는 문서의 제목을 정의합니다. 제목은 텍스트 전용이어야하며 브라우저의 제목 표시 줄이나 페이지의 탭에 표시됩니다.
※타이틀의 선정이 중요한 이유
- 페이지의 타이틀은 검색 엔진 알고리즘에서 검색 결과에 페이지를 나열 할 때 순서를 결정하는 데 사용
＠ 다음은 좋은 제목을 만들기위한 몇 가지 팁입니다.
1. 더 길고 설명적인 제목을 사용
(한 단어 또는 두 단어로 된 제목은 좋지 않다)
2. 검색 엔진은 제목의 약 50 ~ 60자를 표시하므로 제목이 그보다
길지 않도록 해야한다
3. 제목으로 단어 목록만 사용하지 않는다
(검색 결과에서 페이지의 위치가 줄어들 수 있음).
<link rel = "stylesheet" type = "text/css" media = "screen" herf = "main.css" />
// link : 외부의 스타일 시트를 연결 하기 위해 사용
rel : 링크된 문서와 현재 문서의 관계를 나타낸다.
type : 링크된 컨텐츠의 유형을 정의하는데 "컨텐츠스타일/사용컨텐츠" 형식으로 작성 된다.
media : 연결된 리소스가 적용되는 미디어를 지정 함. 주로 외부 stylesheet를
연결할 때 유용.
herf : 링크된 리소스의 URL을 지정할때 사용.
<script src="data.js"></script>
//script : javascript를 참조하기 위해 사용
src : 외부의 스크립트의 URL을 지정하기 위해서 사용.
직접 스크립트를 삽입하는 대신 사용 할 수 있고 script 요소에 src가 지정되면 script 태그 안에 javascript가 포함되면 안된다.
※script를 직접 직접 작성할때 <head>에 외부 script를 참조할때는
<body> 가 끝나기 직전에 참조시킨다.
<body>에 들어가는 내용은 트리구조를 가져야 하고
부모와 자식관계를 명확히 지정해야 한다.
또한 id 와 class 를 지정해서 css를 사용 할 때 참조 할 수 있도록 해야한다.
id : 유일한 값에 이름을 붙여서 구분 한다.
class : 반복되는 값에 동일한 이름을 선언하여 한번에 연결 할수 있도록 한다.
★<header>, <footer> 등 위지 관련 태그를 숙지 ..
CSS (Cascading Style Sheets)
: html문서의 스타일을 지정하는데 사용하는 언어
1. selector (생성자)
: html 의 요소를 찾거나 선택 할 때 사용 한다.
＠selector 다섯가지의 방법이 있다.
1. simple selectors(단순선택)
: id 와 class 를 기준으로 요소를 선택
id 는 # , class 는 . 으로 표시하고 뒤에 요소의 이름을 적어서 요소를
선택한다.
ex) #IDname{ ... } / .CLASSname{ ... }
2. combinator selectors(조합선택)
: 둘 이상의 simple selector 을 사용하여 요소를 선택
★combinator 의 종류는 4가지가 있다.
- descendant selector (하위 선택) : 하위 요소를 선택할때 스페이스(공백)을 사용하여 표시한다.
ex) div p{ ... } // <div> 의 하위에 <p> 를 선택
- child selector(자식 선택 > ) : 하위 요소를 모두 선택 할 때 > 사용
ex) div > p{ ... } // <div> 의 하위에 있는 모든 <p>를 선택
- adjacent sibling selector(인접선택 + ) : 동일한 상위요소를 가진 인접 형제요소를 선택 할 때 사용.
ex) div + p{ ... } // <div> 의 하위에 <p> 를 제외하고 바로 다음 <p> 태그를 선택.
- generel sibling selector(일반인접 선택 ~ ) : 동일한 상위요소를 가진 인접 형제요소를 모두 선택 할 때 사용
.ex) div ~ p{ ... } // <div> 의 하위에 <p> 를 제외하고 바로 다음의 모든 <p> 태그를 선택.
3. pseudo-class selectors(의사 클레스 선택)
: 특수 상태를 정의 하는데 사용 (ex hover )
ex) .class : hover { ... }
4. pseudo-element selectors(유사요소 선택)
: 요소의 지정된 부분을 스타일링 하는데 사용.
5. attribute selectors(속성 선택)
: 특정 속성 또는 속성 값이있는 HTML 요소의 스타일을 지정할 수 있습니다.
※ 4번 5번은 추후에 css를 집중적으로 다룰 때 상세히 공부 후 적어보자.
2. 높이 넓이 색깔 폰트 텍스트 박스모듈 등의 명령어를
숙지해야 한다.
: 내용과 불량이 너무 방대하여 링크를 통해 확인 하는 것을 추천.
https://www.w3schools.com/css/default.asp
'Javascript TIL' 카테고리의 다른 글
| 200830 [고차함수] (0) | 2020.08.31 |
|---|---|
| 200828 [DOM] (0) | 2020.08.29 |
| 200808 [객체지향 프로그램] (0) | 2020.08.08 |
| 200806 [자기 주도 개발 (TDD)] (0) | 2020.08.06 |
| 200806 [scope & closure] (0) | 2020.08.06 |