반응형 개발/CSS34 업무를 하며 느낀 styled-component와 sass 컨셉 스타트업의 프론트엔드 엔지니어인 나는 다음의 업무들을 하고 있다. 마케팅팀과 협업하여 자사 랜딩페이지 유지보수(줄여서 웹작업) SQL로 데이터 추출 내부 플랫폼 유지보수 새로운 어드민(관리자페이지) 작업(0부터 만드는 중) 위 4가지 업무중 웹작업(1번)과 어드민(4번)을 통해 styled-component와 sass의 컨셉을 실감할 수 있었다. sass는 어드민 작업에 들어가면서 처음 사용하였고 styled-component는 교육생시절부터 써온 친숙한 스택이다. 웹 작업은 마케팅지원이 주된 업무로써 가장 빠른방법으로 다양한 실험을 하고 있는 홈페이지이다. 그러다보니 각 페이지의 ui가 모두 다르다. 때문에 컴포넌트간의 의존성을 없애버리는 styled-component를 사용했던 것이다. styled-.. 2022. 4. 14. *{}와 Cascading 쉬운 내용이라 생각했는데, 또 실제로 써먹는건 전혀 다른 문제인것 같다. 오늘 코드리뷰때 설명들은 내용이라 기록 배경: 과거에 작성된 *{}로 생긴 사이드이펙트를 해결하는 과정에서 효율적으로 해결하고자 코드리뷰때 스몰톡 요청 !important 로 해결하면 한방에 끝나지만, 이는 또다른 레거시를 만든다고 생각했음. (요새 읽고 있는 '소프트웨어 장인' 이 한 몫 했다.) 설명을 들으면서 아주 간단한 방법을 안내 받았고 이를 캐스케이딩이라 부른다는 것을 알게 되었다. 아주 쉬운 방법을 떠올리지 못하고, 막상 실전에선 이상한 복잡한 방법들을 쓰게 된다. 이런데서 실력차이가 나는듯 캐스케이딩이 뭘까? 밑에 설명 * { } 해당 태그안의 모든 태그에 싹 다 표현된다. * { 별표 스타일은 캐스 케이딩이 아니라 .. 2022. 3. 9. 리플로우를 줄이는 CSS작성 1. 브라우저 렌더링 렌더링 엔진 : DOM 트리, CSSOM 트리를 해석하여 렌더트리 생성 이 과정에서 렌더링이 일어난다. html을 파싱하여 dom tree 생성, css 파싱하여 cssom tree 생성 Layout (Reflow) : 배치가 조금이라도 바뀌면 발생한다. 배치가 바뀌지 않으면 생략 Paint (Repaint) : 그리기 - 이 과정은 피할 수 없음 DOM 변경하면?? Render Tree를 변화시킨다. -> reflow가 일어나면 결과적으로 추가 렌더링 Repaint : 한 요소의 속성값에 변화가 있지만 전체 레이아웃에는 영향이 없을 때 visibility, outline, background-color 등 Repaint 과정에서 문서내 DOM Tree의 다른 노드들의 속성도 검증 .. 2022. 3. 6. 다른 요소에 hover 효과 넣기(css 결합자를 이용) css결합자 이용 #a:hover ~ #b { background: yellowgreen; } 안녕하세우 감사해유 잘있어유 다시만나유 아리아리랑 쓰리쓰리랑 아침해가 뜨면 아침해가뜨면 매일 같은 사람들과 다 멋지게 사는거야~~!~!~! 에 마우스를 댔을때, 가 연두색이 된다. 이를 자유자재로 이용하기 위해서는 CSS 결합자를 알고 있어야 한다. 자손 결합자 : 공백 body li{ background:yellow; } 자식 결합자 : > 직속 자식 노드 선택 body > .containor { background: yellow; } li { list-style-position: inside; text-indent: -20px; padding: 10px; border: 1px gray solid; backg.. 2022. 2. 21. 이전 1 2 3 4 5 6 7 8 9 다음 반응형
