본문 바로가기

전체 글83

응용) HTML 과 CSS (폼태그 속성, form tag ,form 태그,로그인 만들기) 로그인 형태를 만들기 위해서 HTML 에서 form 태그 속성을 사용한다. ㅡ form 태그 입력 양식 태그 사용자로 부터 입력받은 데이터를 서버로 전송시키는 역할 모든 입력 양식 태그의 부모 역할을 한다. 1. input 태그는 단독사용한다. inline-block 요소 유저가 입력할 수 있는 ui (영역)을 생성해준다. 2. placeholder 속성은 input 에 내용을 미리 보기 가능 ㅡ버튼생성하기 1. 버튼ui(형태)생성 >>>>>>>>>>>>> value 속성으로 버튼 안의 내용 작성 가능, on off 기능으로 가능함 아이디 : 비밀번호 : 2. 시멘틱태그의 버튼으로 사용. form 태그 안에서 기능을 실행시켜 줌.입력 값을 제출할때 쓰는 기능을 한다. >>>>>>>>>>>>>> form .. 2023. 11. 17.
응용) HTML 과 CSS (flex 속성) flex :엘리먼트들의 간격을 나눌때 사용한다. 1.부모 > 자식 = 반드시 부모 에게 flex를 적용시켜준다. 2.자식에게 float:left; 를 적용시킨 것 처럼 왼쪽정렬된다. display: flex; flex-direction: row; justify-content: center; align-items: center; [F12]로 정렬 예시를 찾아 볼 수 있음. 아래 그림처럼 로고+메뉴가 있는 헤더를 만들어 보자. DOCTYPE html> flex * { margin: 0; padding: 0; } .con_wrap { width: 600px; height: 600px; border: 10px solid gray; display: flex; /* =>요소를 flex속성으로 변경 =>반드시 부모에.. 2023. 11. 15.
응용) HTML 과 CSS (애니메이션 속성) CSS에서 애니메이션 효과를 줄 수 있다. css에서 작성. 1.애니메이션 속성을 하나 만들어준다. @keyframes 애니메이션이름 { from(=0%) { margin-left: 0; 마지막은from에서 멈춘다. } 50% { } to =100%) { margin-left: 400px; } 2. 적용시킬 엘리먼트에 애니메이션을 불러온다. animation-name: box_ani; => 애니메이션 이름 부여 (keyframes에 적용시킨 이름) 3. 애니메이션 속성을 각각 부여한다. (축약형 사용가능) animation: moving 1s 3s forwards alternate 3; /* =>에니메이션 축약형 =>순서 상관없이 띄어쓰기로 구분된다, => 단, duration은 앞에 delay값은 뒤에.. 2023. 11. 15.
깃허브 (github) 무엇인가 ? 깃(git): 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템 또는 이러한 명령어 깃허브(github): 분산 버전 관리 툴인 깃(Git)을 사용하는 프로젝트를 지원하는 웹호스팅 서비스 형상관리: 소프트웨어의 개발 과정에서 소프트웨어의 변경사항을 관리하기 위해 개발된 일련의 활동 버전관리: 동일한 소스코드에 대한 여러 버전을 관리하는 것 git 관련 기본 용어 Repository: 저장소, 저장소는 히스토리, 태그, 소스의 가지치기 혹은 branch에 따라 버전을 저장, 저장소를 통해 작업자가 변경한 모든 히스토리 확인 가능 Working Tree: 저장소를 어느 한 시점을 바라보는 작업자의 현재 시점 Staging Area: 저장소에.. 2023. 9. 4.

티스토리툴바