프론트엔드
-
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 등)도 섞여 콜라보레이션이 잘 됨 단독으로 동작할 때 빛이 나고, 결과물이 누구나 접속 가능한 홈페이지라는 것이 큰 장점 어디서든 결과물에 쉽게 접근할 수 있고, 여러 환경, 상황에서도 실행해볼 수 있음, 강력한 접근성은 다른 시각화 도구보다 가장 중요한 포인트 난이도 또한 높지 않아서 문법이 아주 간단하고, 로직이 간단 현재, 대다수의 프로그래밍 교육은 지나친 문법 위주의 수업으로 진행되기 때문에 머릿 속에 문법을 체크하느라고, 알고리즘만 설계할 줄 알지 본인의 아이디어를 현실화 못하는 개발자가 많이 양성 문법이 아니라..