나혼자 개발노트

※Animation css속성 애니메이션: 트랜지션과 트랜스폼을 이용한 움직임처럼 나타나지만, 다른 점은 조건만 맞으면 혼자 알아서 돌아간다. *transition과 같이 상용하지 말 것 @keyframes 이름 { 0% { css속성들; } ... 100% { css속성들; } ----------------------- from {} (숫자% 사용 가능) to {} } - 애니메이션 속성 - 1) animation-name: keyframes 이름으로 해당 요소에 애니메이션 연결 2) animation-duration: keyframes(애니메이션)을 동장 시킬 시간 단위 - 초(s) 3) animation-timing-function: 속도 ease, ease-in, ease-out, ease-in-..

※CSS3 슬라이드 실습 ＠html구조 -wrap이라는 큰 박스 안에. box_ul이라는 ul박스가 있고, 그 안에. box_li라는 li 박스가 5개가 있다. -li 박스 안에 img와 text가 들어갈 div 박스 2개 가있고 text_li 박스 안에는 p태그로 이루어진 글씨가 있다. @css 1. 우선 body {magin:0} , ul {margin:0 , padding:0, list-style:none}을 적용하여 기본 스타일들을 초기화시켜 준다. 2.. wrap클래스에 배경색:검은색, magin-top:300px 을주어 위에 여백을 주어 body로부터 공간을 떼준다. width * height ( 100% * 177px)를 주고 position :relative를 적용해 준다(ul에 가운데 정..

※transition 실습(슬라이드) 1. 우선 구조를 보면 outer라는 박스 안에 img 2개의 박스가 들어가 있고 , box라는 박스 안에 label태그가 있고 그 안에 빨간색 버튼이 있는 구조이고, input은 img 박스 위에다가 위치시키면 될 것이다. 2.css로는 outer이라는 박스에 widht*height 값을 정해주고 position:relative (img를 부모를 기준점으로 하여 위치 정해야 돼서) overflow:hidden을 걸어 넘치는 걸 가려준다. 그리고 boder을 사용해 겉에 빨간색 테두리를 만들어준다. 3.img 2개 태그는 position:absolute를 사용하고 top:0 , left:-100% 를 사용하여 박스 왼쪽에 위치하게 하고 outer에 overflow:h..

요번 주는 광복절과 대체휴무일 이 월요일에 적용되어서 화요일까지는 수업이 없는 날이라서 저번주에 배웠던 걸 위주로 더 알아보는 시간을 가지도록 할 것이다. 1.transtition 시간을 적용해 주는 속성이다. -display와 background에서는 transition이 적용이 안된다. -opacity 나 transform에서 transition을 주도록 하자. 2. 이미지 적용 시 -img태그로 이미지 줄 때는 width값을 설정해 줘야 되는데 height 값은 설정 안 해줘도 이미지가 적용이 된다. -background로 이미지 줄 때는 width*height값을 설정해 줘야지 이미지가 적용이 된다. ex) 화면 넓어질 때 안에 img 커지게 하려면 부모태그에 width:100% , height:..

※프레임워크와 라이브러리는? 둘 다 사람들이 미리 만들어 놓은 재사용이 가능한 코드의 집합입니다. 이를 통해 개발자는 일상적인 작업들을 처리할 수 있게 됩니다. 하지만 둘 사이에는 분명한 차이점이 존재합니다. 이 둘의 이념 차이를 설명하기 위해서 집을지을 때 하나의 예로 들어 설명해 보겠습니다. 라이브러리는 집을 지을 때 맨땅에서 집을 짓는 것과 같다고 비유를 할 수 있습니다. 집을 지을 때 여러분이 원하는 디자인대로, 원하는 구조대로, 원하는 방배치대로 집을 지을 수 있습니다. 반면에 프레임워크는 집을 새로 구매하는 것과 같다고 할 수 있습니다. 그래서 집을 지을 때 발생하는 문제에 대해서 신경 쓸 필요가 없는 대신 원하는 형태대로 집을 갖는 것도 불가능하다. 왜냐면 이미 집이 완성된 상태로 구매를 한..

