Tag: markdown

[HTML/CSS] 웹 폰트 사용하기 – Web Font Tutorial

font-face

  • CSS2에 새로 추가된 웹 글꼴 명세
  • 표시하려 하는 글꼴이 시스템에 없는 경우 웹 서버에서 글꼴 내려받아 표시
  • 지원
  • W3C 권장형식은 *.woff 이다.
  • IE 6~8: *.eot(O) *.woff(X)
  • IE9: *.eot(O) *.woff(O)
  • 크롬, 사파리, 파폭, 오페라: *.eot(X) *.woff (O)

결국 모든 브라우저를 지원하기 위해 *.eot와 *.woff를 모두 준비해야 한다.

  • @media구문 안쪽에서 @font-face규칙을 사용하는 경우 IE9 브라우저는 글꼴 요청 X

한 글꼴에 @font-face는 한번만 선언

표준과 비표준 글꼴을 모두 지원하기 위해 @font-face규칙을 두 번 사용하는 경우 IE 6~9는 두개 형식 모두 내려받아 성능에 좋지 않겠지.

/* Not recommended */
@font-face{font-family:ngwoff; src:url(NanumGothic.woff)}
@font-face{font-family:ngeot; src:url(NanumGothic.eot)}
body{font-family:나눔고딕, NanumGothic, ngwoff, ngeot}

위 코드는 더 나은 성능을 위하여 다음과 같이 개선할 수 있습니다. Paul Irish가 제안한 방탄 코드 입니다.

/* Recommended */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’);
}
body{font-family:나눔고딕, NanumGothic, ng}
  • ng라는 글꼴 이름을 한번만 선언하고 eot형식과 woff를 순차저긍로 참조.
  • eot가 먼저 나와있으므로 IE 6~8은 eot만 받아온다
  • 나머지 브라우저들은 woff를 받아온다.
  • local(※)
  • 외부자원 참조하기 이전에 시스템 글꼴을 우선 참조할 수 있도록 만들어준다.
  • IE 6~8이 local()값을 처리하지 못하는 특성 이용해 woff글꼴 추가로 요청 못하게 함.
  • ※는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정
  • format(‘woff’)를 명시적으로 지정하면 이 형식을 지원하는 브라우저만 글꼴 내려받음.
  • 값은 반드시 따옴표 안에 있어야 함.
  • 나눔고딕 NanumGothic 두번 적은 이유는 영문으로만 작성했을때 제대로 표시하지 못하는 브라우저 있기 때문. 한글 이름이 있으면 이런 식으로 해줘라.

IE9는 @media규칙 내부에 @font-face 허용 안함

/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}
}
  • IE9는 미디어 구문 안쪽에 선언하면 외부 글꼴을 요청하지 않음.
  • @font-face를 @media 밖에 빼면 된다.

웹폰트 빠르게 로딩하기

보고 공부한 링크
1. 구글 임포트 코드를 HEAD태그의 가장 첫번째(CSS보다 앞)에 위치
2. link로 로드해라
– 구글 웹폰트 로딩 방법은 @import, 참조링크, js세가지.
– 참조링크 이용해서 HTML최상에 코드넣어라.
– <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
3. 적은 폰트 갯수
– 표제를 위한 볼드타입 / 가시를 위한 가독성 좋은 폰트 최대2개 폰트 선정
4. 코드 한줄에 여러 폰트 로드
– <link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'>
5. 쓸것만 로드: 폰트 weight옵션 쓸것만 로드한다
6. Load faster fonts: 폰트마다 로딩 시간 다르니 빠른걸로 골라라
7. 정말 확실히 로드해야한다면 Web Font Loader를 써라.
– 사이트 나머지 로드되기 전에 로드하고, 스타일되지 않은 텍스트가 번쩍이는 것을 확실히 피해준다.

한글 웹 폰트 경량화해 사용하기

보고 공부한 링크

Refer

웹 폰트 문제 해결. @font-face troubleshooting
구글 웹폰트를 빠르게 로드하는 팁 7가지
한글 웹 폰트 경량화해 사용하기
https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/
https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/

web 마크업 레벨테스트

개요

Tobyyun님의 Markup Level Test를 풀고 점검을 받았습니다.
첫 라인이 제가 쓴 답이고(대부분 틀렸어요 ^.^….눈물)
들여쓰기 되어있는 것이 첨삭받은 것입니다.

