서론SCSS를 사용하는 가장 큰 이유이자 핵심이다. 컴포넌트를 재사용하고 컴포넌트끼리의 결합을 통해 하나의 큰 시스템을 구축한다. html과 css만으로는 그런 방법을 사용할 수 없는줄 알았는데 SCSS를 이용하면 객체지향적으로 코드 작성이 가능하다.파일 구조base/components/layout/pages/themes/abstracts/vendors/main.scss이 형식은 SCSS 뿐만이 아니라 리액트나 뷰와 같은 다른 라이브러리에서도 일반적으로 사용한다. 반드시 이 구조를 사용해야 한다는 것은 아니지만 일반적으로 많이 사용하는 구조이니 SCSS에서도 사용하면 쉽게 적용 가능하다.  폴더별 예시 파일 @use이제 해당 폴더에서 컴포넌트를 만든 후 다른 컴포넌트에서 사용하기 위한 키워드는 @use ..

국비 교육을 들으며 Saas를 처음 배워보았다. 처음 SCSS를 사용해보고 나서 든 생각은 정말 프로그래밍 언어와 다를게 없다고 생각했다. 파일 관리를 모듈 단위로 한다는 점에서 리액트와 뷰랑 사용법이 유사하다고 생각이 드는데 이렇게 코드를 작성하면 바닐라 JS에서도 라이브러리를 쓰듯 코드를 작성하는게 가능할 것 같다는 생각이 들었다.  다음으로는 코드의 가독성이 너무 좋다. 또 if 의 사용으로 인해 정말 프로그래밍 언어처럼 코드를 작성할 수도 있다. CSS에서 해당 기능을 사용할 수 있다는게 신기했다.  그런데 해외 코드를 읽으며 SCSS는 정말 많이 봤지만 국내에서는 인지도가 조금 떨어지는 것 같기도 하다. 리액트나 뷰는 JS 를 쓰는 거의 모든 기업들이 사용을 하고 있지만, SCSS는 지원 자격에..

처음에는 웹을 만들 때 웹을 큰 하나의 화면으로 보고 모든 요소를 그 위치에 맞게 조절해야 하는 줄 알았는데 사이드바, 본문 푸터등 큰 틀을 먼저 잡아서 하나의 큰 화면을 만든다는 것을 알았다, 이 전에도 헤더 푸터와 같은 내용을 배웠지만 그걸 구현하는 방법을 몰랐었는데 다시 한 번 짚고 넘어가니 쉽게 이해할 수 있었다. 또한, 패딩과 마진같은 테두리 안에 있는 용어에 대해서도 다시한번 생각해 볼 수 있었다. 박스모델 - 블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 (가로로 100%) - 인라인 레벨 요소: 태그의 콘텐츠만큼만 영역을 차지하며 다른 요소가 올 수 있음 (가로로 해당 크기만큼) 박스 모델의 기본 구성 - 콘텐츠 영역 (content) - 패딩 (paddi..

이번 단원에서는 목록과 표의 스타일에 대해 배웠다. 목록은 쉽게 공부할 수 있었지만 표를 공부하는데는 조금 시간이 걸렸다. 내가 테이블에 대해 어렵게 생각한 탓인지 기초 지식이 부족해서 그런것 같아 이전에 표를 생성하는 html을 한번 보고 공부하니 조금 쉽게 이해를 할 수 있었다. 1. 목록 스타일 (list - style) 목록 스타일은 list - style - type 속성을 이용하여 정할 수 있다. 이 떄 스타일의 속성값의 종류는 아래와 같다. 종류 설명 예시 disc 채운 원 모양 ● circle 빈 원 모양 ○ square 채운 사각형 모양 ■ decimal 1부터 시작하는 10진수 1,2,3,... decimal - leading - zero 0으로 시작하는 10진수 01,02,03, ....

이번 단원에서는 텍스트의 시각적 효과에 대해 다룬다. 따라서 글씨의 크기, 색, 글씨체 그리고 왼쪽, 오른쪽 정렬과 같은 내용이 주를 이룬다. 지금 내가 쓰고있는 이 글에서도 글씨의 색을 바꾸거나 필기체를 바꾼다거나 하는 옵션이 있는데 그런 버튼을 클릭하게 되면 css 상에서 변하도록 설정해 놓은 것 같아서 신기했다. 텍스트의 효과를 바꾸는 속성 font-family (글꼴 지정) : 주로 태그와 같은 텍스트를 사용하는 요소에서 사용된다. 기본형은 font-family : | [,] 으로 사용 → 글꼴을 2개 이상 지정할 때에는 사이에 쉼표를 넣어 사용 → 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 글자가 깨질 수 있음 font-size (글씨 크기 지정) : 글자 크기의 단위는 px이나 pt로..

저번 단원에서 html을 마치고 css를 처음 시작했다. css는 웹의 보이는 모습을 만들고 움직이는 형태까지 만들 수 있다길래 어렵지 않을까 생각했었는데 생각보다 쉬웠고 재미있었다. 아 그리고 하나 궁금증이 생겼는데 ID선택자는 문서에서 한 번만 적용할 수 있다고 한다. 그러면 굳이 ID를 만들지 않아도 인라인 스타일을 사용해서 원하는 줄의 스타일을 바꾸면 되지 않을까하는 것이다. 그런데 지금 생각해보니까 외부 스타일을 이용하기 위해서는 ID 선택자를 쓸 수밖에 없을 것 같다. CSS(Cascading Style Sheet) CSS를 사용하는 이유 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 CSS의 스타일형식 선택자 {속성1 : 속성값 ..