css. transition, transformation
transition 명사 (다른 상태·조건으로의) 이행(移行)[과도(過渡)] transition 상전이 transition이란 어떤 상태에서 다른 상태로의 변화를 애니메이션으로 만드는 방법이다. 상태는 직전에 배운 state. 예를들면 hover의 경우 마우스를 올렸을때 다른 상태로 변화를 애니메이션으로 만들 수 있는 것이다. 위 코드처럼 transition은 항상 root부분에 적용한다. root에 있을때는 마우스를 뺄때 애니메이션이 자연스럽게 역순으로 원위치 되는반면 hover쪽에 들어가있으면 마우스를 올릴때는 상관없지만, 뺄때 transition이 적용되지 않는다. 이유는 모르겠다 transition 에 all은 해당 태그 내에 변화하는 모든 항목을 말한다. 위의 경우에는 background-col..
css Pseudo selectors
1. Pseudo Class Pseudo selector는 영어단어와 잘 연상이 안되지만 의사클래스(선택자에 추가) 를 이용해서 선택한 요소가 특별한 상태일때 만족시키는? 한국말은 어렵고 쓰는 상황을 보면 이해가 된다. https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 의사 클래스 - CSS: Cascading Style Sheets | MDN CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 developer.mozilla.org 이런식으로 first-child라는 Pseudo class를 선택자에 ..
CSS의 Class, flexbox, position
1. class css에도 class가 있다. 자바스크립트의 클래스와는 상관이 없다. 특정 엘리먼트를 지정하고 싶을때 태그에 id를 만들어서 css selector로 지정했다. 근데 id는 유일하다. 그래서 이렇게 여러개가 반복되는 작업을 할때 id를 쓰면 id를 바꿔주면서 똑같은 코드를 반복해야 한다. id는 유일하기 때문에. 이럴때 쉽게 쓰는게 class이고 선택자는 . 이다(id의 선택자는 #) 2. flexbox div 는 블록이다. 블록은 옆에 아무것도 올수없다. 이 블록을 가로로 놓고싶을땐 설정해서 inline으로 만들어주면 된다. inline은 높이와 너비를 가질 수 없기 때문에 브라우저에서 div가 눈에 보이지 않는다. 그땐 inline-block으로 설정한다. 하지만 inline-bloc..
margin,border,padding
margin, border, padding을 이해하기 쉬우려면 border를 기준으로 생각하면 된다. border(경계선) 바깥에 있는 공간이 margin, 안쪽에 있는 공간이 padding이다. 살구색으로 색칠된 공간이 body태그의 마진인 50px이다. div1,2는 마진이 20px 씩 있어서 상하좌우에 공간을 두고 겹쳐있지만 배경이 보라색인 div3는 마진이 0px이라서 윗쪽과 왼쪽이 div2에 붙어있다. 마진이 없으면 상위 블록에 밀착되는구나. 그리고 블록들이 검정색 경계선을 가진 이유는 div전체에 border: 2px solid black이라고 입력했기 때문이다. padding은 border안쪽으로 있는 공간이다. div2와 div3에 hello를 입력했다. div2에는 패딩이 없고 div3에..
HTML tag, attributes
HTML은 웹사이트의 뼈대이다. 여기서부터 여기까지는 제목이고, 여기서부터 여기까지는 본문이고, 여기서부터 여기까지는 이미지고, 여기서부터 여기까지는 링크다. 여기서 제목, 본문,이미지,링크를 지정해주는것이 tag다. attribute(속성,특성)은 사용자가 원하는 기준에 맞도록 요소(태그)를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말한다. https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. developer.mozilla.org https://developer.m..