HTML,CSS,JavaScript6 HTML,CSS 웹 페이지 구현 오늘은 HTML,CSS 배운 내용을 토대로 클론코딩을 해보았다. 처음 만든 페이지는 로그인 페이지였고 쉬울거 같은 페이지 였는데 생각보다 쉽지 않았다. column이라는 이름은 매우 일반적이기 때문에 (다른 html 파일에서도 많이 사용되는 이름이라), 구분을 짓기 위해 '부모 요소__자식요소'로 이름을 짓습니다. -HTML 상태바 CSS BEM(Block Element Modifier) —추천 규칙 - block : .btn {} - elements : .btn__price {} - modifiers : .btn--big {} 이런식으로 class 값을 주면 보기 편해진다. 단점 : 클래스 선언 종류가 많아서 코드가 길어진다. 이미지는 https://fontawesome.com/ 사이트에 좋은 이미지가.. 2022. 11. 15. Animation,Transformation, Transition transition 어떤 상태에서 다른 상태로의 변화! 를 보내주는 애니매이션이다 1. transtion은 state가 없는 요소에 붙어야한다 처음 생긴곳에 있어야한다 state에 transition을 준다면 변화를 준것(예를들면 hover라면 마우스를 갖다 댄것)을 그만할경우(마우스를 뗄경우) 원래상태로 바로 돌아간다 2. transtion 에 변화를 준것들은 state에 들어있는것들이 기준이 되어 바뀌는것이다 바뀌는 것들에 한정하여 transition 이 일어날 수 있다 transition 은 상태에 따라 바귀는 요소가 있을때 사용한다 상태 ex) hover, active, focus, focus-within... -ease-in function : 브라우저에게 변화하는 방법을 알려주는 역할 line.. 2022. 11. 13. CSS 복습 2 Active,hover,focus,focus-within,visited Active - 해당 요소를 마우스로 클릭했을 때 효과를 적용시킨다. hover- 마우스가 해당 요소 위를 지나갈 때 효과를 적용한다 . focus- 키보드로 선택되었을 떄 효과를 적용한다. focus-within 부모 요소에게 적용한다. 자신의 자식 요소 중 하나가 focused 되었을 때 효과를 적용한다. visted 방문한 사이트일 경우에 효과를 적용한다. placeholder= placeholder를 직접 꾸밀 수 있게 해준다, (조건을 적용하는 : 과 차이) selection= 드래그해서 블럭했을 때 꾸밀 수 있다! firstletter = 첫 문자만 꾸민다. firstline= 첫 번째 줄만 꾸민다. Color color는.. 2022. 11. 13. HTML CSS 복습 -HTML tag사이에 넣는 텍스트가 무언가가 된다. (title,image 등) -브라우저는 아무 의미가 없어도 이해하려함. -h1 = header 글자 no.1 ~ h6까지 존재 -Header, main footer div 태그랑 같이 쓸 수 있음 태그들을 이용하여 시네마틱으로 짜면 좋음 Div - div는 의미가 없는 box -div 태그는 Block 속성 칸을 다 차지삼 span -은 짧은 text를 위한 태그 Attribute 값에는 큰 따음표 무조건 "" a=anchor를 뜻함 // link href= http reference 라고 함! // anchor 태그에만 추가 가능 target = 기본값은 self 이고 , _blank 입력 시 새 탭에서 링크가 열림 img = 다른 태그와 다르게 .. 2022. 11. 12. 이전 1 2 다음
