pt는 인쇄 매체의 단위로 Word나 한글 사용하면

글자 크기를 pt 단위로 조정한다. 프린트를 하는 문서 이기 때문이다. px은 스크린 매체의 단위입니다. 스마트폰이나 컴퓨터 모니터에 출력될 때 사용됩니다. 즉, 웹 브라우저에 표시되는 UI는 스크린이죠. 그래서 px 단위를 사용해야 한다. CSS에서 그려지는 pt와 px은 차이가 있다. 계산 방법은 12pt인경우 12(pt) × (96 ÷ 72)


pt size * pixel per inch(96) / points per inch(72) = px size

PT를 PX로 변환해주는 사이트 



출처 :https://blog.naver.com/smj5790/221234103560


'HTML&CSS' 카테고리의 다른 글

CSS 선택자 연습 참고 사이트 [CSS Selector][CSS 연습]  (0) 2018.12.08
CSS 선택자  (0) 2018.12.07
HTML 어휘 강조 표현  (0) 2018.11.22
HTML dl, dt, dd  (0) 2018.11.11
블로그 이미지

클라인STR

,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="UTF-8">
  <meta
    http-equiv="X-UA-Compatible"
    content="ie=edge">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">
  <title>문서객체모델(DOM) API × JavaScript</title>
  <link
    href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css"
    onload="if(media!=='all')media='all'"
    rel="stylesheet"
    media="none">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
 
  <figure
    class="cloud is-slow is-big"
    aria-label="크고 느린 구름"></figure>
 
  <figure
    class="cloud is-normal is-regular"
    aria-label="보통 크기, 속도인 구름"></figure>
 
  <figure
    class="cloud is-fast is-small"
    aria-label="작고 빠른 구름"></figure>
 
  <figure
    id="boy"
    class="boy"
    aria-label="서있는 소년"></figure>
 
  <p class="info">
    <kbd>space</kbd> 키를 누르세요.
  </p>
 
  <script src="js/dom-api.js"></script>
</body>
</html>
 
cs



document 에서 id값으로 속성을 선택하는 경우 


var element = document.getElementById(id);


주어진 ID와 일치하는 앨리먼트 속성을 찾는다. ID 요소는 대소문자를 구별하며 , 문서내에서 유일한 값이어야한다.


document 에서 TagName 으로 선택하는 방법


var elements = document.getElementsByTagName(name)


TagName에 해당하는 엘리먼트를 찾고 HTMLCollection  형태를 반환한다. (과거 브라우저 방식)




HTMLCollection 형태에 DOM 을접근하기 위해서는 item 메서드를 사용하거나 배열형태로 접근한다.


document 에서 클래스명으로 선택하는경우


var elements = document.getElementsByClassName(names);


클래스 이름을 가진 모든 자식 요소를 반환한다. (HTMLCollection  형태를 반환한다. )




클래스선택자를 사용하는 경우 


var element = document.querySelector(selectors)      


선택자에 해당하는 첫 번째 Element 를 반환한다. selectors 요소느 하나 이상의 선택자를 포함하는 DOMString 이어야한다. 








참고원문 


패스트컴퍼스 프론트엔드 강의



'자바스크립트' 카테고리의 다른 글

ES6 템플릿 문자열 (Template literals)  (0) 2019.01.09
자바스크립트 객체지향 프로그래밍  (0) 2018.10.10
객체 생성방법 3가지  (0) 2018.10.09
jqGrid 환경설정하기  (0) 2016.02.18
동적 colModel  (0) 2016.01.05
블로그 이미지

클라인STR

,

본 운세를 보기위해서는 인쿠르트 회원가입이 필요하다.

https://www.incruit.com/



로그인 후 왼쪽 하단영역을 선택한다.



운세홈에서 2019년 토정비결 외에 평생운세, 취업/재물운세를 볼 수 있다. 


2019년 토정비결 메뉴를 클릭한다. 



개인정보 및 보고싶은 운세를 체크하고 결과보기 버튼을 선택한다.


확인 메뉴가 뜨고 입력된 내용을 수정하려면 수정하기를 눌르고 확인버튼을 누를경우 운세정보가 나타난다. 



블로그 이미지

클라인STR

,

내가 거주하고 있는 방은 우풍이 워낙심해서 겨울에는 너무 춥다. ㅠㅠ 기존에는 설치형 텐트를 사용하고 있었는데, 청소할때마다 분리하기도 번거롭고 (어머니 혼자 분리하시기 힘들어하심) 해서 난방텐트 제품을 살펴보던중 아래와 같은 제품을 주문하였다. 이른바 다샵 프리미엄 난방텐트 !!!!!



사실 이제품을 사개된 결정적인 원인은 아래의 동영상을 유트브에서 보고 구매하게 되었다. 



정말 쉽게 펴지는걸 보고 봐로 이거지!!!!


설치는 역시 쉬웠다. 아마도 상부 스프링에 탄성때문인지 상자에서 꺼낸다음 다리를 펴면 거의 반자동으로 4방향으로 펼치지며 양4귀퉁이 끝을 O형 홈에다 끼우면 완성이다. 참쉽죠!!!

