pt 사이즈를 px로 변환하는 방법

HTML&CSS 2018. 12. 16. 14:47

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

,

CSS 선택자 연습 참고 사이트 [CSS Selector][CSS 연습]

HTML&CSS 2018. 12. 8. 22:10


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%}
a {text-decoration:none}
img {border : 1}
cs


2)   그룹선택자 (Groupping)


1
2
3
4
5
6
7
8
9
10
h3 { font-siez:100%}
a {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}
p [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
a [href^="http://"] {background:url('image.gif)}
a [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

,

HTML 어휘 강조 표현

HTML&CSS 2018. 11. 22. 16:34

<strong> : 내용의 중요성 (importance), 심각성 (seriousness), 긴급성 (urgency)을 강조할 경우 사용



<em> : 특정 내용의 스트레스(Stress) 강조 (Emphasis) - 문장 의미를 변경 



의미가 없는 요소 (Non Semantic Elements)

- 다른 글자와 구분하기 위한 용도 



<b> : 단순히 다른 글자와 구분된 용도로 사용.

          문서 요약의 주요 단어, 리뷰 제품 이름 등



<i> : 다른 글자와 구분된 용도로 사용, 기술적 용어, 다른 언어(목소리), 인물의 생각 등을 표현 


아래 조건에 부합하지 않을 경우 최종적으로 b 요소 사용을 고려



제목은 h1 ~ h6 요소를 사용하고, 강조는 em 요소를 사용해야하며, 중요도는 strong 요소로 표시 되어야 하고, 표시 또는 강조 표시된 텍스트는 mark 요소를 사용.



의미적으로 중요한 경우 적용 순서

<strong>, <em>

rmdhl <b>, <i>



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

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

클라인STR

,

HTML dl, dt, dd

HTML&CSS 2018. 11. 11. 16:56


dl (HTML Description List Element) 여러 쌍의 정의된 용어 설명을 그룹짓는다. 

dt (HTML Definition Term Element) 정의 목록에서 용어를 구분한다. dl요소의 자식 엘리먼트로만 등장할수 있다. 

dd (HTML Description) 정의 목록요소에서 용어의 정의를 나타낸다.


<dl>은 <dt>,<dl>을 포함한다. 



하나의 용어(dt)와 하나의 정의 (dd) 

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
</dl>


여러개의 용어(dt)와 하나의 정의(dd)


<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
</dl>


하나의 용어와(dt) 여러개의 정의(dd)

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
      is a mostly herbivorous mammal, slightly larger than a domestic cat
      (60 cm long).</dd>
</dl>

여러개의 용어(dt)와 여러개의 정의(dd)

<dl>
    <dt>Name</dt>    
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
    <dt>Color</dt>
    <dd>Green</dd>
</dl>


응용예)


<dl>
    <dt>워런티</dt>
    <dd>
        <img src="images/additional-info-icon-warranty-mo.png" alt="" width="48" height="48">
        <p>제품 등록 후 보증 정보를 확인하세요.</p>
        <a href="">더보기</a>
    </dd>
    
      
    
    <dt>윈도우 업데이트 정보</dt>
    <dd>
      <img src="images/additional-info-icon-window-mo.png" alt="" width="48" height="48">
      <ul>
          <li><a href="">Windows 10 업데이트 안내</a></li>
          <li><a href="">Windows 10 S 지원 모델 정보</a></li>
      </ul>
    </dd>
    
    <dt>Samsung Flow</dt>
    <!-- 이미지:  -->
    <dd>
      <img src="images/Home_addinfo_SamsungFlow.png" alt="" width="48" height="48">
      <p>PC 로그인, 모바일 핫스팟 연결 및 모바일 알림 동기화 기능을 간편하게 사용하실 수 있습니다.</p>
      <a href="">더 보기</a>
    </dd>
    
    <dt>뉴스 &amp; 공지사항</dt>
     <dd>
      <img src="images/additional-info-icon-alert-mo.png" alt="" width="48" height="48">
     <p>제품 및 서비스에 대한 공지사항</p>
     <a href=""></a>
     </dd>
  </dl>



dl, dt,  dd 는 설명하는 키(key)와 값(value)이 쌍으로 구성되는 콘텐츠인 경우 사용한다.

dl, dt, dd의 용법이 햇갈리는 경우 해당링크 참조한다. 


발췌 : 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dt

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dd

FastCampus 프론트엔드 강의



저작자표시 비영리 변경금지

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

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

클라인STR

,

공지사항

글 보관함

달력

«   2024/04   »
일 월 화 수 목 금 토
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

티스토리툴바