퍼블리싱 아카이브

https://angelplayer.tistory.com/124 [HTML] 파비콘(주소창 아이콘) 적용 방법 웹 페이지에서 주소창 위에 나타나는 아이콘을 파비콘(Favicon)이라고 부릅니다. (즐겨찾기 등에서도 파비콘으로 지정한 아이콘이 나타납니다.) 오늘은 홈페이지 제작 시 파비콘을 적용하는 방법 angelplayer.tistory.com

피그마 디자인을 완성했을 때 이것을 제플린으로 옮기는 방법을 활용해 보겠다. 제플린은 디자이너가 피그마, XD, 포토샵, 스케치로 만든 디자인을 화면에 그대로 구현할 수 있도록 도와주는 툴이다. 1. 먼저 내보내고 싶은 프레임을 선택한 뒤, 제플린 플러그인을 설치해 실행해준다. 2. Export 버튼을 누른 뒤 잠시 기다린다. 3. 프레임 내보내기가 완료되면 오른쪽의 아이콘을 클릭한다. 4. 제플린에서 HTML, CSS 코드를 참고할 수 있다. Alt 를 누르고 요소를 클릭하면 %단위로 padding과 margin을 확인할 수 있다.

더보기

https://www.daleseo.com/html-meta-tags-for-seo/ 메타 태그를 통한 검색엔진 최적화 (SEO) Engineering Blog by Dale Seo www.daleseo.com https://www.ascentkorea.com/heading-tag-seo/ H태그(헤딩, 표제요소) 최적화하기 - 어센트 코리아 HTML은 문서의 논리 구조를 전달하는 데 적합한 문법을 가지고 있습니다. 그 중에서도 페이지의 1레벨 표제주제와 그에 속하는 하위 레벨 표제의 구조를 단계적으로 표현해주는 것이 〜tag www.ascentkorea.com https://allthatstartup.tistory.com/71 구글 SEO (검색엔진 최적화) 에 대한 정리 「메타태그」 anasshad님..

addEventListener 메서드 사용하기 //html Alert Box close! //script id가 close인 요소를 클릭했을 때, 다음 함수가 실행된다는 의미이다. onclick을 직접 사용하는 대신 이렇게 이벤트 리스너를 사용할 수도 있다. 이렇게 onclick이나 addEventListener를 사용하여 이벤트를 실행시키는 메서드가 이벤트 핸들러이다. 이벤트 핸들러를 등록하는 방식에는 세가지가 있다. 1. 어트리뷰트 방식 Click Me! 2. 이벤트 핸들러 프로퍼티 방식 Click Me! 주의) eventlistener에 함수를 대입할 때 $button.onclick = clickEvent ; (o) $button.onclicke=clickEvent(); (x) 3. addEvent..

안녕하세요! 올 때 메로나!!! 1. id를 이용한 요소 노드 취득(getElementById) document.getElementById("id이름"); id 이름은 HTML 문서 내에서 유일한 값이어야 한다. HTML 문서 내에 중복된 id 값을 갖는 요소가 있는 경우, getElementById 메서드는 인수로 전달된 첫 번째 요소 노드만 반환한다. 언제나 단 하나의 요소 노드만 반환한다. 존재하지 않는 경우 null 2. Tag 이름을 이용한 요소 노드 취득(getElementsByTagName) document.getElementsByTagName('tag 이름'); Apple Banana Orange 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다. Elements가 복수..

지난 포스팅은 @import를 사용해서 .scss(.sass) 파일을 분리하는 것을 공부해보았다. 그런데 최신버전에서는 @import를 쓰는 대신 @use와 @forward를 쓰라고 한다. @use와 @import는 어떻게 다를까? 그리고 왜 @import 대신 @use, @forward를 쓰는 것이 나을까? 1. @import를 쓰면 생기는 문제 지난 포스팅에서 이야기했듯이 규모가 큰 프로젝트일수록 .scss 파일을 따로 분리해서 사용한다. 예를 들어 배경색은 _bg.scss 파일로, 변수들은 _var.scss 이런식으로 따로 정리해서 모아둔다. 그러다보면 변수명도 겹칠 때가 있을지모른다. 배경색의 메인컬러를 지정하고 싶어서 $main-color라고 변수를 만들어 놨는데 폰트 색을 지정할 때도 $mai..

1. Partial(파일분리, @import 사용하기) 소스에 반복되는 부분들을 분리, 분산시켜서 모듈화시키는 기능. SCSS나 Sass를 사용하면, 프로젝트가 커질수록 유지보수와 수정이 어려운 CSS의 단점을 보완해 준다. SCSS/Sass 파일을 @import 해서 스타일 별로, 기능별로 파일을 분리하여 사용할 수도 있다. 이러면 코드를 관리하기도 편해진다. (@import는 CSS에서도 자주 사용한다. 구글 웹폰트 같은 거 사용할 때 자주 씀) ** @import하는 파일명 앞에는 _(언더바)를 붙여야 한다. 언더바를 붙이지 않는다면 분할 된 파일들 모두가 컴파일 되기 때문에 여러개의 .css 파일이 나눠서 저장된다. 그러나 SCSS/Sass 파일 이름 앞에 언더바를 붙여서 파일명을 저장하면, SC..

1. 믹스인(Mixins)은 왜 사용하는가? 스타일 시트를 작성할 떄, 비슷하거나 동일한 스타일을 반복해서 사용해야 하는 때가 있다. 믹스인을 사용하면 사이트 전체에서 재사용할 스타일 그룹을 정의할 수 있다. 2. 믹스인 사용하기(@mixin, @include) @mixin 지시자로 스타일을 지정하고 @include를 사용해 해당 믹스인을 호출하여 사용한다. 이는 물론 CSS로 컴파일하면 보이지 않는다. mixin을 통해 box-style을 지정하고 .one, .two에서 해당 스타일을 호출했다. mixin을 호출하면서 인자를 사용하여 사용할 수도 있다. //SCSS @mixin box-style($bg-color){ width: 100px; height: 100px; display: flex; just..

1. Maps ( ) 괄호 안에 Key: Value 의 형태로 저장하여 사용한다. Key는 고유해야 하지만 Value는 중복이 가능하다. 변수를 각각 선언하는 대신, 관련있는 변수들을 한번에 모아 maps로 만들어서 사용할 수 있다. 안녕하세요! 계묘년 새해복 많이 받으세요! 이번 해는 돈 많이 버세요! //SCSS $font-size: ("h1" : 48px, "h2" : 28px, "p":18px); section{ h1{ font-size: map-get($font-size, "h1"); } h2{ font-size: map-get($font-size, "h2"); } p{ font-size: map-get($font-size, "p"); } } //CSS section h1 { font-size:..