Font Preload란 웹사이트에서 사용되고 있는 폰트 파일을 브라우저에 미리 로드하는 방법이다.Font는 크게 웹폰트와 로컬폰트가 있는데 웹폰트가 로컬폰트보다 로딩이 느리다.그리고 Font Preload는 웹 폰트를 최적화하는 방법으로 preload속성을 통해 폰트

유사배열객체(Array Like Object)란배열과 비슷해 보이지만 배열이 아닌 객체라는 특징을 가지고 있다.위와 같이 유사배열객체인 arguments는 key와 value를 가진 객체로 분류되며 매개변수로 받는 값의 여러 정보를 가진다. 또한 arguments는 배

퍼블리셔로 근무한 경험이 있었음에도 불구하고 모르는 부분이 꽤나 나왔었다.공부하면서 form요소에 좀 더 머릿속에 정리가 되었고 마진 상쇄라는 개념을 학습했을때는 내가 퍼블리셔로 일할 때 애 먹었던게 이것 때문이였구나 라는 것도 알게 되었다.확실히 많은 도움이 된 시간

웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 동일하게 나올 수 있도록 하는 작업을 말한다.브라우저마다 렌더링 엔진이 다르기 때문에 내가 제작한 웹 페이지가 모든 브라우저에서 동일하게 나오지 않을 가능성이 높고 이로 인해 크로스 브라우징은 꼭 필요한 과정이다.웹 표

제로베이스 프론트엔드 스쿨을 시작한지 한달이 되었다.확실히 강의의 퀄리티가 괜찮았다고 생각한다. 적어도 HTML, CSS강의는 그렇다. 특히 CSS강의에서 만족도가 높았는데 설명을 잘 하는 것도 있었고 이번 기회에 Grid레이아웃에 대해 깊게 공부할 수 있었다.엑셀로

시멘틱 태그란 의미를 부여한 태그이며 레이아웃을 구성합니다.사실 div태그로도 충분히 레이아웃을 구성할 수 있지만 시멘틱 태그를 사용할때의 장점이 있습니다.HTML 문서의 가독성과 유지보수가 쉬워진다. 코드 작성자 본인이라면 div태그로 구성된 HTML 문서의 유지보수

Grid의 기본 개념은 2차원 정렬이다.

flexbox란? block요소들의 1차원적인 수직, 수평 정렬을 도와준다. >Tip: 박스들을 inline-block으로 설정 했을때 아래와 같이 여백이 남는 이유는? html에서 해당 태그들에 띄어쓰기 또는 줄바꿈이 있을 경우 여백으로 간주하기 때문이다. 용어 정

transition과 차이점은 animation은 유저의 액션이 없어도 효과를 적용시킬 수 있으며 하나의 스타일만 적용시킬 수 있는 transition과 달리 여러개의 스타일을 순서대로 적용시킬 수 있다.축약하여 사용 가능하며 transition과 다른점은 name을

일반적으로 property, duration, timing, delay순으로 작성전환 효과를 적용할 스타일을 지정할 수 있다.전환효과가 완료되는데 걸리는 시간을 지정할 수 있다.단위는 s 또는 ms단위를 사용한다.전환효과가 시작하기 전 대기 시간을 지정한다.전환효과의

여러 block요소들의 위/아래 margin이 경우에 따라 더 큰 크기를 가진 margin으로 결합(상쇄)되는 현상.두 형제 요소의 위/아래 여백이 만날 경우부모 블럭에 border, padding, inline content가 없어서 부모와 자식의 margin-top

1px = 1/96th of 1in대부분 브라우저의 기본 폰트 사이즈는 16px이다.em보다는 rem이 좀 더 유용하다.1em === 부모의 font-size1rem === root의 font-size뷰포트 width값 기준 백분율뷰포트 height값 기준 백분율뷰포트

대부분 이태릭체를 적용하기 위해 사용font의 굵기. 일반적으로 100~900사용글꼴 스타일 적용. ,를 통해 여러개의 폰트 명시 가능. 사용자의 os환경에 따라 순서대로 적용텍스트의 줄 간격 설정(동일한 높이로 설정하기 위해 사용)글자 간격 설정단어 간격 설정텍스트

LVHA = link > visited > hover > active 순으로 스타일이 덮어씌어진다. active를 사용하려면 앞의 다른 선택들 뒤에 사용해야 한다.after, before는 의미가 없는 꾸밈의 용도로 대부분 사용style이 선언된 위치(나중에 적용된 스

Git 이란? 형상관리도구 중 하나로 프로젝트의 소스코드를 효과적으로 관리하는데 도움을 준다. Sourcetree 설치 Sourcetree란 git을 더 쉽게 활용하기 위해 도움을 주는 GUI툴이다. Git 사용자 설정 및 세팅 로컬에서 사용할 Git사용자 이메일과

id는 고유 값으로 중복 선언할 수 없다.공백문자를 사용할 수 없다.class는 id와 달리 여러 요소의 같은 값을 선언할 수 있다.한 요소에 여러개의 class를 가질 수 있다. 공백 문자를 통해 인식특정 요소에 직접적으로 스타일을 적용할 수 있다.권장하는 방법이 아

metadata란 데이터를 설명하는 데이터다. ex) 책의 글쓴이 정보브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. 텍스트만 가능! <base>, <link>, <script>, <style>, <title>과 같은 다

form 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타내는 태그 > 사용자에게 데이터를 받아 다른 페이지나 서버로 전송하기 위해 사용한다고 생각하면 될 듯 하다. 속성 > action= 양식 데이터를 처리할 프로그램의 URI. 즉 form데이터를 전

img 속성 > src= 필수 속성으로 이미지의 경로를 지정한다. > alt= 대체텍스트 기능과 스크린리더기의 이미지 설명 기능을 제공하는 속성이다. 웹접근성에서 매우 중요 > width, height = 단위 없이 정수만을 기입해야 하며 1 = 1px이다. >

순서가 있는 목록속성 type= "1" 숫자 표현(기본값)"A" 대문자 표현"I" 로마자 표현"i" 로마소문자 표현속성 start=시작하는 위치를 지정할 수 있다.TIP) li태그에 value속성에 값을 지정하여 시작 위치를 지정할 수 있다. 속성 reversed순서