개발세발

지난 프로젝트를 진행하면서 처음으로 제대로 된 반응형 웹을 구현해 보았다. 앞서 진행했던 프로젝튿르에선 딱히 반응형까지 고려할 일이 없다고 생각하여 항상 px로 단위를 박아두었는데, 모든 문제는 배포를 하면서부터 와장창 생겨났다. 반응형이란건 단순히 PC, 태블릿, 모바일을 대응하는 상황에서만 고려하는 것이라고 생각했다. 하지만 요즘엔 같은 PC환경이여도 모니터 크기가 워낙 상이하기에 디지털 기기에 따른 반응형을 구현하는 것과 크게 다르지 않았다. 그래서 배포한 뒤 만들어낸 웹사이트를 띄우는 것은 PC인것은 다 똑같지만 화면 스케일에 따른 반응형이 제대로 구현되어있지 않아서 아주 난리법석이 났더랬다. 그래서 이래저래 정보를 찾아보다가 em을 사용하여 모든 단위를 설정하고, 필요에 따라 반드시 고정값이 필..

리액트 공부를 하면서 참고자료로 에어비앤비 사이트를 뜯어보고 있는데 보다보니 선택자가 .test[class][class] 형태로 되어있는 경우가 왕왕 있었다. 찾고자 하는 내용이 바로 잘 나오지 않아서 chatGPT에 검색해봤더니 아래와 같은 답변을 줬다. 그런데 막상 해보니 test의 글자색도 바뀌었따. 예상으로는 1. 클래스명에 test가 포함되어 있다. 2. class이름이 2개 이상이다. 를 둘 다 만족해야 바뀌는게 정상인데 다른 결과가 나와서 좀 당황스러웠다. 무조건 2개가 아니라 - class속성 값이 2개 이상인 요소를 선택하거나 - 속성값이 test인 경우를 모두 선택하는 경우인 선택자이지 않나싶다. 굳이 저렇게 선택자를 쓴 이유가 있지 않을까.. 싶기도 한데 명확하겐 와닿지 않는다. 그 ..

선택자 중첩(Nesting) 부모 태그안에 자식 태그의 css를 작성하는 방식 ➡️ 부모 태그를 한번 더 작성해줘야하는 불편함이 사라짐 : 선택자를 선언하고 다시 중괄호를 안에 넣어주는 형식으로 사용 🚨 대표적으로 class 이름을 한 번에 바꿔줘야 할 때 중첩자를 사용해서 작성해주기 때문에 상위의 이름 한 번만 변경해주면 아래의 자식 태그는 자동으로 다 이름이 바뀌게 된다. ** nesting 시 굳이 body는 해줄 필요 없음 scss에서 calc() 사용시 .scss $bodyH: 100px; .main{ /* case - 1 */ height: calc(100vh - ($bodyH*3 - 100px)); /* case - 2 */ height: calc(100vh - $bodyH*3 - 100px..

선택자의 중첩(Nesting) : 계단형식으로 부모요소안의 태그를 모아서 관리할 수 있어 불필요한 부모 요소선택을 줄일 수 있음 변수(variable)을 사용 ➡️ CSS 속성과 값을 한번에 관리 가능 - 조건문, 반복문 사용 ➡️동적인 CSS 관리 가능 단점 : - CSS로 컴파일(complie)을 해야한다 SASS가 먼저 생기고 나중에 SCSS가 생김 요즘은 SCSS 사용 SASS와 SCSS는 서로 완벽하게 호환되지만 중괄호{} 세미콜론; 사용유무 -> SASS는 사용 x -> SCSS는 사용 SCSS가 CSS와 같은 방식 파일확장자 명 .sass .scss 컴파일 (complie) 컴퓨터는 이해하지만 브라우저가 이해하지 못하는 언어를 이해할 수 있도록 바꿔주는 것 CSS 전처리기(preprocess..