CODE_PLAN

확장에 들어가서 vscode styled components  를 설치해주면 적용됩니다!

role 속성은 웹 접근성을 위해 위젯, 구조 및 동작에 대한 의미 정보를 전달하고 element의 확장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할을 하는 속성입니다.

html 태그만으로 각자 가진 의미가 있어 해당 element가 어떠한 역할을 하는지 간략하게 알 수 있지만 더 자세히 이 element가 무슨 역할을 알려주기 위해 role 속성을 선언해주는 것입니다.

그림이 렌더링되지 못할 때 나타날 문자열을 지정하기 위한 값입니다.

처음에는 템플릿이 무엇인지 몰랐어서 혼자 스스로 구글링하다가 웹사이트 템플릿이 연관으로 나와서 알아보니

웹 사이트를 쉽게 만들어주는 무엇이라고 하는것 같았습니다.

좀 아닌것 같아서 주변에서 프로젝트 작성시 템플릿이 무엇인지 선배님에게 여쭤보니 여기서 뜻하는것은 일종의 코드파일,작성 형식이라고 말씀 해주셨습니다. 

(결국, 혼자 스스로 처음검색한것과 좀 다를수 있었고, 조금은 다른의미로도 다가올수 있는것 같습니다.) 

ex) 즉 템플릿이란 componets, pages, store 등을 사용해서 프로젝트 만들때 파일형식 같은것을 말합니다.

(여기선 react 을사용했으니 => react 템플릿)

1.

ctrl + shift + p 를 눌르면 

 이런창이 나오는데 여기에 settings / workspace 등을 검색해서 emmet 설정하는 위치나 setting.json 파일위치로 갈 수 있습니다.

 2. 또한 밑의 사진과 같이 설정창으로 클릭으로 들어가서 검색창에 입력해서 할 수 있습니다.

위사진과 같이 입력하면 나오는경우가 있는데 

그냥 npm을 npx로 바꾸고하면 해결됩니다!

프로젝트 img 에 가상요소 적용중 적용되지않는 문제사항으로 인해 알게된 사실.. 

웹 프로젝트에 img 태그에 가상요소를 적용했는데 개발자도구에는 after, before 가 적용됬다고 나오지만 

실제로는 적용이 안되는상황이 계속되어서 원인이 먼지 ㄱ생각하다가 어느글을 보고 알게되었습니다.

<img>태그와 같이 

 닫는 태그가 없는 경우에는 ::after와 ::before와 같은 가상요소(Pseudo-element)를 사용할 수 없다고 하네요

참고>

https://jaeheon.kr/258

의사 요소(pseudo-element)는 해당 HTML 요소의 특정 부분만을 선택할 때 사용합니다.

대표적인 CSS 의사 요소

CSS에서 자주 사용하는 대표적인 의사 요소는 다음과 같습니다.

- ::first-letter
- ::first-line
- ::before
- ::after
- ::selection

참고>

http://www.tcpschool.com/css/css_selector_pseudoElement