CSS 선택자

공백 : 자손

> : 자식

+ : 동생

~ : 동생들

태그 선택자

tag

• tag와 일치하는 모든 태그를 선택한다.

tag1, tag2

• tag1과 일치하는 모든 태그, tag2와 일치하는 모든 태그를 선택한다.

tag1 tag2

• tag1의 자손태그 중에서 tag2와 일치하는 모든 태그를 선택한다.(하위 모든 태그)

tag1 > tag2

• tag1의 자식태그 중에서 tag2와 일치하는 모든 태그를 선택한다. (바로 밑)

tag1 + tag2

• tag1의 형제(동생) 태그 중에서 tag2와 일치하는 태그 하나를 선택한다.

tag1 ~ tag2

• tag1의 형제(동생) 태그 중에서 tag2와 일치하는 모든 태그를 선택한다.

클래스 선택자.

.classname

• classname와 일치하는 class속성값을 가진 모든 태그를 선택한다.

.classname tag

• classname과 일치하는 class속성값을 가진 태그의 자손태그 중에서 tag와 일치하는 모든 태그를 선택한다.

아이디 선택자 #

#id

• id와  일치하는 id속성값을 가진 모든 태그를 선택한다.

속성선택자 []

[ attrname ]

• attrname과 일치하는 속성을 가진 모든 태그를 선택한다.

[ attrname = ‘attrvalue’ ]

• 지정된 속성과 속성값을 가진 모든 태그를 선택한다.

[attrname^=’attrvalue’]

• attrname의 값이 attrvalue로 시작하는 모든 태그를 선택한다.

[attrname$=’attrvalue’]

• attrname의 값이 attrvalue로 끝나는 모든 태그를 선택한다.

추가선택자:

:first-child

• p:first-child : p태그중에서 장남인 p태그를 선택한다.

:last-child

• p:last-child : p태그중에서 막내인 p태그를 선택한다.

:nth-child(n)

• n번째 자식 태그를 선택한다. (n은 0부터 시작)

:eq(n)

• n번째 태그를 선택한다.  (n은 0부터 시작) (전체중에서)

:lt(n)

• n번째 이전 태그를 선택한다.  (n은 0부터 시작)

:gt(n)

• n번째 이후 태그를 선택한다.  (n은 0부터 시작)

xml과 html

공통점                                      

• 태그를 마크업으로 사용

• 단 하나의 태그만 가지고 있는 문서

• DOM(Document Object Model)을 이용해서 다룬다.

차이점

• xml은 마크업(태그)를 확장할 수 있다.

• HTML은 ‘DOCTYPE’이 미리 정의되어 있다.

xml 선언부

• 반드시 첫라인, 첫번째 칸에 위치해야된다.

• <?xml로 시작해야된다.

• <?xml은 공백이 없어야 된다.

• version정보와 encoding정보가 있어야 된다.
  <?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

• standalone는 yes혹은 no를 적을 수 있다.

• standalone은 xml 문서 작성 시에 dtd문서와 관련이 있는지 여부를 표시한다.

루트 엘리먼트(root element)

• xml 문서는 오직 한개의 root 엘리먼트만 가질 수 있다.

• 태그명은 xml로 시작할 수 없다.

• 태그명은 숫자로 시작할 수 없다.

• 태그명은 공백을 포함할 수 없다.

• <와 태그명 사이에는 공백이 없어야 한다.
  
  

• 엘리먼트는 하나이상의 attribute를 가질수 있다.

• 엘리먼트 값을 포함 할수도 있고, 다른 엘리먼트를 포함할 수도 있다.

• 여는 태그와 닫는 태그는 반드시 같은 이름이어야 한다.
  
  
  

1. well-formed한 xml문서

• xml 작성규칙을 잘 준수해서 작성된 xml문서
  
  

XMLParser

• xml문서를 읽어서 필요한 데이터를 추출하는 프로그램

• Document

• xml문서를 tree형태로 해석해서 담고 있는 객체

• xml문서를 처리하기 위한 유용한 기능들을 가지고 있다.

Element getElementById(String id)

NodeList getElementsByTagName(String tagname)

Element createElement(String tagname)

Attr createAttribute(String attrname)

Text createTextNode(String textcontent)

• Node

• xml 의 모든 구성요소를 부르는 말이다
  (태그, 주석, 텍스트, 속성, ...)

