Still growing

mixins와 @extend의 compile 결과 차이 mixins 각 속성 설정을 @include한 선택자 내에 추가한다. 단점 - 같은 설정이 @include 할 때마다 중복되어 결과물의 크기가 커진다. @extend(inheritance) @extend한 선택자들을 모아서 그룹화하고, 속성 설정을 적용한다. 단점 - 관련 없는 선택자들이 그룹화된다. https://medium.com/stories-from-the-keen/when-to-use-extends-vs-mixins-in-sass-b09d55abd53 When to use — extends vs mixins in SASS SASS provides two main ways to reuse styles — @extend and mixins — ..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. PostCSS vs Scss ? 결론부터 PostCSS는 CSS 후처리기, Scss는 CSS 전처리기입니다. 실행되는 시점이나 방법이 다르기 때문에 한 프로젝트에 둘 다 적용할 수 있습니다. 즉, 둘 중 하나만 선택할 필요는 없으며, 필요한 경우 각 장단점에 맞게 기능을 취사선택하여 사용하면 됩니다. 동시에 사용하는 경우, Scss로 작성된 파일이 컴파일을 통해 CSS로 변환되고, 변환된 CSS는 다시 PostCSS 플러그인에 의해 최종 변환됩니다. PostCSS란? [공식 사이트] CSS Postprocessor(후처리기). JS 플러그인을 사용하여 CSS를 변환하는 도구입..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. HTML Semantics semantic이란 코드 조각의 의미입니다. 다시 말해 해당 코드의 목적이나 역할을 뜻합니다. Semantic Element를 사용하여 HTML을 작성하면 아래와 같은 이점이 있습니다. SEO 최적화 - 검색엔진이 중요한 태그(ex. header)를 알기 쉽다. 접근성 강화 - 시각장애인이 화면 판독기로 페이지 탐색 시, 화면 판독기가 마크업을 푯말로 사용할 수 있다. 디버깅 용이성 증가 - 코드의 의미를 이해하기 쉽다. Semantic Element 종류 문서 혹은 본문 내부의 제목이나 로고, 저작 정보 등 메타 정보를 표기합니다. HTML Sem..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. HTML이란 HyperText Markup Language의 약자로 사용자가 페이지를 넘나들며 정보를 얻을 수 있는(HyperText) 문서를 태그(tag)를 이용한(Markup) 문법으로 만드는 언어입니다. 기본 구조 Let's study HTML! 기본 구조 주요 태그 Semantic HTML 최상위 레벨에 html tag, 그 하위 레벨에 head, body tag 작성합니다. head tag head tag 하위에는 페이지에 표시되지는 않지만 페이지에 필요한 메타데이터를 작성합니다. meta tag 문서에 대한 설명. name과 content 특성을 사용하여 웹 로봇에..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. DOCTYPE이란 무엇인가. 항상 코드의 맨 앞에 적으면서 무엇인지 궁금했던 DOCTYPE을 알아봅니다. WHAT DOCTYPE은 문서 형식 정의(DTD, Document Type Definition)입니다. HTML 태그는 아닙니다. WHY 문서 형식 정의는 SGML(Standard Generalized Markup Language) 계열의 마크업 언어에서 문서 형식을 정의하는 것입니다. 웹 페이지는 초기에 넷스케이프 내비게이터(Netscape Navigator)용과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)용으로 두 가지 버전이 있..