WEB/CSS
[CSS] 스타일 강제 적용 및 적용 예외
CSS를 다루다보면 하위 태그에서 일부 CSS가 적용이 안되기를 바라거나 특정 속성만 덮어쓰기를 하고 싶을 때가 있다. 하위 속성에서 특정 속성을 덮어쓰기 하고 싶다면 !important로 강제 적용을 해주고 하위 속성에 CSS를 물려주기 싫다면 not 선택자로 예외처리해주자! 1. CSS 강제 적용 p { color: #black } .example { color: #white !important } p태그의 글자색을 black으로 지정했지만 example 클래스를 물려받은 곳은 글자색이 white일 것이다! CSS를 사용하는 경우에 우선순위에 의하여 내가 적용한 폰트가 산발적으로 적용되는 경우가 있다. 이를 해결하기 위하여 강제로 전체 적용하는 방법을 알아보자 * { font-family: "Nanu..
[CSS] ::before / ::after
이번 포스팅에서는 추가 컨텐트를 삽입하기 위해서 사용되는 ::before과 ::after에 대해서 알아보겠습니다. Pseudo Element ::before과 ::after는 CSS에서 소위 pseudo element라고 하는데요. 일반적인 CSS 선택자(selector)로는 지정할 수 없는 미세한 영역을 선택하기 위해서 사용됩니다. 본 포스팅에서 다룰 ::before과 ::after뿐만 아니라 ::first-letter, ::first-line, ::selection, ::marker 등 CSS에는 다양한 pseudo element가 있습니다. pseudo element는 선택자 뒤에 붙여주는데 CSS3 문법 상 : 기호를 사용하는 pseudo class와 구분해주기 위해서 원칙적으로는 :: 기호를 사..
가상 클래스 선택자
개요 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first - 첫번째 요소 :last - 마지막 요소 :first-child - 첫번째 자식 :last-child - 마지막 자식 :nth-child(2n+1) - 홀수 번째 자식 위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있습니다. 사용법 ...
Display&Position
Display&Position div:블럭 레벨이라 한줄에 하나씩 나온다 span: inline레벨이라 공간만되면 한줄에 여러개 나온다 display:레벨 기본값 변경이 가능하다 inline:한줄에 여러개가 들어갈수잇다 inline-block:한줄에 여러개가 들어갈수잇는 box block:한줄에 하나만 들어가는 box container box Position static: 기본적으로 가지고 잇고 HTML에 정의된 순서대로 브라우저 상에 자연스럽게 보여진다 relative: 원래 잇어야하는 자리에서 지정한 위치까지 이동 absolute: 내 아이템이 담겨 잇는 박스 안에서 원하는 위치까지 이동한다 fixed: 박스를 벗어나 윈도우 안에서 지정위치까지 이동 (flex-flow:아래 내용을 묶어서 사용가능 [..