캐스케이드, Cascading 이란?

css에는 캐스케이드 라는 개념이 있다.

Cascade. 작은 폭포, 여러 단으로 된 폭포 라는 뜻이 있다.

그럼 css에서의 캐스케이드는 어떤 의미일까?

원래의 뜻처럼 폭포처럼 규칙에 따라 CSS규칙을 적용하는 것을 뜻한다.

"종속"이라고 번역을 하기도 하며, 우선순위에 따라 속성이 적용된다.

1. 시트별 우선순위

style.css > 브라우저 기본 스타일시트

- 두개에 동시에 동일한 선택자가 존재하면, 우리가 작성한 코드의 우선순위가 높다.

즉, 디폴트로 제공하는 것에 우리가 원하는 대로 추가를 했다고 생각하면 되지 않을까?

2. 코드순서

위쪽 < 아래쪽

- 위에서 아래로 흐르는 느낌으로 동일한 속성값이 있다면 가장 아래쪽의 코드가 반영이된다. 

예를들어 하나의 클래스에 1px을 반영했다가 아래쪽에 동일한 클래스에 2px을 중복으로 반영했다면, 아랫쪽의 2px이 적용되는식이다.

3. 명시도

아이디 개수, 클래스 개수, 태그 개수로 명시도 표시.

- 아이디1 태그1인 경우 1,0,1

- 클래스1, 태그1인 경우 0,1,1

--> 위의 경우 첫번째가 1 0 1로 우선순위가 더 높다.

캐스케이드 우선순위 조회하는 사이트에서도 확인해볼 수 있다.

https://specificity.keegan.st/

4. 상속

부모 태그의 css규칙 중 일부 속성은 자손들에게 상속이 된다.

-  color, font-family, font-size, font-weight, line-height, text-align등

- MDN 사이트 - CSS 속성 페이지 내에 Formal definition이라는 섹션 - inherited에 상속 여부를 볼 수 있다. 

* 현재 웹페이지에서 상속 속성을 보고 싶다면 개발자도구 > Style > Inherited from .. 에서 진하게 표기된 것으로 상속된 속성을 볼 수 있다. (왼쪽 다크모드는 한글버전)

5. 상속 속성 우선순위

조상태그에서 모두 계산된 상태로 우선순위가 적용. 가까운 조상의 속성의 우선도가 높음.

<div><p><a>텍스트</a></p></div>

이 경우 각각의 태그에 모두 글자 색이 지정되어 있다면 텍스트는 가장 가까운 a태그의 색이 반영된다. 

vs code에서 유용한 확장프로그램이 있다고 해서 설치를 했다.

번역을 해보면 웹 페이지를 미리 볼 수 있도록 작업 영역에 로컬 서버를 호스트합니다.

라는데, vs Code내에서 바로 볼 수 있어 편리한 프로그램이다. 

게다가 마소에서 만든거니 신뢰도도 높다.

설치 완료 후 파일을 보면, 오른쪽 상단에 미리보기 표시를 만날 수 있는데

이걸 클릭하면 오른쪽에 미리보기를 할 수 있단다.

그런데 막상 실행을 하고 보니 이런 오류가 발생된다.

그래서 마켓플레이스를 다시 보니 

다시 로드 필요라는 버튼이 생성되었다.

눌렀는데 오류는 동일하게 발생된다 ㅠㅠ

설명을 보아하니..

시험판으로 되어 있는데, 아직 불안정한 버전인 듯 하다.

그래서 릴리스 버전으로 전환을 했는데, 여전히 동일현상.

목록에서 해당 프로그램의 톱니바퀴를 누르면

다른 버전 설치가 있다.

하나씩 버전 다운을 시키면서 동작을 확인했다.

버전 선택 설치 후 목록에서 다시 로드 필요 버튼을 눌러줘야 한다.

어차피 설치 자체가 오래 걸리는 것은 아니기에 

하나씩 테스트 해보아도 좋지만,

23년 12월 30일 이 글 작성 기준, 나는 0.4.5버전이 정상 동작했다.

VS Code를 설치하고 바로 설치한 것이 아니라 거의 10개월전에 설치하고

이제서야 설치를 하다보니 둘의 호환성의 문제인것인지는 알 수 없지만..

혹시 이런 오류가 발생된다면, 

시험판부터 하나씩 버전을 다운그레이드 하면서 테스트 해보면 좋을 것 같다. 

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'

맥북이 조금 이상해서 모두 종료하고 재부팅을 하고 터미널에서 mysql을 시작했다.

mysql -uroot -p 를 하니 패스워드 쓰래서 쓰고 엔터.

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'

위와 같은 오류가 나왔다.

소켓을 잘 못 설정한 경우라는데..

난 그저 종료하고 재부팅 밖에 안했는데 뭐가 날아갔나 싶었다.

DBeaver에서도 로컬디비에 엑박이 뜨면서 아래와 같은 오류가 나왔다..ㅠㅠ

Communications link failure  The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.   Connection refused   Connection refused

환경셋팅 한 지 얼마 되지 않았는데.. 복기하는것도 아니고 ㅠㅠ

다양한 시행착오를 거쳤으나 생각보다 간단했으니..

mysql재시작을 하면 되는 것.

mysql.server restart

하니까 저 서버가 안돌아가고 있다고 알아서 시작해줬다.

산넘어 산넘어 또 산...ㅠㅠ

또 똑같은 걸 반복할 수 있으니 남겨두는 에러기록.

[sourcetree]'git status' failed with code -1:''

macOS에서 소스트리 연결 시 발생된 오류

맥에서의 소스트리 사용은 처음인데 이렇게 오류가 발생되었다.

그러면서 커밋할 내용들을 불러오질 못하고 있음..

결국 터미널을 통해 깃으로 풀, 푸시 등을 했는데,

충돌이 일어났을 때 해결이 어려웠다..

터미널으로 깃을 활용하는 것에 익숙해져야 하는데..

익혀야 할 게 너무 많아서 큰일..ㅠㅠ

소스트리 기본 화면에서 (깃 연동된 부분 말고..)

커맨드 + , 

를 눌러주면 설정창이 뜬다.

이 중 git탭으로 이동해서 Git버전쪽을 보면 Embedded Git으로 되어 있는 걸 볼 수 있다.

아마도 내장 Git으로 되어있는 모양.

시스템 Git사용을 눌러준다. 

(이미지에 라인 같은거 추가가 어려워서 펭귄 스티커로 위치를 나타냈다..ㅋㅋ)

그럼 파일선택이 뜨는데, 자동으로 선택이 되어 있어서 열기를 눌러주면 된다.

그럼 Git버전이 시스템Git으로 변경 된 걸 볼 수 있다.

깃 저장소 비밀번호 입력을 하라고 뜬다. 

구글 연동으로 쓰다보니까 비번 헷갈려서 큰일 날 뻔했다..

연결 후 파일을 수정하면 이렇게 커밋해야 할 파일들과 변경된 코드 확인이 가능하다.

터미널로 깃 컨트롤하려니 엄청 시간 잡아먹었는데 소스트리가 역시 편하긴 하다 ㅠ_ ㅠ