멋쟁이사자처럼 프론트엔드
-
[Day 11] CSS position / fixed와 stickyTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 12. 01:29
Position position은 위치를 정해주는 속성으로 크게 1. static 2. relative 3. absolute 4. fixed 5. sticky 가 있다. 1. static은 디폴트값으로, 순서대로 엘리먼트를 위치시킨다. 2. relative는 위치를 상대적으로 설정한다. 자기 자신의 position을 relative로 설정 후 top/bottom/left/right 등으로 세부 위치를 조절한다. 3. absolute는 position 속성이 설정된 부모 요소 기준으로 위치한다. 그 부모 요소의 위치를 기준으로 자기 자신에게 top/bottom/left/right 등으로 세부 위치를 조절한다. position: fixed vs sticky fixed 는 흔히 특정 박스가 스크롤 시에도 고정..
-
[Day 8] CSS 인라인과 블록 & 마진 병합 현상TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 7. 00:01
어제부터 CSS 진도를 시작했는데, 배우는 내용마다 항상 빔캠프 종찬님의 행복 코딩 내용이 나와서 행복하다... 이번 포스트는 종찬님의 유튜브 영상과 오늘 수업의 코드 예시를 기반으로 작성되었다! https://www.youtube.com/watch?v=c19Mjg-ivxc CSS를 배우는 중이라면 빔캠프 유튜브 채널을 강력 추천한다!! 1. 인라인, 블록레벨 요소 CSS에서 디자인 되는 모든 것들은 태초에 박스로 이루어져 있다. 박스의 유형에는 크게 블록박스와 인라인박스가 있다. 블록박스(Block box) width가 양 옆 100%이며, width와 height 속성을 가질 수 있다 padding, margin, border 속성을 가질 수 있다. 인라인 박스(Inline box) 컨텐츠만큼의 크기..
-
[Day 7] HTML <table>TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 5. 23:34
오늘 강의는 오전 재현님, 오후 호준님으로 나뉘어서 진행되었다! (하루에 두 분 다 봐서 너무 좋았다 헤헿) 재현님과는 HTML 마무리로 table 태그에 대해 배웠다. table 태그가 정말 어려워서 정말 연습이 많이 필요함을 체감했다 ㅠㅠ 그래서 오늘 TIL 포스팅은 table 에 집중해서 다루려고 한다. 표를 생성하는 table 태그는 컨테이너로서, caption, tr, col, td, th가 자식 요소로 쓰인다. 각각 머리글, 본문, 바닥을 의미하며, 레이아웃엔 영향을 미치지 않으나 css를 사용해 디자인 스타일을 지정할 때 사용 디자인 지정 외에도 thead와 tbody는 JS로 데이터를 컨트롤하는 경우로도 많이 쓰인다고 한다. html에서 표는 반드시 한 행씩 만들어지기 때문에 무조건 내용은..
-
[Day 6] 0404 회고 & HTML 그룹핑 복습 & FormTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 4. 22:07
활기찬 2주 차 월요일-! 오늘은 메이커준님께서 진행하시는 회고로 아침을 시작했다. https://www.makerjun.com/ 메이커준을 소개합니다. 👋🏼 밝음의 아이콘 메이커준의 초간단 소개 www.makerjun.com 우테코에서 프론트엔드 교육 강사로 활동 중이신 준님:) 밝음의 아이콘이셔서 그런지 덩달아 나도 아침부터 활기활기🔥 크게 3부로 나눠서 회고를 진행하였는데, 1부 - 피드백이 중요한 이유 2부 - 무엇을 피드백 받아야 하지? 3부 - 피드백을 위한 체크리스트 순서로 진행하였다. 게임에서는 레벨, 점수, 경험치라는 측정치가 있기 때문에 내가 성장, 레벨업하는 것을 시각적으로 볼 수 있지만, 현실에서는 게임처럼 내가 성장하고 있는지 몸소 느낄 수 있는 방법이 없다🤢. 내가 과연 잘하고 ..