프론트엔드 개발 취업 아카데미 [1일차] 오리엔테이션/HTML/CSS
1월 11일 드디어 학원 수업 개강.
- 1월 11일 ~ 4월 12일
- 오전 10시 ~ 오후 5시
- 월 ~ 목 (월~수 까지 개발 수업, 목요일은 포폴 제작)
이 학원의 과정을 선택하기 전에 고민을 많이 했던 이유는 UI 개발이 수업의 많은 비중을 차지하고 있었기 때문이다. 리액트와 뷰는 수업과정의 막바지 스케줄에 포함되어 있었고 그것도 기간이 매우 짧았다.
하지만 리액트, 뷰, 스벨트 등 프레임워크와 라이브러리는 일단 잊고 HTML, CSS, JS의 기본 개념과 본질을 다잡는 게 우선이라고 생각했다. 기본기가 제대로 갖춰져 있어야 어떤 프레임워크를 사용하든 형식에 맞게 바꾸면 되는거니까(쉽지 않겠지만😁)
수업 과정에서 가장 높은 비중을 차지하는 것은 플러그인을 사용하지 않고 UI 직접 개발하기. 이거 수료하고 나서 프론트엔드개발자가 아니라 UI개발자가 되는 것이 아닐까..? 한편으로 걱정이 앞섰지만. 항하ㅣ99보다는 낫다는 결론을 내렸으니 이제 발 뺄 수도 없다. 그냥 이대로 쭉 가야지 어떡하냐. 일단은 시작해버렸으니 이왕 이렇게 된 거 이전보다 10배 더 열심히 해보자.
아니 근데 Svelte 스벨트.. 이 프레임워크는 또 언제 나타나서 인기를 끌고 있는 건지.. 진짜 변화가 너무 빠르다. 퇴사할 때까지 공부해야 한다는 거 그거 뻥 아니다. 다행히 강사님께서 스벨트 기본기는 가르쳐주신다고 하니 휴..
3개월 과정 동안 포폴 사이트 3개를 제작할 예정이고. 내 개인 포폴 사이트도 다시 구축할 생각이다. 대체 개인 포폴 사이트를 몇 번이나 만드는 건지! 모두 반응형으로 작업할 계획이고. 목요일까지 포폴 계획과 사이트 3개를 선정해서 발표해야 한다. (일반적인 사이트 1, 디자인 비주얼 특이한 거 1, 관리시스템 1)
메인 페이지 1개에 서브페이지 3개는 나와야 할 것 같다. 여기에 +알파로 개인 작업도 할 생각이다.
관리시스템은 디자인을 어디서 참고해야 하나 했는데 클론 코딩하기에 괜찮은 사이트를 알려주셨다.
https://wrapbootstrap.com/templates
여기서 비주얼 괜찮은 거 하나 골라놨다.
[1일 차 강의 내용 필기 - 기본 개념 다시 훑기]
- HTML 은 의미, 구조가 중요. 태그를 사용한 이유가 있어야 함
- address 태그는 집주소를 기재할 때 사용하는 게 아니다. 많이 헷갈려하는 태그. 보통 푸터에 기재되어있는 회사 주소를 표시할 때 사용.
- em, strong 태그는 둘 다 텍스트를 볼드 하게 보이도록 한다. 보통 em태그를 사용한다.
- video태그를 사용하지 않고 유튭에 업로드 후 가져와 쓰는 것이 좋다. 하단에 유튜브 로고가 보인다는 것이 함정이지만 가릴 수 있음. (백그라운드로 영상을 넣어야 하는 경우에는 video태그를 사용하기도 함)
- inline태그 안에는 block 태그 올 수 없다.
- block 요소의 최소 단위가 p태그이다. p안에는 다른 블럭 요소가 들어갈 수 없다.
- 카테고리 탭 메뉴를 만들 때 어떤 태그를 사용해야 할지 항상 고민이 될 것이다. dl, dt, dd태그로 작성이 가능하다. dd를 포지션 absolute로 띄우고 하단에 배치. dt를 플로팅 해서 가로 정렬. (이 방법으로 탭 메뉴를 만들어 본 적이 없는 것 같다.)
- table에서 thead, tfoot 태그는 단 한번씩 선언 가능하다. tbody는 여러 번 사용 가능하다.
- 시멘틱 태그인 header에 id값 header를 같이 작성하는 것이 좋다. header태그도 여러 번 사용이 가능하기 때문에.
- document 상에서 main태그는 단 한번 사용이 가능하다. (공통 영역에서 header, footer를 제외한 부분)
- 웹 접근성 중 가장 먼저 확인하는 것. 탭키를 누르자마자 메인으로 이동이 가능한가.
(이 부분 때문에 main 태그에도 id값 main이 필요하다) - 사용처가 많이 헷갈리는 article, section. section을 주로 사용하도록 하자. section은 2 depth까지만 사용하도록 하자. 또 시멘틱 태그 안에 가장 먼저 헤딩 태그를 선언하는 것 잊지 말자.
- 이미지 요소에 이미지 폭, 높이를 명시하는 것은 요즘 안 함. (인라인으로 넣는 거 말하는 거 같음)
- CSS에서 사용하는 컬러는 RGBA, HEX만 사용하도록 한다.
- 상대길이 단위 중 em은 라인하이트 속성에 자주 사용된다. 폰트 사이즈에 비례하는 값이 필요할 때! ex) 버튼을 만들 때 가로 100em, 세로 10em 이면 폰트 사이즈에 비례해서 사이즈가 변경된다.
- 가장 많이 사용되는 상대길이 단위. vw, vh, vmin, vmax
- CSS에서 사용되는 셀렉터 중 +, ~ 등 자주 사용된다.
수업시간에 강의 내용이 담긴 PDF를 나눠주셨지만 일단 HTML, CSS는 다시 열어보지는 않을 것 같다! 이미 알고있는 내용이어도 중요한 부분을 한 번 더 짚어보니 도움이 되었다. 벌써 자바스크립트가 두려워지고 있다. 포폴은 퍼블리셔 포폴보다 더 퀄리티 있어야 할 텐데 잘 할 수 있을까 으악 :-0