※햄버거 버튼 css로 움직이게 바꾸기 & 버튼 누르면 아래 메뉴 나오기 @햄버거 버튼 css로 바뀌게 하는 법. -우선 화면상 맨 위에 있는 btm_ham이라는 input:checked 박스 그 밑에 btn_hamberg 태그를 보겠다. 1. #btn_ham {display:none:}-우선 input의 checked 박스를 없애준 것이다. 2.. btn_hamberg :label태그를 나타내는 것이다. label태그는 input 속성이기 때문에 inline 레벨이라서 그냥 쓰면 크기를 설정해 줘도 영역을 잡질 못한다. 그래서 display:block을 적용해 block 레벨로 바꿔주고 가로*세로 (50xp*50px) 크기를 지정해 버튼 박스 크기를 만들어준다. padding활용해서 안에 여백 10px..

오늘은 저번 차수에서 배운 transform, transition, hover을 활용해 몇 가지 기능을 살펴보도록 하겠다. ※. 박스 양쪽 끝에서 텍스트가 서서히 보이면서 중앙으로 위치시키는 기능. 1.. box클래스에 가로*세로(100%*세로 400px로) 크기를 잡아준다 그리고 기준점으로 활용할 것이기 때문에 position :relative를 적용시켜 준다. 2. box2라는 클래스를 1번 적용시킨 박스처럼 똑같이 지정한 후 다른 css를 적용해 준다 box클래스는 앞으로 여러 가지 탱크에 사용될 예정이라서 공통으로 들어갈 것만 써준 것이다. box2에는 display:flex(x축방향으로 나열)와 justify-content:center(가로방향으로 중앙 위치) , align-item ( 1가지 ..

※폰트 *폰트 저작권 조심할 것 *폰트가 지원하는 언어도 확인 *무료폰트사이트 : 눈누, 구글폰트 - 내 폰트: 서비스가 올라가 있는 서버에 업로드해 놓은 폰트 사용자의 기기에 폰트 존재여부와 상관없이 서버에서 폰트 파일을 (임시로) 다운로드해서 화면에 나타나도록 하는 방식 - 필수 @font-face : 내가 사용할 웹 폰트명을 지정하고, 해당 웹폰트의 파일을 연결한다. - 파일 확장자 - eot: 익스플로러 옛날버전 (6~8) -요즘에 거의 안 쓴다. - ttf: 크롬, 파폭, 사파리, 에지 - woff: 익스(9~) ttf를 압축한 거라서 파일 크기가 작다. 그래서 다른 서체보다 빠르게 다운로드되고 적용된다. 다만 안드로이드에서 지원하지 않는 버전도 있다. format: 브라우저에 맞는 폰트만 골라..

※Web2 선택자 1) 아이디 - # 2) 클래스 -. 3) 태그 - 태그명 4) 전체 - * body 태그를 포함한 모든 태그 선택 가능 모든 태그를 건드리는 선택자이지만, 특정 요소 안에 있는 것들한테 주로 준다. 우선순위에 포함되지 않음 5) 그룹 - , 똑같은 css속성을 여러 선택자에게 적용 킬 때, 로 구분하면서 한 번에 명시 가능 - 복합선택자(기준선택자와 적용선택자의 결합) *선택자 우선순위를 무시하는 경우도 있다. *기준선택자는 여러개가 될 수도 있다. ex) .container >. nav_ul >. nav_li >. sub_menu > li {} 6) 자손 - 빈칸 7) 자식 - > 8) 인접 - + (바로 아래동생 하나만) 9) 형제 - ~ (모든 동생들) 10) 속성 - 선택자[속..

※ html와 css을 활용해 탑배너 지우는 버튼 만들기. 1. 우선 input에 radio와 label 속성을 이용해서 만들어보고자 합니다. 2.input. readio 버튼 안에 top_banner의 전체적인 크기를 정하고 banner_box1로 이미지가 들어갈 박스(가로:980px 세로:80px )로 만들어줍니다. 3. 위에 이미지박스 안에 img태그나 div(background)를 활용해서 이미지를 넣어줍니다. 그음에 바로 label태그도 banner_box1안에 만들어서 id값을 input이랑 동일하게 하여 연결시켜 줍니다. 4.label 태그에 x값을 display:block을 제공하여 x의 영역크기를 잡아주고 포지션을 활용하여 banner_box1을 기준점으로 하여 right와 top을 활용..