🐢
-
CSS SCSS Sass 뭐고 뭐가 좋은지CSS 2022. 9. 15. 00:28
CSS(Cascading Style Sheets:종속형 시트)를 작성함에 불편함을 느껴 생겨난 것이 Sass(Syntactically Awesome Style Sheets:문법적으로 어썸한 스타일시트)이다. CSS를 배우다 Sass를 처음접하면 마치 HTML을 Pug구문으로 작성하는 낯섦이 있다. 세미콜론과 중괄호를 쓰지 않을 뿐더러 잘못된 들여쓰기에 부모자식요소의 하극상이 벌어진다. 그래서 Sass ver.3부터 기존의 Sass의 장점은 가져가되 많이 생략해서 쓰는 낯섦을 없애고 CSS와 비교적 닮아있는 SCSS(Sassy CSS:멋진 CSS)가 생겨나게 됐다. SCSS는 오히려 CSS보다 먼저배우면 좋겠다 싶을 정도다. Nesting기능 덕분에 선택자의 중복을 없앰과 동시에 위계구조가 한눈에 보여서 ..
-
DevOps?카테고리 없음 2022. 9. 13. 19:46
요거 하나 만큼은 꼭 외우자! 1.소프트웨어 개발 방법론 중 하나. So, 앱,웹 같은 서비스를 빠른 속도로=애자일하게=기민하게 제공할 수 있도록 하는 모든 것. 보통은 프레임워크와 같은 도구 그 자체. 넓게는 조직문화까지도 그 의미가 확대되고 있다. Development + Operation 개발과 운영의 앞글자만 쏙쏙 따온것인데 DevOps 엔지니어 직군은 개발과 운영을 둘다 한다는 의미일까? no no no-. 앱이나 웹 서비스의 개발과 운영의 과정을 최적화를 해서 보다 빠르게 출시하는데에 초점을 두고 있다. git branch를 만들어 커밋하고 merge요청> 코드 검토 > merge > 베타브랜치에서 테스트 > 릴리즈 > 버그발견 > 핫픽스 개발부터 운영까지 아울러 모든 단계에서 생기는 요청과 ..
-
'node-sass'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.ERROR 2022. 9. 7. 20:13
1년전 포트폴리오를 업데이트를 하려했지만 데스크탑에서 포트폴리오 폴더를 찾을 수 없었다. 아마도 필요 없다고 폴더를 삭제해 버린듯.. 당황하지 말고 깃허브에서 git clone 해서 마크업 작업을 끝내고 scss를 작업하기 위해 npm run node-sass를 하는데 제목의 오류가 계속 뜨는 것. npm 버전이 올라서 그런거겠지? node-sass를 재설치하고 npm audit fix했더니 노드모듈에서 ansi-regex 버전이 업데이트 됐다. 반정규식? 이라는데 이부분에 대해 추후에 찾아봐야 겠다. 일단은 뭐가 안맞아서 재설치하고 audit하는 것이 해결 프로세스인 것만 익혔다. https://github.com/chalk/ansi-regex#readme GitHub - chalk/ansi-regex..
-
숨김 클래스.CSS 2022. 9. 7. 07:17
.hide .visually-hidden .blind .offscreen 접근성 측면에서 시각장애인을 위한 스크린리더가 읽을 수 있도록 img태그에 alt속성을 꼭 채워주는 것처럼, ✨버튼안에 span,strong과 같은 인라인블록 태그에 설명을 써놓고 대게 위의 클래스명으로 화면에는 보이지 않게 한다. 스크린리더가 불필요한 아이콘은 읽지못하게 i태그 속성에 aria-hidden을 추가해주는 것도 접근성 측면에 도움이 되는데 지금 이 사진이랑 버튼은 이런거예요! 하고 알려주는 위의 방법과는 사뭇 다르다. 화면상에는 꼭 필요하지만 스크린리더가 읽지 않고 스킵해도 될때 태그에 쓰는 속성이니 말이다. (이미 버튼안에 글쓰기 텍스트와 chevron 아이콘이 있을 때 글쓰기라는 텍스트를 스크린리더가 읽어줄 것이니..
-
<meta> 태그 metadata 메타데이터HTML/<meta> 2022. 8. 30. 03:29
메타는 그리스어로 ‘너머(beyon)’를 뜻해 현실세계를 넘어 또다른 공간. 가상세계(메타버스)를 차세대 주요 소셜 플랫폼으로 이끌어 나가겠다고 했다. 페이스북을 사용해봤다면 들어봤을 메타. → 바디태그 너머의 공간에 적어야하는 메타태그 또, 접두사 meta는 '~에 대해서(about)'를 뜻한다. → 웹페이지에 대한 부가속성, 정보를 담아내는 메타태그 예로, 페이지호환성에 대한 부가정보. 위치서비스. 오픈그래프 등등 웹컨텐츠 자체(body 태그)외에도 부가적인 데이터를 담을 수 있게 해주는 것이 바로 meta 태그이다. 보통, name과 content로 정보와 정보에 대한 값을 적는다. 경우에 따라 id도 적어준다. 언뜻보면 content에 원하는 값을 쭉- 적는게 태그에 직접 CSS를 지정하는 '인라..
-
CSS 속성 변수로 담아 사용하기CSS 2022. 8. 29. 01:29
주로 색상값을 변수에 담아 곳곳에 사용하면. 테마 변경시 변수에 담아둔 색상값만 변경하면 한번에 전부 변경된다. 일일이 하나하나 수정할 필요가 없어지고 유지보수가 용이한 코드가 된다는 것! 흔한패턴 : :root 의사 클래스에 선언해서 html문서 어디에서나 사용자 지정 속성에 접근할 수 있도록 구하는 방법. 범위를 제한해야 하는 적절한 이유가 있을 경우 달리 사용가능. :root { --main-bg-color: brown; } 아래 처럼 var()함수안에 선언한 이름을 넣어주면 그 값이 불러와 진다. element { background-color: var(--main-bg-color); } 왜 쓰는지 코드비교해보자. 반복사용하는 것을 선언하고 그 값을 뿌려준 코드. 추후에 값 변경시 일일이 찾아 변..
-
[11.21] funding has been ___ for projects토익 2021. 11. 21. 17:23
A. qualified B. deteriorated C. provided D. enhanced 펀딩. 기금이 올랐다라고 생각해 D를 했으나 올랐다는 의미보다 향상된 강화된의 의미에 가까워 by라는 전치사와 자주 쓰인다. 기금이 프로젝트에 제공되었다. 공급되었다. C가 정답이다. ㅡㅡㅡ A temporary display = it's only available this week. 다른표현 같은 말. temporary : 일시적인
-
용어 정리HTML 2021. 10. 14. 09:57
HTML에 관한 용어의 한영표기를 정리하며 모호한 개념을 명확히 해두기 위해 서적을 참고했습니다. 요소 = element = object = 객체 : HTML페이지를 구성하는 각 부품입니다. 태그는 이러한 요소를 만들 때 사용하는 작성 방법이며 미리 W3C에서 정해 두었음. 흔히, 요소와 태그를 구분하지 않고 사용함. 속성 = attribute. 태그에 추가 정보를 부여할 때 사용하는 것. 특수문자표기. 공백 non-breaking space > > greater than sign <