note.org

계획

주차		내용
1	1	HTML Intro & 계발환경설정
	2	text, list,
2	1	table tags
	2	image,
3	1	form tag
	2	hyperlinks
4	1	css intro
	2	css1
5	1	css2
	2	css3
6	1	js intro
	2	variable type
7	1	function
	2	object
8	1	jQuery Intro
	2
9	1	JQuery Basic
	2
10	1	JQuery 응용
	2

    <p>
      <b> <abbr title="Internet of Things">IoT</abbr> </b>
      란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술을 의미한다.
    </p>

    <p>
      내가 경험한 가장 흥미진지한 일은 누군가를 만나는 일이다 - 여화, <cite>'비포선셋'</cite>중
    </p>

    <pre>
      <code style="font-size:26px">
        function savetheLocal(){
           var second = document.getElementById("second");
           var thevalue = second.value;
           localStorage.setItem(1, thevalue);
           gettheLocal();
        }    
      </code>
    </pre>

    <p> 웹화면을 다시 불러오려면 <kbd>f5</dbd>키를 누릅니다. </p>
<p>가격: 13,000원 <small>(부가세 별도)</small></p>
<p>물 화학식 <b>H<sub>2</sub>O</b>다.</p>
<p>E = mc <sup>2</sup></p>
<p> <s> 34,000 </s> <strong>19,000원</strong></p>
<p> 링크 표시 용도가 아니라 산순히 밑줄을 긋느다면 <u> U태그 </u> </p>
<hr>

용어

HTML(hyper text markup language)

• hyper text markup language

Hyper Text

• text displayed on a computer display or other electronic devices with references (hyperlinks)
• to other text that the reader can immediately access.

Markup Language

• a system for annotating a document in a way that is syntactically distinguishable from the text,[1]
• meaning when the document is processed for display, the markup language is not shown,
• and is only used to format the text.

Anotation

• extra information associated with a particular point in a document or other piece of information.
• It can be a note that includes a comment or explanation.

W3C

• World Wide Web Consortium
• the main international standards organization for the World Wide Web.
• the development of standards for the World Wide Web.

World Wide Web