그런데 몇일 쓰다보니 문제점을 발견할 수가 있었다. 


원래는 낮에는 접고 저녁때쯤 피는걸 목표로 해서 자주 접었다 필려고 샀는데 잘 접히지가 않는것이었다. 

 투명창 제품인데 저 투명창이 비닐이라서 뭐랄까 비닐끼리 붙기도하고 뻑뻑하다.  상부스프링을 고정한 상태를 풀고 4방향 대를 한번에 오무려야되는데 이 부분이 굉장히 뻑뻑하였다. 처음에는 원래 이런건가 싶기도 해서 완전히 접지는 못하고 접은채로 한쪽구석에 쑤셔뒀는데 구매후 몇일 안되서 접다가 뿌러져 버렸다. 



[부러진 구성품]


텐트다리안에 있던 튀어나온 홈이 부러졌는데 생각보다 약했다는거에 그리고부러졌다는거에 좀 충격적이었다.  물론 정신을 가다듬고 고객센터번호를  찾아서 전화를 했다. 참고로 쇼핑몰사이트에 문의를 남기면 답글이 늦게달렸던거 같다. (어떤제품이던간에)  다행이 사정을 얘기하고 부러진 구성품 텐트다리만 다시 보내주겠다고 하셔서 다행이긴했다. 돈 날리는줄 알았음 ㅠㅠ


[3일만에 도착한 텐트다리]



이전 제품보단 덜 뻑뻑하긴했는데, 사진을 잘보면 밑에 고무줄로 4다리를 묶어놓은게보인다. 이고무줄을 풀면 다리가 사정없이 벌어진다. -_-;; 아무래도 이 난방텐트의 단점인듯하다. 기존에 파손됬던 텐트에서 천부분만 빼기위해서 나머지 다리를 접을려고 했는데 어쩐이유에서인지 접히지 않았다. 그래거 결국은 텐트다리를 부셔버렸다. 


난방텐트 천을 분리하는것도 혼자하긴 힘들었다. 2사람이 2쪽씩 동시에 다리 밑으로 내려서 천을 분리하는게 포인트이다.



[우여곡절끝에 조립한 난방텐트 모습.]


다샵프리미엄난방텐트EVA 투명창 단점


1) 투명창 비닐이 생각보다 얇음 내구성이 약해보여 찢어질까 조심스럽게 사용하게 되며, 가급적이면 투명창은 비추하고 싶음.

2) 설치에비해서 접는게 간편하진 않음 . 

3) 연결대 상부 용수철이 뻑뻑하게 느껴짐(스무스하진않음) 

 플라스틱다리 연결부품이 약하게 되어있음 물론 가격대비 생각하면 어쩔수 없다고 느껴지긴 한데 이 부분은 좀 아쉬운듯하다.  

4) 고객센터 대응에 아쉬움이 좀있다. 차라리 물건확인 후 반품을 해주던가 새 제품을 보내줬음 어땠을까 싶다. 물론 내가 잘못 취급해서 그럴 수도 있다고 생각은 된다만 이부분은 물건을 산 고객 입장에서는 아쉬움이 남는다. 


어쨋든 이걸로 이번 겨울은 따뜻하게 날 수 있을거 같다. ^^



상품 구매  : http://itempage3.auction.co.kr/DetailView.aspx?itemNo=A847707408&frm3=V2

다샵쇼핑몰 : https://smartstore.naver.com/dashop/search?q=%EB%82%9C%EB%B0%A9%ED%85%90%ED%8A%B8





블로그 이미지

클라인STR

,


생강(적당량으로 먹는게 좋음)

