프론트엔드개발자10 noopener, norenoreferrer, nofollow를 사용하는 이유 a 태그의 rel 속성 값으로 사용되는 noopener, norenoreferrer, nofollow 에 대해 알아보자 a 태그의 rel 속성은 html 문서와 링크된 두 문서간의 관계를 명시해준다. 이때 href 속성이 있어야 rel 속성을 사용할 수 있고 검색 엔진은 이 속성을 통해 링크에 대한 추가 정보를 얻을 수 있다. rel 속성에 사용되는 value 중 noopener, norenoreferrer, nofollow 값은 , , 요소에서 사용되는데, 이 값들은 하이퍼링크를 생성하지는 않지만 저 요소들에 의해 생성된 다른 하이퍼링크의 주석이 되기도 한다. 1. noopener 보통 하이퍼링크를 만들 때 target 속성을 지정하면 새로 열린 브라우저 탭에 이름을 지정하고 보조적인 브라우저 탭을 생.. 2023. 6. 3. [제로베이스]프론트엔드 스쿨 두 달차 요약 다음주면 프론트엔드 스쿨이 시작한지 두 달차가 된다. 5월은 HTML/CSS 미션을 하느라 초반 시간이 훅 지나가버려서 인지 미션이 끝나도 시간이 빨리 가는 것 같다고 느꼈다. 프론트엔드 스쿨 두 달차에는 코딩 테스트를 시작했고 자바스크립트 진도를 나가고 있다. 일주일에 한 번씩 코딩 테스트를 보면서 공부할 수 있는건 좋지만 초보자가 하기엔 문제의 난이도가 높다고 느꼈다. 물론 총 5개의 문제 중 2개 정도는 어려움 없이 풀 수 있지만 나머지 문제는 이해조차 되지 않아 여기저기 검색해보고 답을 작성하여 제출해야 한다는 점이 아쉬웠다. 나는 처음부터 난이도가 높으면 실력 향상에 도움이 된다고 생각하지 않아서 쉬운 문제부터 차근차근 난이도를 높여갔으면 더 좋았을거란 아쉬움이 든다. 그런 문제는 자바스크립트 .. 2023. 5. 24. Font를 Preload하는 방법 여러 사이트에서 사용되는 폰트를 크게 나누면 웹 폰트와 로컬 폰트가 있다. 웹 폰트 서버에서 제공하는 폰트 파일을 사용해 렌더링하므로 로딩 시간이 있다. preload 속성을 사용하여 폰트 파일을 미리 다운받아 놓고 사이트에 방문할 때마다 폰트를 렌더링하지 않게 많들어 로딩 속도를 향상시키는 Font Preload 방식을 사용하면 웹 폰트의 단점을 보완할 수 있다. 웹 폰트를 최적화 하는 방법 1. HTML에서 link 태그 preload 옵션을 사용하기 rel = "preload" 속성을 사용하여 웹 폰트를 미리 다운로드하면, 사이트 방문 시 폰트를 렌더링하지 않아도 되기 때문에 로딩 속도가 향상된다. 하지만 너무 많은 폰트를 preload 하면 로딩 시간이 길어진다. 2. CSS 에서 font-dis.. 2023. 5. 18. [제로베이스]HTML/CSS 미션 회고 프론트엔드 스쿨이 시작한지 벌써 한 달이 지났고, 할 수 있을까? 걱정했던 HTML/CSS 미션이 끝났다. 그래서 적는 회고록! 1. HTML/CSS를 공부하면서 느낀점 프론트엔드 스쿨에 들어오기 전에도 html/css 를 이용한 간단한 코딩 정도는 할 수 있었기에 내가 html/css 에 대해서는 어느정도 알고 있다고 생각했지만 웬걸..? 처음 듣는 개념들이 많아서 내가 자만했다는걸 느꼈지만 그래도 어느정도는 알고 있었기에 배움에 어려움이 많지는 않았다. 하지만 종류가 워낙 다양하기 때문에 미션을 진행할 때 필요한 것들을 기억해내는게 어려웠다. 덕분에 열심히 구글링하고 개발자 도구를 통해 어떤 속성을 사용해야 하는지 눈치껏 알게되는 능력이 조금 생겼다. 그리고 대부분 비슷한 속성들을 사용하는 느낌이라 .. 2023. 5. 10. 이전 1 2 3 다음