2024/07 119

form, input, 버튼(button)

form은 form 태그로 만들어냅니다.  input태그는 닫지 않습니다.      input의 type 설명하다  옵션110개는 더 있지만 가장 자주 쓰는 것만 모아봤습니다. 나머지는 필요할 때 구글에 찾아쓰도록 합시다.     input에 넣는 속성들 placeholder는 배경 글자,value는 미리 입력된 값,name은 서버 기능개발에 필요한 인풋의 이름을 설정 가능합니다.   HTML의 속성으로 CSS셀렉터를 사용할 수 있습니다. input[type=email] { color : grey}input의 type속성이 email인 요소만 찾아서 스타일을 줄 수 있습니다. 폼에서 특히 유용하게 사용합니다.     전송버튼은  전송둘 중 하나 쓰시면 됩니다.그리고 물론 태그 안에 있어야 잘 작동..

html 2024.07.04

네모박스(box),레이아웃,float, display

네모 박스 디자인에 많이 사용하는 CSS 속성 설명하다 .box { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px;}margin은 바깥 여백,padding은 안쪽 여백,border는 테두리 (차례로 두께, 선의 종류, 색상),border-radius는 테두리 둥글게 처리입니다. 가운데 정렬도 많이 하는데 저번 이미지처럼 display : block; margin-left : auto; margin-right : auto 이렇게 주면 됩니다.    Q. 이렇게 많은 스타일을 다 언제 외우고 있냐고요?외워봤자 맨날 까먹기 때문에 필요하면 구글에서 찾아쓰는게 일반적입니다.      margin과 padding을..

html 2024.07.04

글자스타일 및 css

간단한 스타일 넣는 법   글자 거의 모든 태그는 style="" 이라는 속성을 열 수 있습니다.거기 안에 스타일이름 : 스타일값; 형식으로 스타일을 넣으면 됩니다.여러개를 넣고 싶다면 뒤에 쭉 나열해주시면 됩니다.세미콜론 까먹으면 안됩니다.   자주 사용하는 글자 스타일들 설명하다 font-size : 20px;font-family : 'gulim';color : black;letter-spacing : -1px;text-align : center;font-weight : 600;영어 단어를 잘 알고 계시면 무슨 뜻인지 바로바로 파악은 쉽습니다.   이미지 정렬과 폭 조정 설명하다 display : block;margin-left : auto;margin-right : auto;width : 150px..

html 2024.07.04

html 언어_태그_링크

HTML은 어디다 쓰는 언어? 웹페이지를 만들고 디자인하고 싶을 때 사용합니다.세상에 존재하는 모든 웹페이지는 html 언어로 작성합니다.  HTML은 Hypertext Markup Language의 약자인데 Markup Language에 주목해주시면 됩니다.마크업 언어는 "자료의 구조를 표현하기 위한 언어"입니다.웹페이지에 우리가 글넣고 그림넣고 박스넣고 버튼넣고 .. 자료를 입력하죠? 그 자료들이 어디에 배치되는지 그런 것들을 기록하기 위해 존재하는 언어가 바로 HTML이라고 보면 되겠습니다. 아무튼 여러분이 HTML 언어로 글넣고 그림넣고 하면 웹페이지가 되는 것입니다.   HTML 파일 기본 템플릿 설명하다   HTML 문서는 .html로 끝나도록 저장하시면 되며모든 HTML 문서는 위의 코드를..

html 2024.07.04

css 배경속성(background,position(좌표))

배경관련 CSS 속성들 .main-background { background-image : url(../img/shoes.jpg); background-size : cover; background-repeat : no-repeat; background-position : center; background-attachment : fixed;}background-size는 px, % 단위도 가능하고cover는 배경으로 꽉채워주세요contain은 배경이 짤리지 않게 꽉채워주세요 라는 뜻입니다.background-attachment는 웹사이트가 스크롤될 때 배경이 신기하게 동작하게 만들고 싶으면 써보도록 합시다.    배경 두개 겹치기 신공  .main-background { background-im..

html 2024.07.04

24.07.03> this, dom

요약 및 정리이 문서는 JavaScript의 `this` 키워드에 대해 설명하는 내용을 포함하고 있습니다. `this` 키워드의 정의, 특징, 그리고 다양한 사용 사례를 다루고 있습니다. 주요 내용은 다음과 같습니다: 1. `this`란 무엇인가?- 정의:  - `this`는 객체를 가리키는 참조 변수입니다.  - `this`는 호출되는 위치에 따라 다른 값을 출력하기 때문에 혼란을 줄 수 있습니다.- 기본 원칙:  - 메서드로 호출하면 `this`는 그 메서드가 속한 객체를 가리킵니다.  - 단독 함수 호출 시, `this`는 전역 객체(window, node는 global)를 가리킵니다.  - 화살표 함수의 경우, `this`는 화살표 함수가 선언된 상위 스코프를 가리킵니다.  - 생성자 함수 또는 ..

html 2024.07.03

git > 인증,브랜치

GitHub 인증하기주요 단계GitHub 가입 및 토큰 생성GitHub에 가입하고 Personal Access Token을 생성합니다.토큰은 GitHub 설정(Settings) -> Developer Settings -> Personal access tokens에서 생성할 수 있습니다.토큰 저장생성한 토큰을 안전한 곳에 보관합니다.Windows의 경우 자격 증명 관리자(Credential Manager)에서, macOS의 경우 Keychain Access에서 토큰을 저장합니다.1. GitHub Personal Access Token 생성GitHub에 로그인GitHub에 로그인합니다.Settings 페이지로 이동오른쪽 상단 프로필 사진을 클릭하고, Settings를 선택합니다.Developer settin..

카테고리 없음 2024.07.03

24. 07.02 7일차. git기초 , js자바배열

1. Git 저장소 초기화 먼저, 프로젝트 폴더를 만들고 그 폴더에서 Git 저장소를 초기화합니다. git init 2. 예제 파일 생성 두 개의 파일을 생성합니다. 여기서는 file1.txt와 file2.txt라는 파일을 생성합니다. echo "This is file 1" > file1.txt echo "This is file 2" > file2.txt 3. 파일 추가 두 파일을 Git 스테이지에 추가합니다. git add file1.txt file2.txt 또는 모든 변경된 파일을 추가할 수 있습니다. git add . 4. git status 5. 파일 커밋 두 파일을 커밋합니다. git commit -m "Add file1.txt"  git commit -m "Add file2.txt" 6.git..

html 2024.07.02