강황, 양배추(속쓰림에 좋음양배추즙

위축셩위염(세포재생에는 인삼,홍삼이 좋음), 결명자, 알로에

새포재생을 위해서는 염증반응을 차단해야된다.== 알로에

식이섬유 - (위장내 음식물이 오래머물지 못하게막음, 위산으로 부터 위벽을 보호한다.)

비타민A(당근)비타민D(효묘,버섯류)

유산균복용


원문 : CNC 한의원 김순렬TV

'건강이야기' 카테고리의 다른 글

소화가 잘되는 운동  (0) 2019.01.26
장상피화생 치료 5개월 경과  (0) 2019.01.09
아이허브 DGL 구매  (0) 2018.11.29
위축성 위염 장상피화생 영양제  (0) 2018.10.29
위축성위염 장상피화생 식단  (0) 2018.10.28
블로그 이미지

클라인STR

,


https://flukeout.github.io/ 접속하d여 1단계부터 32단계 까지 CSS Selector 연습할 수 있다. Level 1~32까지의 문제가 있으며, 문제를 풀기위한 설명이 오른쪽영역에 설명되어있다. 


자세한 내용은 아래 영상을 참조


CSS Diner 해답 (마우스로 아래 영역을 긁으세요)

#01 plate

#02 bento

#03 #fancy

#04 plate > apple

#05 #fancy pickle

#06 .small

#07 orange.small

#08 bento > orange

#09 plate, bento

#10 *

#11 orange.small, pickle, plate > apple

#12 plate + apple

#13 bento ~ pickle

#14 plate > apple

#15 plate orange:first-child

#16 plate *:only-child

#17 #fancy *:last-child , plate + pickle

#18 plate:nth-child(3)

#19 bento:nth-last-child(4)

#20 apple:first-of-type

#21 plate:nth-of-type(2n)

#22 plate:nth-of-type(2n+3)

#23 plate apple.small:only-of-type

#24 orange:last-of-type , apple:last-of-type

#25 bento:empty

#26 apple:not(.small)

#27 [for]

#28 plate[for]

#29 [for="Vitaly"]

#30 [for^="S"]

#31 [for$="o"]

#32 [for*="bb"]





http://nthmaster.com/

자식 선택자사용예에 대해 정리된 사이트 


원문출처 : 패스트캠퍼스 강좌

해답출처 : https://gist.github.com/humbertodias/b878772e823fd9863a1e4c2415a3f7b6


'HTML&CSS' 카테고리의 다른 글

pt 사이즈를 px로 변환하는 방법  (0) 2018.12.16
CSS 선택자  (0) 2018.12.07
HTML 어휘 강조 표현  (0) 2018.11.22
HTML dl, dt, dd  (0) 2018.11.11
블로그 이미지

클라인STR

,

CSS 선택자

HTML&CSS 2018. 12. 7. 15:25


선택자 문법


대상

selector {property : val}


선택자의 종류




1)  - 요소선택자, 타입선택자, 태그선택자 라고 함


1
2
3
h3 { font-siez:100%}
{text-decoration:none}
img {border : 1}
cs


2)   그룹선택자 (Groupping)


1
2
3
4
5
6
7
8
9
10
h3 { font-siez:100%}
{text-decoration:none}
img {border : 1}
h1, h2, h3, h4 {font-weight: bold}
a img p {border : 1}
h3 span, h4 span { position : absolute}
cs


3) 전체선택자 (Universal Selector)


1
2
3
{margin : 0; padding:0}
html body * {text-decoration:none}
p.user * {font-size:15em}
cs


4) 클래스 선택자 (Class Selector )

1
2
3
p.notice {font-weight:bold}
.container {float:left}
.positionX {position:absolute}

cs



5) 멀티 클래스 선택자 (Multi Class Selector)

1
2
p.note.container { float:left}
.section.news1 {width : 500px

cs


6) ID 선택자 (ID Selector)

1
2
ul#nav {list-style:none;margin:0;padding:0}
#user_info{text-decoration:none}
cs


7) 하위 선택자 (Descendant Selector)


1
2
ul li a {text-decoration:none}
h3 span {postion:absolute;}
cs


8) 자식 선택자 (Child Combinator)

1
2
3
body>blockqutoe {color:#4c6a77}
p>img {border:0.5px solid whtie;}
ul#subNav>li {font-variant:small-caps}
cs


9) 속성 선택자 (Attribute Selector)

1
2
3
4
div [id] {font-size:10px;color:red}
[class="note"] {font-size:14px;color:tan}
abbr [title~="mobile"] {color:red}
img [alt|="love"] {color:purple}
cs


10) 고급 속성 선택자 ( Advanced Attribute Selector)

1
2
3
4
[href^="http://"] {background:url('image.gif)}
[href$=".psd"] {color:blue}
img [alt*="css"] {text-decoration:overline}
 

cs


11) 가상 클래스 선택자 (Link Pseudo Class Selector)

1
2
3
a:link, a:visited {color:#999}
a:hover, a:active {color:#333}
p:hover {color:#78757e}
cs



CSS 선택자


반드시 기억해야 하는 CSS 선택자


참고 : 패스트 캠퍼스 프론트엔드 강의  


'HTML&CSS' 카테고리의 다른 글

pt 사이즈를 px로 변환하는 방법  (0) 2018.12.16
CSS 선택자 연습 참고 사이트 [CSS Selector][CSS 연습]  (0) 2018.12.08
HTML 어휘 강조 표현  (0) 2018.11.22
HTML dl, dt, dd  (0) 2018.11.11
블로그 이미지

클라인STR

,




신한생명 사이트에 접속한다. 


최상단 대매뉴에서 따뜻한 서비스 -> 생활서비스 선택 -> 오른쪽메뉴에서 운세/사주 선택하면 운세/사주관련 카테고리가 나타난다.


정통운세란에 2019년 신토정비결을 선택하면 사주정보 입력창이 뜬다.



   성별 및  생년 월일 태어난시를 입력하고 운세보기 버튼을 누르면 운세정보가 나타난다. 


회원가입을 하지않아도 볼수 있으며 모바일웹에서 보고싶다면.


신한생명 모바일웹 사이트 운세URL   클릭하면 볼 수 있다. 




블로그 이미지

클라인STR

,