패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 23일차입니다! 오늘은 멀티미디어를 삽입하는 태그에 대하여 학습했습니다. 항상 블로그 글쓰기나 웹 빌더를 통하여 오디오와 비디오, 그리고 이미지를 삽입해왔는데, HTML로 이러한 멀티미디어를 삽입하고 제어할 수 있는 방법을 배워 재미있었습니다. 🥰 오늘은 05~07. 멀티미디어 - AUDIO / VIDEO / FIGURE, FIGCAPTION 에 대하여 공부했습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio HTML audio 요소는 문서에 소리 콘텐츠를 포함할 때 사용합니다. developer.mozilla.org 🔸 소리 컨텐츠 (MP3) 삽입, inline 요소 🔸 속성 ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 22일차입니다! 오늘은 7번째 커리큘럼에서 태그와 관련된 클립을 모두 수강하였습니다. 사실 수강하면서 태그에서 alt 속성이 필수인 것도 처음 알았고, 그 외 속성에 대해서도 모두 처음 학습합니다. 앞으로도 MDN 문서를 잘 참고하면서 사용하는 태그와 관련된 정보는 최대한 흡수하려고 노력해야겠어요. 오늘은 태그와 그 속성에 대하여 공부하였습니다. (01~04. 멀티미디어 - IMG - srcset, sizes 속성 / w, x 단위 / sizes 속성) srcset과 sizes는 실무에서 사용해본 적이 없어서 왜인지 궁금했는데 IE 지원이 안 되어서 그랬던 것 같아요. https://developer.mozilla.org/ko/docs/Web/..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 21일차입니다! 오늘 6번째 커리큘럼을 완료했습니다. 인라인 텍스트와 관련된 HTML 요소 강의를 들었는데요. 지난 주와 이번 주에 걸쳐서 블록 요소와 인라인 요소에 대하여 학습하여 한층 레벨업한 기분이에요! 🏃🏻♂️ 오늘 강의를 들으면서, 예전부터 강사님께서 강조해온 것이지만 화면의 구조만 HTML로 작성하고, 꾸미는 영역은 모두 CSS 스타일링으로 돌려야 한다는 말이 특히 생각납니다. 띄어쓰기나 줄바꿈을 할 때 나 태그를 남발했던 지난 날을 떠올리며 열공했어요. 😂 🔸 위 첨자 표시 🔸 아래 첨자 표시 🔸 날짜, 시간을 나타내기 위한 태그, IE 지원 X 🔹 속성: datetime, 유효한 날짜를 yyyy-mm-dd 값으로 나타냄 🔸 아무..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 20일차입니다! 최소 30일차까지는 HTML 요소와 속성에 대해서만 공부할 것 같아요. 😂 좀 지겨워지려는 찰나, 오늘은 힘이 나서 이전보다 강의도 많이 듣고 집중해서 학습했답니다. 지난 주에는 좀 늘어지는 기분이 반영이 되었는지, 미션 글을 쓰는 시간이 많이 늦었지요. 😓 어제 집에서 오후 23시 30분 이후에 빠르게 글을 쓰면서 이건 아니라는 생각이 들어서... 다시 마음을 고쳐먹었어요! 오늘은 06~11.인라인 텍스트 - DFN, CITE, Q, U, CODE, KBD 에 대하여 학습했습니다. 태그는 저번에 , , 태그를 공부하면서 잠깐 언급되어 알게 되었고, 그 외에는 모두 처음 보는 태그였어요. HTML 내에 정말 수많은 태그가 있다는..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 19일차입니다! 오늘은 6번째 커리큘럼에서 03~05. 인라인 텍스트 - ABBR, B, MARK, EM, STRONG, I 에 대하여 공부했어요. 태그와 그 쓰임새는 이번에 처음 알았고, B, MARK, EM, STRONG, I 태그의 차이점에 대해서 확실하게 배웠습니다. 전 주로 강조할 때에는 태그만 사용했는데 알고보니 최대한 태그 사용은 자제해야 하더라고요. 😂 각 태그의 용도와 주의사항 등을 잘 학습할 수 있어서 매일매일 패스트캠퍼스 강의를 들으며 하루에 하나씩은 꼭 배웁니다! ◾ 약어를 지정 ◾ 보통 title 속성(전역 속성)을 사용 ➡ HTML 🔹 태그의 값에 점선 밑줄이 생기며, 그 값에 마우스오버시 전체 내용이 툴팁으로 나타남 ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 18일차입니다! 오늘부터 6번째 커리큘럼, 을 수강하기 시작했어요. 구체적으로 잘 몰랐던 HTML 요소나 속성에 대해 공부하면서, 나중에 어떤 걸 만들 때 도움이 되겠다는 생각을 하니 종종 즐겁습니다. 😊 오늘은 01~02. 인라인 텍스트 - A 태그에 관하여 공부했습니다. A 태그는 하이퍼링크를 삽입할 때 주로 사용하는 태그인데, 이번 기회에 주요 속성과 그 쓰임새에 대하여 알아보았어요. https://developer.mozilla.org/ko/docs/Web/HTML/Element/a ◾ 현재 문서에서 외부로 링크를 "거는" 역할 ➡ a = anchor (닻) ◾ 하이퍼링크 설정, 외부로 내보내는 역할 ◽ 속성 (1) download : ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 17일차입니다! 오늘 5번째 커리큘럼인 HTML/요소 - 콘텐츠 구분 & 문자 콘텐츠 를 끝냈습니다. 지난 주말에 시작하면서 이번 주 중반쯤에 끝날 것 같다고 예상했는데 정말 그렇군요. 🙆🏻♀️ 주로, 종종 쓰거나 알고 있는 태그들도 있었고 처음 보는 (의미를 가진) 태그들도 있었는데요. 오늘 학습한 두 개 클립 내용은 모두 처음 알게된 태그였습니다. 오늘 학습한 내용은 16~17. 문자 콘텐츠 - PRE, BLOCKQUOTE 입니다. 태그에 대해서는 이 블로그에서 더 많은 정보를 얻을 수 있었어요. 인용문은 어떻게 나타내는지 궁금했는데, 오늘 패캠 강의로 학습할 수 있어서 좋았습니다. 😊 https://developer.mozilla.org..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 16일차입니다! 오늘은 처음 보는 태그를 학습했는데 어디에서 활용할 수 있나 찾아봤더니, 좋은 글을 발견하여 링크를 첨부합니다. 추가로 태그에 대해 공부했는데, 예전에 실무에서 태그를 표현적 관점으로 잘못 사용했던 경험이 떠올라서 살짝 씁쓸했네요. 😥 오늘은 14~15. 문자 콘텐츠 - DL, DT, DD, P, HR 에 대하여 학습했습니다. , , : https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl HTML dl 요소는 설명 목록을 나타냅니다. dl은 dt로 표기한 용어와 dd 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 15일차입니다! 오늘은 이 때까지 배웠던 컨텐츠 구분 태그를 활용하여 예제 코드를 짜보고 이후 또 다른 태그에 대하여 학습했어요. 이번 예제 코드를 짜면서 몰랐던 CSS의 속성에 대하여 알게 되어 재미있었습니다. (box-sizing 등) 강사님께서 레이아웃을 잡을 때 tomato 색상을 즐겨 쓰시는데 이 색도 최애색이 될 것 같습니다. 😎 예전에 실무할 때에는 형광 yellow나 aqua를 사용했었거든요.... 오늘은 12. 콘텐츠 구분 - 예제 / 13. 문자 콘텐츠 - OL, UL, LI 을 공부했어요! 예제 (GitHub 메인 페이지 클론코딩) ◾ header, nav, section, article, aside, footer 로 레이아..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 14일차입니다! 요즘은 HTML에서 의미를 가지고 있는 컨텐츠 구분 태그에 대하여 학습하고 있는데요. 오늘은 예제 실습까지 들으려다가 오후 내내 일정이 있어서 개념 학습까지만 하고 밖에 나갔다 왔어요. 바깥 일정 때문에 체력을 80% 이상 쓰고 돌아와도 패캠 공부한 걸 복습하며 블로그 글을 쓰게 만드는... 환급 이벤트 😎 오늘은 08~11. 콘텐츠 구분 - , , , 에 대하여 공부하였습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/aside : 별도 구획 요소 HTML aside 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현..