HTML, CSS (30) 썸네일형 리스트형 (CSS) margin이 제대로 적용되지 않을 때, margin collapsing이란? margin collapsing이란? 가끔 margin을 설정하다 보면 위쪽과 아래쪽의 margin이 제대로 적용되지 않는 경우가 있다. 이는 "margin collapsing" 때문이다. 블록 요소의 상하단 margin이 서로 인접할 때, 두 마진 중 큰 값만큼만 표시되는 현상이다. 즉, 두 마진이 합쳐져 하나의 마진으로 표시되는 것이다. margin collapsing 해결 방법 이를 해결하기 위해서는 부모요소에 overflow : auto; 또는 overflow : hidden;을 적용하면 해결된다. 해당 코드를 적용하면 부모에 BFC가 형성되어 margin collapsing 현상이 방지되고, 겹쳐졌던 margin이 제대로 나오게 된다. div.container { overflow: hidden;.. (CSS) transition 사용 방법 정리 css를 적용하다 보면 특정 요소가 변화하게 만들어야 할 때가 있다. 근데 그냥 변화시키면 상당히 부자연스럽다. 한 상태에서 다른 상태로 바로 한 번에 변화해 버리기 때문이다. 이때 변화를 자연스럽게 주고 싶다면 transition을 사용하면 된다. transition 사용 위치 transition은 변화 하기전 상태에 적용해야 한다. 즉 변화 조건(state)가 없는 곳에 적용해야 한다는 뜻이다. 예를 들어 div가 하나 있고, 마우스를 올렸을 때(div:hover) div를 변화시키고 싶다면, div:hover가 아닌 div에 transition을 작성해야 한다는 뜻이다. transition 사용 방법 transition은 아래와 같이 사용한다. 속성 작성 순서는 큰 상관이 없지만 duration보다.. (HTML, CSS) <input type = "button">과 <button>차이 , 버튼에 아이콘이 안 나오는 이유 으로 버튼을 만들고, 그 안에 font awsome의 i태그를 넣어 버튼 안에 아이콘을 넣어보고자 했다. 근데 아무리 해도 아이콘이 나오질 않았다. 처음에는 오타 때문인 줄 알았는데 다름 아닌 를 사용했기 때문이다. 를 으로 바꾸고 나니 아이콘이 아주 잘 나왔다. 와 의 차이 는 중첩된 태그를 지원하지 않는 독립적인 개체다. 따라서 태그를 안에 넣었을 때 읽어낼 수 없다. 따라서 버튼 안에 다른 요소를 넣고 싶다면 가 아닌 을 써야 한다. (CSS) 변수 사용하기 css를 작성하다 보면 특정 색상이나 폰트 사이즈를 반복해서 사용하는 경우가 많다. 이때 이 반복되는 부분을 변수를 선언해 사용하면 추후 수정에 용이하다. 변수 선언 : root : root 클래스 안에 변수를 넣으면 html 문서 어디에서든 변수에 접근이 가능해 흔히 사용된다. --main-color : 변수명 앞에는 --를 붙인다. :root { --main-color:#d61111; } 변수 사용 변수 사용시에는 var() 안에 변수명을 적는다. div { background-color : var(--main-color); } (CSS 선택자 2편) combinator, attribute란? 이전에 css 선택자 중 pseudo selector를 설명한 적이 있다. 이전 포스팅에서도 언급했지만 html 요소를 css로 꾸며주려면 정확히 어떤 html요소를 꾸밀지 알아야 한다. 이렇게 html 요소를 선택하는 하는 것을 css selector(선택자)라고 한다. css selector 종류는 아래와 같다. id와 class pseudo selector combinator attribute 이중 id와 class, 그리고 pseudo selector는 이전에 다루었고, 이번 포스팅에서는 combinator와 attribute를 다룬다. combinator combinator는 결합자라고 불리는데, 선택자를 결합하는 형태로 선택을 하기 때문이다. 부모 자식 : 부모 아래에 있는 모든 자식이 선택됨.. (CSS) 개발자 모드 css 적용 안될 때, 스타일 취소선 해결법 css로 열심히 꾸미다가 css가이 적용이 안되어서 개발자 도구를 열어보았다. 확인해 보니 해당 부분에 취소선이 그어져 있었다. 결국 취소선을 해결하기 위해 찾아봤고 그 결과 css에는 우선순위가 있어서, 스타일이 겹치면 우선순위가 높은 스타일이 적용된다는 것을 알게 되었다. 확인해 보니 내가 적용하고 싶었던 스타일은 class로 작업하고 있었고, 해당 요소에 스타일이 겹치는 id가 있었는데, id가 class가 우선순위가 높아서 class의 css가 적용되지 않는 것이었다. 참고로 css에서 우선순위는 아래와 같다. 참고로 우선순위가 같으면 더 뒤에 위치한 css가 적용된다. 속성 값 뒤에! important를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 속성 .클래스, :추상클래스.. (CSS 선택자 1편) pseudo selector란? html 요소를 css로 꾸며주려면 정확히 어떤 html요소를 꾸밀지 알아야 한다. 이렇게 html 요소를 선택하는 하는 것을 css selector(선택자)라고 한다. id나 class도 선택자 중 하나다. 그 외에도 combinator(결합 선택자), attribute(속성 선택자), pseudo element(의사 클래스, 의사요소)가 있다. 이번 포스팅에서는 이 중에서 pseudo element(의사 클래스, 의사요소)를 다룬다. id와 class는 아래 포스팅에서 다루었다. id와 class의 차이점과 사용방법 앞서 html 태그는 아래와 같은 구조로 구성되어 있다고 언급한 적 있다. content 오픈 태그 안에는 속성(attribute)을 추가할 수 있다. 속성이란 사용자가 원하는 기준에 맞.. (CSS) position의 속성 - reletive, absolute이란? position은 문서상에 요소를 배치하는 방법을 결정한다. 또한 top, bottom, left, right를 추가적으로 사용하여 요소의 위치를 결정할 수 있다. position에는 5가지 속성이 있다. static(기본값) relative : 자기 자신을 기준으로 이동 absolute : 가장 가까운 부모를 기준으로 이동 sticky : 위치 고정 (부모 영향을 받음) fixed : 위치 고정 (부모 영향을 받지 않음) 이 중 fixed와 sticky는 아래 포스팅에서 다루었고, 이번 포스팅에서는 relative와 absolute를 다룬다. (CSS) fixed와 sticky 차이, 화면에 요소 고정하기 css에서 특정 요소를 화면에 고정시키고자 한다면 position: fixed; 또는 positi.. 이전 1 2 3 4 다음