마크업 레벨테스트

  1. Doctype을 사용하지 않을 때는 무슨일이 발생하나요?
    특정버전으로 작성된 메서든데 다른 버전으로 보일 수 있다.

    HTML렌더링 모드, 독타입이 없으면 quirks mode로 간다.(스탠다드-웹표준, 얼모스트 스탠다드, 쿽스 모드) CSS를 해석하는 방법이나 등등이 깨질 수 있다.

  2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?
    <strong> , ?

    시맨틱!!! <strong>, <em>

  3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.
    블록: <img>, <div>, <header>, , <table>, <li>
    인라인: <p>, <a>, <strong>, <span>

    블록: div, p, section, article
    인라인: span, a, img, b, u, i….

  4. blockquote 태그는 어떤 용도로 사용해야 할까요?
    인용구를 넣을때

  5. 인라인 스타일(style=”property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?
    유지보수가 힘들다(왔다갔다)

    구조와 표현의 분리

  6. myPhoto.jpg 파일을 img 태그로 작성해보세요.
    <img src="경로/myPhoto.jpg" />

    <img src="경로/myPhoto.jpg" alt="대체텍스트"> //알트 꼭 쓰기

  7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?
    요소에 유니크한 속성을 부여한다. 페이지당 한번만 쓴다.

  8. ‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
    첫글자가 소문자가 아니다

    Top이라는 방향성을 가지고 있기 때문. 접근성차원에서도 방향은 의미 없으므로.

  9. ‘blue-box’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
    색상이 CSS에서 변경될 수 있다.

  10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?
    사이드 메뉴

    HTML5 Doctor의 콘텐츠 요소 판별법 참고
    컨텐츠의 주요 내용이 아니고 부수적인 내용일때

  11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?

label꼭 달자

  1. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?
    media-query
    > meta name=”viewport”

CSS

  1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.
    display:none

    위의것은 스크린리더에서 안읽어줌. 우리 사이트 a11y클래스 참고

  2. float 속성을 가진 자식을 품은 부모요소는 높이 값을 잃어버릴 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?

    나중에 알려줄게요.

  3. border-box와 content-box의 차이점은 무엇일까요?

    박스 모델을 알고있나? 지금은 컨텐트박스가 표준. box-sizing으로 변경 가능 =

  4. position: relative는 어떤 경우에 사용 하나요?
    다른 요소에 따라 이 요소의 위치값이 결정될때

    좌표를 재정의할때 쓴다

  5. CSS Reset은 무엇이며 왜 사용할까요?
    브라우저 기본으로 적용되어있는 CSS값들을 리셋. (기본 패딩 등등…)

    크로스 브라우징을 목적으로

  6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?
    sass를 좀 보았습니다.

  7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.
    !important > inline style > id > class

  8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.
    display? position?

    위 것들은 다 상속 안되는것들이고, color:red나 사이즈 같은거 상속됨.

  9. Sprite image 기법을 사용하는 이유는 무엇일까요?
    빠른 로딩과 용량을 줄이기 위해

    파일 요청횟수

  10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.
    top, left

    background-position

  11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?
    특정 기능을 적용할 때, 구 브라우저에 적용이 안돼도 치명적이지 않을 만큼 조금씩 신기능을 추가

    graceful degration(우아한 낮춤?!) ttf만 쓰면 구형 인터넷익스플로러에선 안된다. eot, svg같은걸 추가 (ttf, eot파일 두개만 있으면 거의 다 지원된다.)

  12. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.

    앞에 webkit, moz같은게 붙는거.

  13. 반응형웹디자인의 3가지 요소를 꼽아보세요.
    모든 사이즈 지원, 모두 같은 내용, 코딩을 한번만 한다

    링크 참고

  14. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?

    320을 최소로 잡고, 그것보다 넓으면 100%로 늘리면 되니까!

  15. :first-child와 :last-child가 지원하는 IE의 버전명을 적어보세요.

    7, 9(그래서 퍼스트차일드로 스타일예외처리를 많이 한다.)

  16. 포토샵(또는 다른 그래픽툴)에서 이미지를 자를 때 어떤 기능을 사용하나요? (메뉴명, 단축키 등)
    cmd + t

  17. jpg, gif, png의 차이점을 설명해보세요.
    png: 투명 가능, 용량 작다
    jpg: 이미지 손실이 덜하다
    gif: 움직이는 이미지 제작가능

    나중에 더 자세히

  18. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?
    애니메이션 만들때

    HTML고치지 않고 꾸밀때 (가상요소)

  19. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?
    left: 50%
    right: 50%

    일일코딩시에 하겠습니다.

Markdown Cheatsheet

Heading

# H1
## H2
...
###### H6

H1

H2

H6

Emphasis

Italics is *asterisks* or _underscores_.
Strong is **asterisks** of __underscores__.

Italics is asterisks or underscores.
Strong is asterisks of underscores.

Lists

1.Lezhin
2.com
⋅⋅*ul
1.number doesn't matter
⋅⋅1. ol
4.another
⋅⋅⋅indented paragraphs

⋅⋅⋅hello world

* Unordered List with asterisks
- or minuses
+ or pluses
  1. Lezhin
  2. com
    *ul
  3. number doesn’t matter
    1. ol
  4. another
    indented paragraphs

    hello world

* Unordered List with asterisks
– or minuses
+ or pluses

Links

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](../blob/master/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself]

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

I’m an inline-style link

I’m an inline-style link with title

I’m a reference-style link

I’m a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself

Some text to show that the reference links can follow later.

Images

Inline-style: 
![alt text](http://cdn.lezhin.com/old-assets/home.png "Logo Title Text 1")

Reference-style: 
![alt text][logo]

[logo]: http://cdn.lezhin.com/old-assets/home.png "Logo Title Text 2"

Inline-style:
alt text

Reference-style:
alt text

Code Highlighting

```javascript
var s = "Lezhin";
```

var s = "Lezhin";

Tables

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Colons can be used to align columns.

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown Less Pretty
Still renders nicely
1 2 3

Blockquotes

> Blockquotes haha.
> Second line.

Blockquotes haha.
Second line.

Refer

http://www.emoji-cheat-sheet.com/

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

http://plaintext-productivity.net/2-04-how-to-set-up-sublime-text-for-markdown-editing.html

아기_토끼

안녕하세요, 수련중인 개발자입니다.
피드백이나 오류 정정을 해주시면 감사히 받겠습니다!