패스트캠퍼스 프론트엔드 인강 수강 후기
1.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 1회차 미션
페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어웹의 구조를 담당, 출력튼튼한 구조(Semantic)를 만드는것에 집중HTML이 실제 표시되는 방법, 즉 색상, 크기, 폰트, 레이아웃 등을 지정하여 콘텐츠 구조를 꾸며주는
2.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 2회차 미션
HTML에 스타일(CSS)를 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(Sign)속성과 값은 스타일을 지정할 때 사용HTML에 직접 작성하기 때문에 선택자가 필요하지 않는다.단점직접 태그를 찾아서 그 속성으로 값을 넣어야 함 -> 태그에 일일히 입력해야 함태
3.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 3회차 미션
DIV, H1, p 등등사용 가능한 최대 가로 너비 사용크기를 지정할 수 있음기본값 : width: 100%; height: 0;수직으로 쌓임margin, padding 위, 아래, 좌, 우 사용 가능레이아웃을 위한 용도로 사용SPAN, IMG 등등필요한 만큼의 너비만
4.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 4회차 미션
문서 <body> 의 주요 컨텐츠 영역을 나타냄 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠문서에 하나만 존재해야 함IE 지원 Xblock 요소독립적으로 구분되거나 재사용 가능한 영역을 설정 (매거진 / 신문 기사
5.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 5회차 미션
목록을 정의하는 콘텐츠<ol> : 순서가 있는 목록, 중요도를 뜻하기도 함, block 요소<ul> : 순서가 없는 목록, block 요소<li> : 단독으로 사용할 수 없으며, <ol> 이나 <ul> 태그의 자식 요소로 사용해야 함, li
6.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 6회차 미션
다른 페이지, 같은 페이지 위치(\`- 속성download : 이 요소가 리소스를 다운로드 하는 용도로 사용됨을 의미 (값 : Boolean), 클릭 시 파일 다운로드href : 링크 URL, 생략 시 링크로서의 기능 상실herflang : 링크 URL(페이지) 언어r
7.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 7회차 미션
이미지 삽입속성src : 이미지 URL (필수)alt : 이미지의 대체텍스트 (필수)srcset : 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의sizes : 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의inline 속성사용자 환경마다
8.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 8회차 미션
스크립트 코드를 문서에 포함하거나 외부 스크립트를 참조</body> 위에 적어야 함속성async : 스크립트의 비동기적(Asynchronously) 실행 여부 (Boolean, src 속성 필수)defer : 문서 파싱 (구문 분석) 후 작동 여부 (Boolean
9.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 9회차 미션
웹 서버에 정보를 제출하기 위한 양식 범위를 정의<form>이 다른 <form>을 자식 요소로 포함할 수 없음속성action : 전송한 정보를 처리할 웹페이지의 URLautocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여
10.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션
<select> : 선택 메뉴 (드롭 다운)<optgroup> : 선택가능한 옵션을 그룹화<option> : 선택가능한 옵션<datalist> : 자동 완성 기능옵션을 선택하는 메뉴속성autocomplete :사용자가 이전에 입력한 값으로 자동 완
11.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 11회차 미션
요소에 적용할 CSS를 선언요소의 정보(설명)을 지정마우스 hover 시 요소의 내용이 나타남요소의 언어를 지정사용자 정의 데이터 속성을 지정JavaScript에서 이용할 수 있는 데이터(정보)를 HTML에 저장하는 용도로 사용요소가 Drag and Drop API 를
12.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션
속성과 값을 지정할 대상을 검색검색된 대상에 지정될 CSS 명령 세트문서 내 수정사항이나 설명 등을 작성 (주석)HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식사용 빈도를 떠나서, 직접 입력하는 방식은 피해야 함HTML <style> 태그 안에 작
13.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 13회차 미션
E가 (같은 부모를 공유하는) 형제 요소 중 첫 번째 요소라면 선택형제 요소 중 마지막을 선택형제 요소 중 n번째 요소라면 선택(n 키워드 사용 시 0부터 해석(Zero-base))짝수 번째 요소만 선택3번째 요소부터 이후 요소들을 선택.fruits의 첫번째 자식 요소
14.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 14회차 미션
태그 이름과 동일한 타입인 형제 요소 중 태그이름과 n 번째 요소라면 선택n 키워드 사용 시 0 부터 해석 (Zero-base)특정 요소 내부의 앞에 내용(content)를 삽입주의 : content 속성을 꼭 작성해야 함이미지도 삽입 가능특정 요소 내부의 뒤에 내용(
15.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 15회차 미션
특정한 속성을 포함한 요소 선택속성 attr 을 포함하여 속성값이 value인 값을 선택속성 attr 을 포함하며 속성 값이 value 로 시작하는 요소 선택속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택fontfont-sizefont-weightfo
16.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 16회차 미션
같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법명시도 점수가 높은 선언이 우선 (명시도)점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선 (선언 순서)명시도는 '상속' 규칙보다 우선 (중요도)impo
17.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 17회차 미션
백분율 (%)vmax : 더 긴 뷰포트 넒이를 단위로 사용vmin : 더 짧은 뷰포트 넓이를 단위로 사용요소의 너비를 지정속성 값값 : auto의미 : 브라우저가 너비를 계산기본값 : auto (block : 100% / inline : 0px)단위 : px, em,
18.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 18회차 미션
요소의 '외부 (바깥) 여백' 을 지정음수 값 사용 가능속성 값단위 : px, em, cm 등 단위로 지정기본값 : 0auto : 브라우저가 너비를 계산% : 부모 요소의 너비(width)에 대한 비율로 지정요소의 '외부(바깥) 위쪽 여백' 을 지정요소의 '외부(바깥)
19.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 19회차 미션
요소의 '테두리 선'을 지정속성 값border-width : 선의 두께 (넓이) 기본값 : mediumborder-style : 선의 종류기본값 : noneborder-color : 선의 색상기본값 : black선의 두께(너비)를 지정속성 값medium : 중간 두께
20.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 20회차 미션
요소의 크기 이상으로 내용 (자식요소)이 넘쳤을 때, 내용의 보여짐을 제어속성 값visible : 넘친 부분을 자르지 않고, 그래도 보여줌 (기본값)hidden : 넘친 부분을 잘라내고, 보이지 않도록 함scroll : 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수
21.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 21회차 미션
글자의 크기를 지정속성 값단위 : px, em, cm 등 단위로 지정 (기본값 : 16px)% : 부모(상위) 요소의 비율로 지정이외 ...줄 높이 (간격)을 지정속성 값normal : 브라우저의 기본 정의를 사용(1~1.4) (기본값)숫자 : 요소 자체 글꼴 크기의
22.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 22회차 미션
문자의 장식(line)을 지정 (선에 대한 장식)속성 값none : 선 없음 (기본값)underline : 밑줄을 지정overline : 윗줄을 지정line-through : 중앙 선 (가로지르는) 을 지정(첫번째 줄의) 들여쓰기를 지정음수 값 사용 가능사용 시 첫째
23.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 23회차 미션
요소를 자우 방향으로 띄움 (수평 정렬)속성 값none : 요소 띄움 없음 (none)left : 왼쪽으로 띄움right : 오른쪽으로 띄움요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 된다.각 요소에 float 속성이 있으면 차례로
24.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 24회차 미션
요소의 위치 지정 방법의 유형(기준)을 설정속성 값static : 유형(기준) 없음 / 배치 불가능 (기본값)relative : 요소 자신을 기준으로 배치absolute : 위치 상 부모 요소를 기준으로 배치fixed : 브라우저 (뷰포트) 를 기준으로 배치sticky
25.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 25회차 미션
브라우저(뷰 포트) 기준으로 배치absolute 도 할 수 있으나, 명시적으로 fixed 를 선언해 주는 것이 좋음스크롤 영역 기준으로 배치top, left, right, bottom 중 하나의 값을 입력해야작동함IE 지원 불가요소가 쌓여 있는 순서를 통해 어떤 요소가
26.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 26회차 미션
요소의 배경을 설정속성 값background-color : 배경 색상기본값 : transparentbackground-image : 하나 이상의 배경 이미지기본값 : nonebackground-repeat : 배경 이미지의 반복기본값 : repeatbackground-
27.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 27회차 미션
배경 이미지의 반복을 설정속성 값repeat : 배경 이미지를 수직, 수평으로 반복 (기본값)repeat-x : 배경 이미지를 수평으로 반복repeat-y : 배경 이미지를 수직으로 반복no-repeat : 반복 없음배경 이미지의 위치를 설정속성 값% : 왼쪽 상단 모
28.[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 28회차 미션
배경 이미지의 크기를 설정속성 값auto : 배경 이미지가 원래의 크기로 표시됨 (기본값)단위px, em, % 등 단위로 지정width height 형태로 입력 가능 (120px 320px)width만 입력하면 비율에 맞게 지정됨 (120px)cover 배경 이미지의