패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 36일차입니다! 오늘은 가상 요소 선택자와 속성 선택자에 대하여 공부했습니다. 가상 요소 선택자와 속성 선택자 모두 사용해본 적은 있지만 개념이 잘 안 잡혀있던 내용이었는데, 동영상 강의로 설명 듣고 쉬운 예제로 학습하니 바로 머리에 100% 들어오네요...! 😇 오늘은 10번째 커리큘럼의 10~13. 가상 요소 선택자 - before, after / 속성 선택자 - [attr], [attr=value], [attr^=value], [attr$=value] 내용을 공부했어요. 🔶 CSS를 통해서 HTML에 가상 요소를 생성하여 사용 ✨ 예전에는 colon 1개 사용하는 것이 표준이었으나 IE 8버전 이후로 colon 2개 사용이 표준이 됨 🔶 ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 35일차입니다! 오늘은 가상 클래스 선택자에 대하여 학습했습니다. 강의 클립이 5개나 있었지만! 씩씩하게 다 들었습니다. 💪 오늘은 05~09. 가상 클래스 선택자 - hover, active, focus / first-child, last-child / nth-child / xxx-child 주의사항 / nth-of-type, not 을 공부했습니다. 🔶 E에 마우스(포인터)가 올라가있는 동안에만 E 선택 🔷 E:hover 🔶 E를 마우스로 클릭하는 동안에만 E 선택 🔷 E:active 🔶 E가 포커스된 동안에만 E 선택, 대화형 콘텐츠에서 사용 가능 🔷 E:focus 🔶 E가 형제 요소 중 첫번째 요소라면 선택 🔷 E:first-child ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 34일차입니다! 오늘부터 10번째 커리큘럼 중, 선택자의 종류에 대하여 학습하였습니다. 실무 또는 다른 강의를 통해 알고 있었던 개념도 있지만, 이 기회에 정확한 명칭과 그 역할을 알 수 있어 좋았어요. 조상, 부모, 형제, 자식, 후손의 관계 정의도 이참에 제대로 정립했습니다. 😉 오늘은 10번째 커리큘럼의 03~04. 기본 선택자 / 복합 선택자 에 대하여 공부했습니다. 🔶 (요소 내부의) 모든 요소를 선택 🔷 * * { color: red; } 🔶 태그 이름이 E인 요소 선택 🔷 E E { color: red; } 🔶 HTML Class 속성 값이 E인 요소 선택 🔷 .E .E { color: red; } 🔶 HTML Id속성 값이 E인 ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 33일차입니다! 오늘부터 10번째 커리큘럼 'CSS / 개요, 선택자, 상속' 과정 공부를 시작하였습니다. 오늘 수강한 첫 번째, 두 번째 클립은 입문자 파트와 HTML 파트를 공부하면서 계속 언급되었던 내용인데, 더 공부하고 싶었지만 내일 오전에 중요한 일정이 있어서 준비하느라 오늘은 2개 클립만 들었습니다. 😂 오늘은 '01. 기본문법 / 02. 선언방식'에 대한 강의를 들었습니다. 새로 알게된 지식은 @import 문법에 관련한 것입니다. 🔶 HTML의 특정 부분을 검색하여 연결하는 역할 🔶 검색된 대상에 지정될 CSS 명령 세트 🔶 선택자로 검색된 대상에 각 속성과 값을 삽입하여 스타일을 지정함 🔷 속성: 글자색 / 값: 빨강 🔶 HTM..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 32일차입니다! 오늘은 9번째 커리큘럼 'HTML / 전역 속성, 기타' 과정 공부를 마쳤습니다. 이로써 HTML 파트가 마무리되었는데요. 많은 지식을 약 한 달 동안 꼼꼼하게 머릿속에 넣을 수 있어 기쁩니다. 😊 한 달 동안 다른 공부도 꽤 했는데, 시간이 너무 빨리 가서 그런지 매번 '뭐 했다고 시간이 이렇게...!' 라는 말만 나오네요. 오늘은 07~11. 전역속성 - hidden, tabindex / 절대경로와 상대경로 / 주석 (Comment) / 특수기호 (Entities) 를 공부했어요. 🔶 요소를 만들어두고 화면에서 숨길 때 사용 🔷 예제 - form은 숨겨져있지만 버튼을 누르면 form의 action 속성에 따라 이동 전송 (예..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 31일차입니다! 오늘은 9번째 커리큘럼 'HTML / 전역 속성, 기타' 과정 공부를 시작했습니다. 분량을 보니 내일이면 HTML 파트를 마무리할 것 같아요. 🎉 HTML 기본기를 충실히 다지고 실무에서 정확한 용어를 사용할 수 있는 개발자가 되고 싶습니다. 👩💻 오늘은 9번째 커리큘럼의 절반 분량인 01~06. 전역속성 - class와 id / style / title / lang / data-* / draggable 에 대하여 공부하였습니다. 🔶 모든 HTML 요소에서 공통적으로 사용 가능한 속성 🔶 공백으로 구분된 요소의 별칭 지정 🔶 중복 사용 가능 🔶 CSS 또는 JavaScript의 요소 선택기(CSS 선택자나 QuerySelect..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 30일차입니다! 어느새 미션의 3/5를 달성했네요. 이번 주까지는 HTML 파트를 들어야 할 예정이지만요. 분명 거의 매일 최소 3개 이상의 클립을 들었는데 아직 HTML 파트라니... HTML 내용이 많다는 걸 몸소 느낍니다. 제 생각엔 50일까지 CSS 파트를 다 듣는 걸 목표로 해도 될 것 같아요. 미션 완료까지 3주 정도 남았는데, CSS 파트도 중요하고 알찬 내용이 가득한 것 같아서, CSS까지 마스터하는 걸로! 오늘은 13~15. 양식 - FIELDSET, LEGEND / SELECT, DATALIST, OPTGROUP, OPTION / PROGRESS 를 공부했습니다. 🔶 같은 목적의 양식을 그룹화 🔶 속성 : form, disab..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 29일차입니다! 오늘은 8번째 커리큘럼의 'HTML/요소- 양식' 중, 과 태그에 대하여 공부하였습니다. (08~10. 양식 - INPUT (1), (2) / LABEL) 의 type 종류는 정말 많은데, 실무나 토이 프로젝트를 할 때, 필요한 기능을 그때그때 찾아쓰다보니 한정적으로만 사용하고 있었는데요. 이번 기회에 그 종류가 얼마나 많고, 어떻게 쓰이는지 몇 가지를 실습해볼 수 있었습니다. 과 태그 실습 자료는 아래 JSFiddle 에디터에서 확인할 수 있습니다. 🔶 display: inline-block 🔶 주요 속성 (1) autocomplete : 자동 완성 기능 / 기본값="on" / 값으로 on, off 를 가짐 🔶 주요 속성 (2..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 28일차입니다! 오늘은 8번째 커리큘럼의 'HTML/요소- 양식' 공부를 시작하였습니다. 순서대로라면 뒤에 강의를 들어야 하는데, 클립 양을 보고 제가 순서를 임의 조정하였습니다. 그래서 오늘은 04~06. 양식 - FORM / TEXTAREA / button 에 대하여 학습했어요. 🔸 여러 입력 양식의 범위 지정 ➡ 웹 서버에 정보를 제출하기 위한 양식 범위 정의, 특정 양식/주소로 정보 전송 🔸 태그 중첩 사용 불가 🔸 속성 (1) action : 사용자에게 입력받은 정보를 전송할 주소 🔸 속성 (2) autocomplete: 자동완성 기능 사용 여부, 기본값=on 🔸 속성 (3) method: 기본값=GET, 🔹 GET: URL 주소에 보..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 27일차입니다! 오늘부터 8번째 커리큘럼, 'HTML/요소- 표 콘텐츠 & 양식' 공부를 끝냈습니다. 3개 강의 중 2개 강의에서 설명된 태그는 처음 알게된 것들이고 (은 실무에서 써봤던 것 같기도 하고...) 나머지 1개 강의에서 설명된 태그의 쓰임새에 대해서는 정확하게 배웠습니다. 오늘은 04~06. 표 콘텐츠 - CAPTION / COLGROUP,COL / THEAD, TBODY, TFOOT 에 대하여 학습했어요. 🔸 표의 제목을 설정함 🔸 열리는 태그 바로 다음에 작성함 🔸 당 하나의 만 사용 가능함 🔸 표의 전체 열에 대한 공통 정의 🔹 안에 태그 작성 🔸 빈 태그 🔸 표의 열을 공통 정의 🔸 속성 span: 연속되는 열 수, 기본값=..