CSS5 fixed position의 element를 화면 중앙에 배치하기 css file .centering { positioin: fixed; margin: 0 auto; // vertical centering top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } 2020. 5. 3. CSS 우선순위 (Cascade) CSS는 기본적으로 더 나중에 작성된 것이 우선순위가 높다. 그러나 항상 그런 것만도 아니며 조금 더 복잡한 구석이 있기 때문에 주의해야한다. (미리 밝혀두자면 작성 위치에 따른 우선순위는 inline > style태그 > style.css 이며, 본 글은 같은 element에 대해 붙었을 때 CSS가 누구의 손을 들어주는지에 대해 작성했습니다.) 어떤 선택자가 이기는지는 다음 순서에 따른다. (1위가 가장 우선순위가 높다.) 1. Importance 2. Specificity 3. Source order 1. Importance 아래와 같이 !important를 붙여 준 것이 가장 우선순위가 높다. h2 { color: red !important; } 2. Specificity specificity는 .. 2020. 3. 24. CSS의 단위 사이트 레이아웃을 구성하면서 왼쪽 부분에 사이드바(주황색 부분)를 만들고 싶었다. 위 그림과 같이 화면 전체의 15%정도(?)를 차지하도록 하고싶었는데, width: 15%으로는 꿈쩍도 하지 않았다. 그래서 이것을 해결할 방법을 알아보다가 새로운 단위들을 더 알게되어 이렇게 정리하게 되었다. CSS의 단위는 고정적인 길이(absolute length)가 있고, 상대적인 길이(relative length)가 있다. 1. 고정적인 길이(Absolute length) 고정적인 길이는 어느 화면으로 보든지 같은 사이즈로 나타난다. 요즘에는 휴대폰, 패드, 노트북 등 다양한 기기로 보기 때문에 고정적인 길이를 사용하는 것을 추천하지는 않는다. cm centimeters mm millimeters in inches.. 2020. 1. 10. [CSS] 마진 겹침/ 상쇄(margin collapsing) 마진 겹침 현상은 top margin과 bottom margin이 겹쳐질 때 서로 상쇄되는 것을 말한다. 이렇게 말하면 이해하기 어려울 수 있으나 아래 그림을 보면 쉽게 이해할 수 있다. 각 박스 안에는 margin 값이 들어있다. 노란색 박스의 margin은 100px이고 주황색 박스의 margin이 50px이라면 둘 사이의 공간은 150px만큼 떨어져 있어야 하겠지만, margin collapsing 현상에 의해 큰 값으로 상쇄된다. 따라서 100px이 되는 것이다. 주의사항 음수 마진이 포함된 경우는 가장 큰 양수마진과 가장 큰 음수 마진의 합으로 상쇄된다. 부동 요소(float)나 절대적으로 위치가 지정된(absolutely positioned) 요소의 마진은 상쇄하지 않는다. 보더, 패딩, 인라.. 2020. 1. 8. [CSS] Box model (박스 모델) 왜 Box model(박스 모델)인가? 브라우저의 렌더링 엔진이 문서의 레이아웃을 계산할 때 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다고 해서 붙여진 이름이다. (CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다.) 박스는 어떻게 구성되어 있는가? 박스는 크게 Content area(내용물 부분), Padding(안쪽 여백), Border(테두리), Margin(바깥 여백)으로 이루어져 있다. 각 요소를 예시와 함께 살펴보자. Content area 이미지나 비디오 등 요소의 실제 내용 부분을 나타낸다. 콘텐츠 영역의 크기는 width, height가 있다. Padding (안쪽 여백) 컨텐츠 영역 주위의 빈 공간의 크기를 나타낸다. padding.. 2020. 1. 8. 이전 1 다음
