전체 글
-
CSS(Grid), 스프린트 회고프론트엔드 2022. 7. 29. 23:05
Grid 다양한 레이아웃을 구현 📝실습 : https://bighuni.github.io/front-end-school/Training/211108_Grid/ Flex에 이어 Grid를 학습하게 되었다. 둘의 내용이 겹치는 부분이 있지만, 궁극적인 차이가 존재한다. Flex = 한 방향의 레이아웃(1차원) Grid = 두 방향의 레이아웃(2차원) 파이어폭스 개발자 도구에서 그리드를 명확하게 보여주는 기능때문에 그리드를 처음 학습할 때는 파이어폭스가 유용했지만, 이제 크롬 개발자 도구에도 이 기능이 생겼다..! Flex와 마찬가지로 부모는 Grid Container, 자식은 Grid item grid-template-columns : 열의 넓이 grid-template-rows : 행의 높이 repeat ..
-
CSS(Flex)프론트엔드 2022. 7. 29. 23:04
Flex 콘텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합 처음 뵙게 된 한재현 강사님의 강의를 들었다. 이호준 강사님과 같이 정말 잘 가르쳐주셨고, 수강생분들이 하신 질의응답을 너무 잘 받아주셨다. 무엇보다 수업이 유쾌하고, 리액션이 활발하셔서 졸음이 오지 않는다는...! 👦🏻 [Position 보충] Absolute는 본래 위치에 계속 있음 sticky는 나온지 얼마 안되 '-webkit-'과 같은 브라우저 지원을 위한 벤더 프리픽스가 필요함 [Flex] display : flex;로 선언 부모는 container, 자식은 item 자신의 직계자식까지만 영향 축 방향 : [가로] *row, row-reverse * [세로] *column, column-reverse * jus..
-
나만의 캐릭터 만들기 과제프론트엔드 2022. 7. 29. 23:02
제 1회 자신만의 캐릭터 그리기 경진대회 강사님께서 '나만의 캐릭터 만들기 경진대회'를 개최하셨다. 수업에서 배웠던 CSS 이론 지식을 총동원해서 어쨋든 결과물을 만들어내야 하는건데 난 학습 진도가 느려서 이제와서 완성해보았다... 디자인쪽에 소질이 없는 난.. 곰을 그리고 싶었는데, 그냥 라이언이 되버린 느낌이랄까...? 😥 캐릭터명은 '샤이베어🐻' 인데, 막상 결과물을 보니까 정말 이름대로 부끄러워진다... 앞으로 더 디자인 감각과 실력을 올려야지.. 🎈미션 : 기존에 없는 나만의 캐릭터를 CSS로 구현해서 만들기 📝과제 : https://bighuni.github.io/front-end-school/Assignment/211104_Character/ [회고] 먼저, html 구성에서 전체를 포괄하는..
-
CSS 정리(구조 ~ declarations)프론트엔드 2022. 7. 29. 22:58
🔎 CSS 폭포수로 떨어진다는 의미의 'Cascade'와 웹 페이지 스타일을 정리한 'Style Sheets' = CSS에서 스타일이 적용될 때, 우선순위를 갖고 적용 지금까지 CSS3를 개발중이라고 하는데, 그리드 레이아웃 같은 경우 레벨1에도 도달하지 못했기 때문에 정확히 우리가 배우는 것을 CSS3라고 말할 수는 없다고 한다. 얼마 전, 고경희 저자님의 Do it! HTML/CSS 관련 교재를 사려고 찾아봤었다. 19년 말 개정판에는 책 제목이 'HTML5+CSS3 웹 표준의 정석' 이었는데, 올해 개정판에는 'HTML+CSS+자바스크립트'로 달라진 것을 알 수 있었는데, 이러한 점을 반영한 것으로 보인다. h1 { color:red; } h1 = 선택자(Selector) color = 프로퍼티(P..
-
HTML 마무리(DOM, 블록 레벨, 인라인 요소)프론트엔드 2022. 7. 29. 22:54
🔎 DOM 문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 인터페이스 [Shadow DOM] 📌 Shadow DOM은 DOM의 구조를 가지고 있으나, 외부에 노출되지 않은 DOM을 말하며 DOM의 구조를 캡슐화할 때 사용 볼륨바 0 ☝🏻 위 진행바를 편집하려면 원래 작성된 DOM을 표시 해야하는데, 개발자 도구에서 환경설정 - Elements - '사용자 에이전트 그림자 DOM'을 표시하면, 숨겨져 있던 세부 코딩 표시가 가능 태그는 다른 곳에 놔도 문제가 되지 않는다. 독립적 기능 안에는 반드시 Heading 태그가 들어가야함 줄바꿈을 왠만하면, 태그 대신 태그 사용 절대 태그 안에 태그 금지! ❌ 절대 태그 안에 태그 금지! ❌ 🟪 블록 ..
-
HTML 태그(글자, 콘텐츠, 미디어) 정리프론트엔드 2022. 7. 29. 22:46
✍ HTML 학습 #1 . HTML VS Code에서 사용자 코드조각(emmet) 설정으로 'htmlko'를 입력 후 tab키를 누르면 !DOCTYPE 부터 필요한 태그 등을 자동으로 불러올 수 있다. 매번 html language를 'en'에서 'ko'로 수동 변경해야 되는게 많이 귀찮았는데, 너무 편한 셋팅이다..! 😋 $1, $2, $3는 자동 완성된 emmet 문서의 커서 위치👆를 지정할 수 있다. Snippets 설정으로 생산성을 극대화할 수 있다는 것을 많은 html 문서를 작성하면서 체감할 수 있었다.. MDN 문서는 HTML의 각 구성부분이 웹 콘텐츠가 문단인지, 리스트인지, 헤드라인인지, 링크인지, 이미지인지, 멀티미디어 플레이어인지,** 폼 요소**인지 아니면 기타 사용 가능한 다른 요..
-
HTML/CSS 강의 정리프론트엔드 2022. 7. 29. 22:23
✍ HTML/CSS 강의 정리 #1 HTML/CSS 는 아주 간단한 방법으로 내 생각과 의도를 표현할 수 있어서 장점이 많음 전혀 다른 언어(Javascript, Python, Ruby 등)도 섞여 콜라보레이션이 잘 됨 단독으로 동작할 때 빛이 나고, 결과물이 누구나 접속 가능한 홈페이지라는 것이 큰 장점 어디서든 결과물에 쉽게 접근할 수 있고, 여러 환경, 상황에서도 실행해볼 수 있음, 강력한 접근성은 다른 시각화 도구보다 가장 중요한 포인트 난이도 또한 높지 않아서 문법이 아주 간단하고, 로직이 간단 현재, 대다수의 프로그래밍 교육은 지나친 문법 위주의 수업으로 진행되기 때문에 머릿 속에 문법을 체크하느라고, 알고리즘만 설계할 줄 알지 본인의 아이디어를 현실화 못하는 개발자가 많이 양성 문법이 아니라..