패스트캠퍼스의 "한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online" 강의를 수강하기 시작했다. 백엔드 개발자를 목표로 하고 있지만 프론트엔드 개발도 이해를 해야할 것 같아 수강했다.문서의 HTML버전을 지정한다.DOCTYPE(DTD, Document Type
위의 코드를 적용하고 body 태그의 요소를 개발자도구에서 클릭하여 스타일을 확인하면 아래의 스타일이 적용되어 있는 것을 볼 수 있다.이 코드는 우리가 적용한적이 없음에도 불구하고 기본적으로 적용되는 내용이다. 이는 크롬에서 적용된 스타일이며 브라우저마다 각각 기본값이
하나의 요소를 표현한다.<태그> : 열린태그 = 시작태그</태그> : 닫힌태그 = 종료태그내용 : 요소의 내용(Contents)바깥쪽 시작태그와 종료태그는 부모요소를 뜻한다.안쪽의 시작태그와 종료태그는 자식요소를 뜻한다.일반적으로 부모와 자식요소의 구분을 위
div(Division)블록요소특별한 의미가 없는 구분을 위한 요소이다.h1 - h6 (Heading)블록요소제목을 의미하는 요소숫자가 작을수록 더 중요한 제목을 정의한다.(제목의 중요도를 생각해 숫자를 선택하면 된다)p (Paragraph)블록요소문장을 의미하는 요소
선택자 : css스타일을 적용할 대상(Selector)속성 : 스타일(css)의 종류(Property)값 : 스타일의 값(value)“div 태그를 찾아서 색상을 빨강으로 설정하겠다”“/\* \*/”를 사용해 주석처리해 통해 메모를 작성할 수 있다.내장 방식링크 방식인
박스 모델글꼴, 문자배경배치플렉스(정렬)전환 : 전상태와 후상태가 있으면 애니메이션을 이용해서 전환하는 효과를 만들 수 있다.변환 : 요소를 회전, 이동, 크기를 바꾸는 등 요소에 변화를 준다.띄움 : 요소를 공중으로 띄운다는 의미로, 요소주변으로 글자들이 자연스럽게
요소의 크기 계산 기준을 지정한다.content-box(기본값) : 요소의 내용(content)으로 크기를 계산한다.border-box : 요소의 내용 + padding + border으로 계산한다.(내가 정한 가로, 세로 값을 유지한 상태로 내부에 padding과 b
요소의 위치 지정 기준을 지정한다.top, bottom, left, right 속성을 이용해서 직접 위치를 지정할 수 있다.z-index 속성을 이용해서 쌓인 순서를 정할 수 있다.위의 속성들은 음수를 지정할 수도 있다.static (기본값) : 기준 없음relativ
dash-case(kebab-case) : 대시(”-”) 기호법을 사용하는 표기법 (html,css에서 사용)ex) the-quick-brown-fox-jumps-over-the-lazy-dog하나의 단어로 인식하게 되고 뜨어쓰기를 대시(“-”)로 대신하게 된다.sna
패스트캠퍼스 프론트엔드 초격차패키지의 스타벅스 예제 강의를 수강하면서 새롭게 배운것들을 정리해보았다.스타일 초기화, 파비콘오픈그래프와 트위터카드Google Fonts헤더메뉴와 드롭다운 메뉴자동정렬이동할 페이지가 아직 없는 경우요소 재사용자바스크립트 이벤트 추가curso
addEventListener() 를 이용해서 화면이 스크롤이 될때 특정 함수를 실행시킨다면 스크롤할 때 무수히 많은 함수가 실행되게 된다. 이에 부하를 줘 함수를 조금 실행되게끔 설정하기 위해 ‘Lodash’라이브러리를 cdn으로 가져온다.\_.throttle(함수,