tose33

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes hover 태그에 해당하는 곳에 마우스를 갖다대면 다음과 같이 color:red 로 바뀐다. link, visited, active https://www.webfx.com/blog/web-design/link-pseudo-classes/ link : 아직 방문하지 않은 태그 visited : 방문한 태그 active : 태그를 눌렀을시 root https://developer.mozilla.org/ko/docs/Web/CSS/:root

http://jun.hansung.ac.kr/CWP/css/CSS%20Combinators.html CSS 연결자 CSS 연결자(Combinators) CSS Combinators 연결자(combinators)는 선택자(selectors)들 사이의 관계를 설명하는 무엇이다. CSS 선택자는 하나 이상의 단순 셀랙터를 포함 할 수 있다. 단순 셀랙터 사이에, 우리는 jun.hansung.ac.kr 자손 선택자 (descendant selector): div h1 {} : div를 조상으로 갖는 h1 태그 자식 선택자 (child selector): div > h1 {} : div를 부모로 갖는 h1 태그. (바로 상위 조상)

다음과 같이 이미지 주위에 색상 태두리를 만들고싶다. 방법은? 위와 같이 에 300px의 width를 주면 px은 절대적값이기 때문에 웹의 크기가 바뀌어도 그대로있고 부모인 의 width는 50vw로 vw는 상대적값이기 때문에 웹의 width 를 늘리면 이렇게 이미지는 그대로, div의 border는 늘어나게 된다. 해결방법: 위와 같이 의 크기도 상대적인 값인 100%로 주면 된다. 는 의 자식이기 때문에 의 박스 크기가 변경되도 responsive하게 따라가게 된다. 이미지 아래와 빨간태두리 위에 여백은 img의 display를 block로 설정해주면 없어진다. 이미지에 태두리를 두르는 방법이라기 보다 상대적 값을 언제 왜 이용하는지와 부모와 자식간의 관계에 대해 기록해놓고 싶었다.

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements p::before, p::after 다음과 같이 태그가 있다. 이렇게 pseudo element를 이용해 특정 태그의 일부분에만 스타일을 입힐수 있다. 여기서는 태그의 before과 after에 content를 추가하고 스타일을 변경하고 있다. pseudo element에 content가 없다면 위와 같이 의 after에 스타일을 입혔다. 여기서 content를 지운다면 content만 지웠음에도 배경색등 모든 요소들이 사라진다. 하지만 는 이미지 자체가 content로 간주되므로 pseudo element에 content를 추가해도 보이지 않는다. pseudo element의 parent는 해..