Logo
  • HOME
  • GALLERY
  • BLOG
09/14/2018 by WONY CSS, Web Programming 0

FontAwesome 5 유니코드(Unicode) 사용하기 그리고 CSS3에서 스핀(Spin)

CDN 추가하는 방법은 생략합니다. Regular Style (far) 는 font-weight가 없어도 되지만 font-weight 600을 주면 Solid Style (fas)이 된다. 즉 Regular Style (far) 과 Solid Style (fas) 이 함께 존재하는 폰트의 경우 유니코드가 같으므로 font-weight을 통해 Regular Style (far) 과 Solid Style (fas)를 사용할 수 있다. [crayon-63dbc8b0f32cd559053955/] Solid Style (fas) 는 Regular Style (far) 과 다르게 font-weight 600 이상 또는 bold 값을 넣어야 사용 할 수 있다. 즉 Regular Style (far) 를 지원하지 않는 폰트이다. [crayon-63dbc8b0f32d5093477942/] Brands Style (fab) 는 font-family 에 Free 가 아닌 Brands 를 넣어야 한다. font-weight을 넣어도 되고 넣지 않아도 된다 즉 Regular Style (far)과 같다. [crayon-63dbc8b0f32d8540414550/] FontAwesome  HTML <i> 태그로 이용 할때 class 에 fa-spin을 추가하면 돌아가는 모습을 볼 수 있다. CSS3에서 Unicode를 사용할 때는 아래와 animation 과 keyframes를 이용하면 fa-spin 과 같은 결과를 볼 수 있다. [crayon-63dbc8b0f32da220121360/]  

Read On
share
1
07/13/2018 by WONY HTML, Linux, Ubuntu 0

iframe 에 페이지가 뜨지 않는 경우 X-Frame-Options

X-Frame-Options iframe 에 외부 url을 넣을 경우 페이지가 분명 존재함에도 iframe에 표시가되지 않을 때가 있다 이때 크롬개발자 도구를 Console을 보면 아래와 같은 메세지를 확인 할 수 있다. [crayon-63dbc8b0f3687229339573/] X-Frame-Options 은 숨겨진 링크를 사용자를 속여 클릭하게 만드는 Clickjacking 을 방지하기 위한 옵션으로 X-Frame-Options의 경우 아래와 같이 3가지 옵션이 존재한다. DENY SAMEORIGIN ALLOW-FROM http://example.com/ DENY의 경우 iframe에 페이지를 표시 할 수 없다. SAMEORIGIN의 경우 같은 도메인을 사용하는 사용하는 페이지만 표시 할 수 있다. ALLOW-FROM의 경우 지정한 도메인의 페이지만 iframe에 표시할 수 있다. 위 설정은 HTML에서 변경 할수 없고 서버관리자에 의해서 수정될 수 있다. Ubuntu 16.04 LTS Apache2의 경우 /etc/apache2/conf-available/security.conf 파일을 수정함으로써 변경 또는 사용을 중지할 수 있다. [crayon-63dbc8b0f368d516633280/] 대략 70번째 줄에 위치하고 있으며 쌍따움표안에 값을 변경하면된다 사용하지 않을 경우  Header 앞에 #으로 주석을 걸어 줌으로써 기능을 정지 시킬 수 있다.   자세한 내용은 아래의 링크를 참고 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Read On
share
0
04/27/2018 by WONY JSP/Servlet, Web Programming 0

JSP에서 수정된 CSS, JS 파일 캐싱 방지하기

웹사이트를 운영/제작하다 보면 인터넷 캐시 때문에 CSS, JavaScript 파일이 바로바로 적용이 안 될 때가 있다. 캐시를 지우거나 link 태그에 style.css?ver=1 이러한 식으로  수정할 때마다 숫자를 올려 적어 넣어서 할 수 도 있으나 한두 번도 아니고… 매번 그런다면 정말 짜-증나는 일이 아닐 수 없다… 그래서 인터넷을 뒤적이다 파일이 수정된 시간 정보를 가져오는 방법을 알게 되어 아래와 같이 정리해 보았다. 앞으로 JSP에서는 아래와 같이 한다면 한결 편할 것이다. 소스는 아래와 같고 [crayon-63dbc8b0f3783327587335/] 적용 방법은  css나 js 파일명 뒤에 xxxx.css?ver=<%=fmt.format(lastModifiedStyle)%> 이처럼 적으면 되고, 파일이 수정될 때마다 자동으로 수정된 시간 정보를 불러올 것이다. [crayon-63dbc8b0f3789195317323/] 적용 후 소스 보기 했을 때 결과는 아래와 같다 [crayon-63dbc8b0f378c518045289/]

Read On
share
0

Hi I am Joongwon amateur photographer based in Daejeon City in South Korea.

CATEGORIES

  • C Programming
  • CMS
    • YoungCart5
  • JAVA Programming
    • JAVA Source code
  • Linux
    • Ubuntu
  • Web Programming
    • CSS
    • HTML
    • JSP/Servlet

RECENT POSTS

  • NGINX 워드프레스 404 not found error
  • AWS EC2 Ubuntu 18.04 LTS 에서 vsFtpd 설정
  • 영카트5 상품요약정보 감추기
  • FontAwesome 5 유니코드(Unicode) 사용하기 그리고 CSS3에서 스핀(Spin)
  • iframe 에 페이지가 뜨지 않는 경우 X-Frame-Options

RECENT COMMENTS

    © 2020 John Black