• NodeList

• Node를 여러개 담고 있는 것

• 주로,
  getElementsByTagName(String tagname)의 실행결과로 얻게된다.
  
  int getLength() ← 저장된 node의 갯수를 반환
  Node item(int index) ← 저장된 순번의 Node를 반환

• Element

• 태그를 표현하는 객체

• 속성이나, 자식노드를 가질 수 있다.
  
  Element getElementById(String id)
  →  id에 해당하는 엘리먼트 반환
  NodeList getElementsByTagName(String tagname)   
  →  태그명에 해당하는 엘리먼트 반환
  NodeList getChildNodes()
  →  모든 자식 노드 반환
  boolean hasChildNodes()
  →  자식 노드가 있는지 여부 반환
  Node getFirstChild()
  →  첫번째 자식노드 반환
  Node getLastChild()
  →  마지막 자식노드 반환
  Node getParentNode()
  →  부모 노드 반환
  
  String              getAttribute(String attrname)
  →  지정된 이름의 속성값 반환
  String getTextContent()
  →  태그안의 텍스트 반환
  String getTagName()

→   태그명 반환

• Attr

$(“div”).find(“p”)   →   $(“div p”)

• div자손중에서 찾기 (ex: $("div").find(":contains('원')"))

$(“div”).filter()

• div들 중에서 (마음에 드는 것)찾기   (ex: $("p").filter(":contains('원')"))

URL url = new URL(path);

InputStream is = url.openStream();

→   url과 openStream을 합치면 inputStream으로 읽어올 수 있다.

resp.setContentType("text/xml;charset=utf-8");

→  inputStream을 문자형식에 맞게 정의한다.

IOUtils.copy(is, resp.getOutputStream());

→  inputStream을담은 변수 is 를 outputStream으로 response(응답) 해준다.

https://docs.google.com/document/d/1hJHaH0x6L8NXslUd4kV6sJsCalFdHPd21qxVeVWQY_w/edit 다음문서

HTML의 요소

block element

• p, div, ou, ul, dl, li, h1~ h6

• <p> 컨텐츠 </p>

• 컨텐츠 : 텍스트, 다른태그

inline element

• a, img, span, …

• <a> 컨텐츠 </a>

• 컨텐츠 - 주로 텍스트(예외적으로 img는 컨텐츠를 가질수 없다.)

empty element

• img, br

• <br /> → <br>

• <img src = “이미지경로”/> → <img>

container의 역할을 하는 element

• 다른 태그들을 포함할 수 있다.

• 주로 서로 관련있는 태그들을 한덩어리로 묶는 울타리 역할을 한다.

• div - 블록 엘리먼트, 인라인 엘리먼트들을 묶을 때 사용한다.

• span - 인라인 엘리먼트를 묶을 때 사용한다.

목록

ul

• unordered list

• li를 가진다.

ol

• ordered list

• li를 가진다.

dl

• definition list

• dt와 dd를 가진다.

테이블

<thead>

<tr> </tr>

<tr> </tr>

</thead>

<tbody>

<tr> </tr>

<tr> </tr>

</tbody>

이미지태그

• 상대경로 표시법

• “/”로 시작하지 않는 경로 표시

• 현재 페이지의 url에 대한 상대적인 경로다.

• 절대경로 표시법

• “/”로 시작하는 경로 표시

젠코딩

emmet플러그인 설치해야 사용가능. // Tab키 또는 control + E

• ID, CLASS 속성

• div#page.section.main

• <div id="page" class="section main"></div>

• 커스텀 속성

• a[title="hello world"]

• <a title="hello world"></a>

• 엘리먼트 복제

• li*3

• <li></li><li></li><li></li>

• 넘버링 - $ 위치에 값이 1부터 1씩 증가 (1,2,3,4...)

• li.item$*3

• <li class="item1"></li><li class="item2"></li><li class="item3"></li>

• li.item$$$*2

• <li class="item001"></li><li class="item002"></li>

• 그룹핑

• div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

• ID, CLASS 앞에 태그명을 생략하면 DIV로 간주

• #content>.section

• <div id="content"><div class="section"></div></div>

• 텍스트

• p>{click}

• <p>click</p>

p{태그안}

p>a   : p안에 a태그

p+p    : p태그가 나란히

select>option{텍스트}  : select안에 option

div#container>div.row

a[href=url주소 onclick=send();]