반응형 개발/CSS33 *{}와 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. li 태그에서 들여쓰기 하는 법 li 태그에서 들여쓰기 하는 법 li 태그는 list의 약자로, 목록을 만들때 사용한다. li태그는 단독으로 쓰이지 않으며 항상 ul태그 혹은 ol태그 내부에 들어간다. li 태그는 단순히 리스트 나열 뿐 아니라 메뉴등을 만들때도 사용한다. 보통 li태그를 사용하면 다음과 같이 렌더링된다. 목록1 목록2 목록1 목록2 목록3 목록3-1 목록3-2 출력결과 ul태그 내부의 li태그에는 보시다시피 마커가 찍히는데, 마커를 원하지 않는 경우에는 css로 어떻게 설정해야 할까. list-style-position : 목록의 마커 위치를 정한다. li{ list-style-position : inside /* list-style-position : outside : 기본값 */ } text-indent : 시작부.. 2022. 2. 19. 이전 1 2 3 4 5 6 7 8 9 다음 반응형
