IT 개발 블로그

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을 써..

pseudo Selector는 좀 더 세부적으로 element를 선택해주는것이다. 학원다닐때 안배워서 이번에 인강으로 처음 알게 된 기술..! 익숙해지면 id,class보다 훨씬 더 자주 사용하게 될것 같다.! 자바스크립트 배울때 비슷하게 해봤던것같은데 css로도 할 수 있다니 넘 신기방기~ 예를들면 이렇게 span으로만 이뤄진 코드에서 마지막 span의 color만 red로 바꾸라는 문제가 있다. 해결책은 두가지인데 앞에서 배운것처럼 span에 id,class를 주는방법 다른 하나는 pseudo selector를 사용하는 방법.! n개를 사용해 홀수/ 짝수로도 색을 바꿔 줄수 있다..! pseudo selector의 두번째 사용법은 이렇게 p태그 안에있는 span의 색만 바꾸려면..? 부모 안에 속하는..

1. class 같은 이름으로 묶을 수 있을때 사용하는것이 class..! id는 고유해서 한개만 쓸수있지만 class는 여러번 사용할 수 있다는 장점이 있다..! 표기법은 아래와 같다..! 2. layout(position) layout은 네가지로 나눌 수 있다. fixed,static,relative,absolute 1) position: fixed; body에 height를 길게 주고 스크롤을 움직여도 그 자리에 고정된 상태..! 다시말해 fixed를 사용하면 레이어를 부수고 다른 레이어에 위치해있을 수 있다..! 그래서 모든것의 가장 위에 있게 된다. 2) position: static; 정적인 상태로 default로 적용된다..! 3) position:relative; element가 처음 위치..

1. block block의 개념은 block은 box개념이기 때문에 옆에 다른 요소가 올 수 없다. 위사진을 보면 빨간색 div 한개는 사실 세개의 div로 이루어져있다는것을 알수 있다. block의 대표적인 예로는 div, header, footer가 있다. 2. inline inline의 의미는 in the same line이라는 뜻으로 같은 줄에 위치할수 있다. inline의 예로는 span, link, image등이 있다 그렇다면 block => span span => block으로 바꾸는 것이 가능할까?? 결과적으로는 가능하다..! div의 display를 inline으로 span의 display를 block으로 바꿔주면된다..! 즉, display 속성을 변경해주면됨..! 또하나 중요한것은 ..

1. HTML 연결방법 1) 하나의 HTML파일에 HTML코드와 CSS코드를 놓는 방법 head안에 style속성을 추가해준다. 2) CSS와 HTML을 분리 두번째 방법은 style.css라는 파일을 따로 만들고 link를 걸어준다. relationship은 stylesheet라고 표기해준다. 더 좋은 방법은 두번째 방법인데 그 이유는 하나의 css파일을 link를 이용해 재사용할 수 있기때문이다. 2. 작성법 태그를 하나 지정하고(selector) 중괄호안에 원하는 속성값을 넣어준다. css의 의미는 castcading stylesheet 인데 다시말해 브라우저가 css코드를 읽을때 위에 있는 코드부터 차례차례읽는다는 뜻 결국 가장 마지막 코드가 읽힌다.