728x90

css 2

(5) - CSS( State / transition / transformation)

1. state (1) button:active => 버튼을 클릭했을때 (2) button:hover => 마우스를 올렸을때 (3) button:focus; => active와 비슷하다고 생각할수 있는데 키보드를 눌렀을때 (4) a:visited{ color:tomato; } =>링크를 방문하면 색이 tomato 로 바뀐다. (5) focus-within => focused인 자식을 가진 부모 element에 적용된다. 2. transition 어떤 상태에서 다른 상태로 가는 변화 과정을 애니메이션으로 보여주는 것 Go home a태그에 마우스를 올렸을때의 변화과정을 애니메이션으로 보여주는 코드 color,background-color를 대조시켜서 변화를 선명히 느낄 수 있다. ease-in-out을 써..

Frontend/Css 2022.10.24

(1)- 브라우저와 웹사이트의 이해

그동안 의식하고 보지 않았지만 우리가 자주 접속하는 웹사이트의 구조는 기본적으로 Title, text, image로 이루어져있다. 웹사이트는 아주 많이~ interactive 할수도 있고, 타임즈같은 기사 사이트처럼 Title, text, image 로만 이루어질수도 있다. 우클릭해서 페이지 소스를 보면 다양한 들이 text를 감싸고 있다는 것을 알 수 있다. text로 이뤄진 파일들을 복사해서 프린트한다고 아무일도 일어나지 않는다..! 그렇다면 저 많은 소스들을 복사해서 브라우저에 실행시키면 어떤일이 생길까..? 그렇다..! 브라우저는 내가 사용하는 코드를 읽고 웹사이트를 만들어준다..! 이 text들은 사실 html css javascript로 이루어져있다..! 다음부터 본격적으로 HTML을 시작해보..

Frontend/HTML 2022.10.20
728x90