• commonly known as the Web,
• an information system where documents and other web resources are identified
• by Uniform Resource Locators (URLs, such as https://example.com/)
• The resources of the Web are transferred via the Hypertext Transfer Protocol (HTTP)
• and may be accessed by users by a software application called a web browser
• and are published by a software application called a web server.

Hypertext Transfer Protocol (HTTP)

• an Session layer protocol for distributed, collaborative, hypermedia information systems.
• the foundation of data communication for the World Wide Web.

Hypermedia

• an extension of the term hypertext, is a nonlinear medium of information that includes graphics,
• audio, video, plain text and hyperlinks.
• The World Wide Web is a classic example of hypermedia,
• whereas a non-interactive cinema presentation is an example of standard multimedia
• due to the absence of hyperlinks.

http://html5test.com/

HTML && CSS

HTML

• tag
• element
• attribute

TAGS for Text

html

head

body

title

meta

link

• The <link> tag defines the relationship between the current document and an external resource.
• The <link> tag is most often used to link to external style sheets.
• The <link> element is an empty element, it contains attributes only.

Attribute	value	Description
href	URLs	Specified the location of the linked document
rel	stylesheet	required. Specifies the relationship between
		the current document and the linked document
type	media_type	Specifies the media type of the linked document

script

style

h1~h6

br

p

hr

pre

blockquote

strong

b

em

i

q

mark

span

div

ruby

Tags for list

ul

li

ol

dl(definition list), dt(a term/name), dd

• Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description.
• The term is given by the DT element and is restricted to inline content.
• The description is given with a DD element that contains block-level content.

<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>

  <DT>Hacker
  <DD>a clever programmer

  <DT>Nerd
  <DD>technically bright but socially inept person

</DL>

table

• rowspan - Specifies the number of rows a cell should span.
• Note: rowspan=”0” tells the browser to span the cell to the last row of the table section (thead, tbody, or tfoot).
• Chrome, Firefox, and Opera 12 (and earlier versions) support rowspan=”0”.

colgroup

col

tr

th

td

caption

thead

tbody

tfoot

Tags for image, hyperlinks

• img, properties(src, alt, width, height)
• figure,, figcaption
• <a> properties(href, target, download, rel, hreflang, type)
  1. You can use href=”#top” or href=”#” to link to the top of the current page!
  2. If the href attribute is not present, the <a> tag is not a hyperlink.
  3. target=”_blank” <- open in new tab(or Window)
  4. the target attribute specifies where the linked document will open the link
  5. when the link is clicked.
  6. If no target is specified, the link will open in the current context,
  7. unless the user or browser specifies otherwise.
  8. Read more: https://html.com/attributes/a-target/#ixzz6YUgVubt7

Tags for form

• form(method, name, action, target),
• input(text, submit, )
• label
• filedset
• legend

CSS

• 내부, 외부, inline style
• property

p {text-align : center;}

selectors

simple selector( name, . class selector, # id selector)

Combinator selectors (select elements based on a specific relationship between them)

• A combinator is something that explains the relationship between the selectors.
• A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
  1. descendant selector (space)
  2. child selector (>)
  3. adjacent sibling selector (+)
  4. general sibling selector (~)

• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• property
• value

Attribute Selectors

a[target] {
    background-color: yellow;
}
// containg "_blank"
a[target="_blank"] {
    background-color: yellow;
}

// starting "_blank"
[class|="top"] {
    background: yellow;
}
begins with "top"
[class^="top"] {
    background: yellow;
}
// ends with "test"
[class$="test"] {
    background: yellow;
}
// containing "te"
[class*="te"] {
    background: yellow;
}

properties

• color
• width, height
• border : px, solid, #ff0000
• border-bottom : 1px solid #ff0000
• background-color
• text-align
• font-weight
• font-size
• padding
• underline
• text-decoration : underline
• list-style : none
• overflow : hidden
• float : left/right

margin

• margin : 0 0 0 0
• margin : 0 auto

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

clear : both

• Do not allow floating elements on the left or the right side of a specified <p> element:

overflow : scroll, hidden, auto, visible

• The overflow property specifies what should happen if content overflows an element’s box.
• This property specifies whether to clip content or to add scrollbars
• when an element’s content is too big to fit in a specified area.

Value	Description
visible	The overflow is not clipped. It renders outside the element’s box. This is default
hidden	The overflow is clipped, and the rest of the content will be invisible
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content

float : left, right

상태선택자

hover

focus

enabled, disabled

구조선택자

nth-child(n)

first-chile

last-chile

first-letter

last-letter

border-radius

first-of-type, last-of-type

link 선택자

• a::after

#content a::after {
    content: ' - ' attr(href);
}

부정 선택자

• li::not(.fa)

#content li:not(.fa) {
    background-color:#ffd800;
}

Selection 선택자

• li::not(.fa)

#content p:first-child::selection {
    background-color:blue;
    color:yellow;
}

CSS3 단위

• px : pixel
• em : 기본사이즈
• font-size : 100% <- 기본사이즈

display

• The display property specifies the display behavior (the type of rendering box) of an element.

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

background-image

#content {
    width:80%;
    height:100%;
    margin:0 auto;
    background-image:url('http://www.sba.seoul.kr/kr/images/index/visual16.jpg');
    font-size:2em;
    color:#ffffff;
    font-weight:bold;
    text-align:center;
}

block : div, p, li

inline : 상,하 margin, 높이의 의미가 없음

inline-block :

display:none <-> visibility:hidden

• display:none -> 자리도 완전히 사라짐
• visibility:hidden -> 자리는 남고 보이지만 안음.