멋쟁이 사자처럼 프론트엔드 스쿨

git gui로 사용emmet 정리하기dl 안에서 dt와 dd는 항상 쌍으로 존재한다.

일반적인 워크 프로세스의 반대방향으로 진행목표를 설정해놓고 거기에 맞는 역량을 채워가기과정을 끝내면 누구에게나 결과물은 남는다.중요한 것은 과정에서 내가 무엇을 배웠고 무엇을 잘해냈는가잘 이해하고 잘 이해시키는 능력 (상대방과 나의 입장이나 업무를 잘 파악하고 있는 것

그림자에 숨어서 겉으로 드러나지 않는 DOM 요소위 input 태그는 브라우저에서 아래와 같이 출력된다.이걸 만드려면 최소 3개의 div(전체 영역, 버튼, 파란 영역)이 필요할 것 같은데,개발자 도구로 확인하면 태그 하나밖에 나오지 않는다.개발자 도구의 설정에 들어가

overflow: hidden;display: inline-block;default 값은 staticrelative는 본인이 원래 있어야 할 위치 기준이다. 을 주면 static위치 기준 오른쪽으로 50px 이동.absolute는 position이 static이 아닌

inline 요소는 float된 요소를 알아본다. 그래서 사진 밑으로 들어가지 않고 감싸는 형태가 된다.float된 자식요소를 가진 부모요소에게 clear-fix라는 클래스를 부여하고 가상요소를 만들어서 가상요소에 clear:left or right or both;CS

자식요소에 사용flex item 들의 크기를 특정한다. width, height와 다른점은 axis 방향에 따라 달라진다는 것과 내부의 컨텐츠에 따라 크기가 유연하다는 것이다. 기본값은 auto이며, auto 일때는 width, height 값을 사용한다.만약 flex

네이버나 다음의 웹페이지에서 tab키를 눌러보면 브라우저의 좌상단에 아래와 같은 메뉴가 뜨는 것을 볼 수 있다.이것을 skip navigation 혹은 skip menu라고 부르며, 페이지에 표시된 수많은 컨텐츠에 손쉽게 접근할 수 있도록 도와주는 기능이다. 웹 접근성

미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등) 하에 특정 스타일만 적용되도록 하는 기능이며 반응형 웹을 제작할 때 사용된다.반응형을 제작할 땐 모바일을 먼저 작업하는 게 수월하다.모바일에 맞추어 CSS를 작성한 뒤에 미디어 쿼리로 데스크톱일

이해하기 쉬운 픽셀 밀도디바이스 별 픽셀 밀도레티나 디스플레이 대응Retina 디스플레이에서 이미지가 흐려지는 문제 대응법

크롬에서 아래의 확장 프로그램을 설치해준다.피그마에서 배율을 100%로 조정하고 시안을 캡쳐한다.캡쳐한 결과물을 저장한다.검사하려는 HTML 문서를 LiveServer로 연 후 PerfectPixel을 실행한다.Add your first layer! 버튼을 클릭한 뒤

rel="preconnect"의 사용preload, prefetch, preconnect웹폰트 최적화 하기웹 폰트 사용과 최적화의 최근 동향<link rel="preconnect" href="font 주소">현재 페이지에서 외부 도메인의 리소스를 참고하는 것을 브

그리드 아이템인 .aside에 grid-area: aside를 부여해놓고 .container의 grid-template-area에서 사용하지 않아서 생긴 문제이다.grid-template-area에 aside의 자리를 추가해주면 해결된다.z-index가 동작하지않는 이

브라우저의 탭을 보면 탭마다 각 사이트를 나타내는 조그마한 이미지가 있는 걸 볼 수 있는데, 이걸 Favicon(favourites+icon)이라고 한다.Favicon & App Icon Generator에서 쉽게 만들 수 있다.디바이스들을 제대로 지원하려면 Gener

inline 요소들엔 몇가지 특징이 있다.컨텐츠만큼의 크기를 가진다.width와 height가 적용되지 않는다.margin과 padding은 상하를 제외한 좌우에만 적용된다.padding은 상하도 적용되는 것처럼 보이기만 할뿐 실제론 좌우만 적용된다.이런 특징을 가진

Image Replacement(이미지 대체)의 약자이다. 백그라운드에 넣어서 안 보이는 이미지 스크린리더 사용자에게 이미지에 대한 설명이 필요할 때, 이미지를 대체하는 텍스트를 제공하는 기법이다.visibility: hidden; : opacity: 0;처럼 화면에선

cd (change directory)clear 콘솔 비우기mkdir (make directory) 폴더명 : 폴더 생성mkdir -p one/two/three : 폴더 one 안에 폴더 two 안에 폴더 three 생성mkdir four;cd four : 폴더 fou

unzip z.zip압축파일 z.zip을 압축해제한다.zip -r a.zip ./d경로 d에 있는 파일들을 압축해서 a.zip이라고 한다.alias현재 가명들의 목록을 출력한다.alias ls='ls -a'ls -a라는 명령어를 ls라는 가명으로 한다unalias ls

SASS에서 JS와 마찬가지로 조건문, 반복문, 함수를 사용할 수 있다. 앞에 @를 붙인다는 것만 빼면 비슷하게 동작한다.원하는 조건을 설정하고 조건을 만족하는 경우에만 스타일을 부여할 때 사용한다.아래는 $circle의 값이 참이면 border-radius 값을 $s