코코아클론3 노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#4 - Advanced CSS Transition 상호작용을(states) 하였을때 변화과정을 애니메이션처럼 보여주는 효과이다. 규칙1 : transition은 states가 아닌 root인 element에 들어가야 작동이 된다. 규칙2 : transiton에 변화를 준것은 states에 들어있는 것들이 기준이 되어 바뀐다. (애니메이션 효과를 볼 수있는 사이트) 참고자료 : https://matthewlein.com/tools/ceaser Transform 다른 요소의 box를 변형시키지 않고 원하는 요소를 이동 시키기 위해서 사용한는 것. 3D차원에서 움직이기 때문이다. rotate, translate, scale, skew, matrix 둥이 있다. transform mdn 에서 많은 작용들이 있으니 한번씩 찾아보는것도 좋을것 .. 2022. 3. 24. 노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#3- Learning CSS 1.1 CSS적용하는 방법 2가지. 같은 HTML파일에 HTML코드와 CSS코드를 놓는다. CSS와 HTML을 분리하는 바법 CSS코드 HTML태그를 가르키는 일을 한다. =selctor Cascading style code => 폭포처럼 위에서 아래로 순차적으로 프로그램이 돈다. 같은 명령일경우 마지막 명령을 따른다. head태그 안에서 작성하며, 태그로 적용가능하다. display(box) : block 과 inline blcok -> 옆에 올수 없는 태그들 : div, p / 높이와 너비가 있다. inline -> 옆에 올수 있는 태그들 :span,a,img / 높이와 너비가 없다. HTML은 모두 box요소를 뛰며 block형과 inline형으로 나누어진다. box의 3가지특성 margin : 박스경계의.. 2022. 3. 23. 노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#2- Learning HTML VSC사용시 반드시 지켜야할 주의사항. 1. VSC로 만들어준 폴더안에 파일을 만들어주어야한다. 2. 폴더명은 소문자로만 작성해야한다. 3. 파일명 또한 소문자로 작성해야한다. 나중에 위 문제들로 에러가 나올수 있는 사항들이니 반드시 체크해주어애한다. 웹사이트의 구성 웹사이트는 크게 Head부분과 Body로 나누어진다. head : 웹사이트의 환경을 설정함, 외부적으로 보여지지않는 설정을 해준다.(ex. 타이틀, 메타태그 등) 헤드에서 작성된 글은 웹사이트에서 content로 나타나지 않는다. body : 사용자가 볼 수 있는 contnet를 보여준다. tag와 attribute tag : "내용" 형태로 쓰인다. 웹에서 어떤 타입(?)인지 알려주는 요소이다. attribute(속성) : " 내용 " 의.. 2022. 3. 15. 이전 1 다음
