본문 바로가기

분류 전체보기

 (290)
로그인 페이지 만들기_자주 쓰는 CSS [연습할 것들] h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding - margin은 바깥 여백을, padding은 내 안쪽 여백을 준다. - div에 색깔을 넣고, 직접 사용해서 차이 비교 .mytitle { background-color: green; } 로그인 페이지 아이디, 비밀번호를 입력하세요 background 컬러지정시 한 줄 전체를 다 먹는다. >> 그래서 먼저 박스 사이즈을 정해준다. 사이즈를 맞추고 > 모서리 둥글게 정리 > 글자색도 변경 > 글자를 중앙 정렬(text-align: center)> 위쪽으로 여백(padding)을 주고..
로그인 페이지 만들기_ CSS 기본 1️⃣ HTML 부모-자식 구조 html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안에 내용물도 모두 영향을 받는다. 빨간색 div 안에, 초록색/파란색 div가 들어있다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하게 된다. 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리인 것이다. 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀌게 된다. 2️⃣ CSS 기초 안에 로 공간을 만들어 작성한다. mytitle라는 클래스(class)를 가리킬 때, .mytitle { ... } 라고 써줘야 한다. DOCTYPE html> Document .myti..
로그인 페이지 만들기_1. html 1️⃣ 간단한 로그인 페이지 만들기 HTML기초 코드들을 적절히 조합해 간단한 로그인 페이지를 만들어보자. Open with Live Server를 열어 같이 비교하며 고쳐간다. login.html 파일을 만들어 html:5 기본코드로 뼈대를 준비한다. DOCTYPE html> Document 로그인 페이지 ID : PW : 로그인하기 tags.html 파일을 참고해서 login.html 파일을 완성해보았다.
html 구조 1️⃣ 폴더 및 파일 만들기 바탕화면에서 [폴더] 만들기 > [폴더]에서 [frontend 폴더] 만들기 > [frontend 폴더] 안에 [tags.html 파일] 만들기 2️⃣ HTML과 CSS의 개념 HTML은 뼈대, CSS는 꾸미기 HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드! 웹의 전반을 HTML을 통해서 작성할 수 있다! CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 예쁘게 꾸며주는 코드! HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 생기게 된 것. HTML 코드 내에 CSS 파일을 불러와서 적용. 또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에 많은 경우 웹디자이너나 퍼..
VS Code(Visual Studio Code) 1️⃣ VS Code(Visual Studio Code) : (마이크로소프트 사에서 개발한 코드 에디터) 코딩 프로그램 문서작업을 할 때 한글, 데이터작업을 할 때 엑셀을 쓰는 것처럼 코딩을 할 때 VS Code를 사용
웹(web) 개발 ✅ 1. 웹 브라우저 원리 : 서버/클라이언트/웹의 동작 개념 1) “뉴스” 부분에 마우스 오른쪽 클릭을 눌러 검사 탭을 열어준다. 2) 오른쪽에 뜨는 것은 개발자 도구, 개발자 도구에서 “뉴스” 라고 쓰여있는 부분을 더블클릭하고 “웹개발”이라고 바꿔쓰고 엔터 3) “뉴스”가 웹개발로 바뀐것을 볼 수 있다. ✅ 2. 웹의 동작 개념 : 브라우저는 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 것 1) 브라우저는 그려주는 역할 우리가 보는 웹 페이지는 모두 서버에서 미리 준비해두었던 것을 “받아서” 브라우저에서 볼 수 있도록 “그려주는” 역할을 수행한다! 즉, 브라우저는 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려주는 일만 수행한다. 2) 요청은 서버가 만들어 놓은 API 라는 창구..
배열과 반복문 & 요소 추가와 삭제 1️⃣ 배열 선언 후 요소 추가와 삭제 배열을 선언하고 난 이후에 새로운 요소를 더하거나 빼야 할 때 이 때 사용하는 것이 push 와 pop 이라는 메소드 const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'] rainbowColors.push('ultraviolet') // 배열의 마지막에 ultarviolet 추가 console.log(rainbowColors) // ultraviolet이 추가된 rainbowColors 출력 rainbowColors.pop() // 배열의 마지막 요소 ultraviolet을 제거 console.log(rainbowColors) // ultraviolet이 제거된 r..
배열(Array)의 선언 & 데이터 & 길이 1️⃣ 배열(Array) 이란? 자바스크립트에서 데이터를 표현하기 위한 방법으로 기본타입과 객체를 배웠다. 이걸로도 분명 많은 것들을 할 수 있다. 하지만 같은 형식의 많은 데이터를 순서대로 저장하고자 할 때는 데이터의 수만큼 변수들을 선언해줄 수밖에 없었다. 이 때 쓰는 것이 바로 배열이다. 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입이라고 기억해두시면 좋다! 2️⃣ 배열의 선언 숫자 1, 2, 3, 4, 5로 이루어진 배열을 선언하는 방법은 아래처럼 두 가지가 있다. // 1번째 방법 const arr1 = new Array(1, 2, 3, 4, 5) // 1번째 방법은 앞서 우리가 클래스를 활용해 객체를 만든 것과 똑같다. Array라는 클래스를 활용해서 객체를..
메소드 (method) & 객체 리터럴(Object Literal) 1️⃣ 메소드 (method) 클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 [메소드]도 정의할 수 있다. 객체를 생성한 후, 만들어진 객체의 [메소드]를 호출하면 된다. // 클래스 선언 class Product { constructor(name, price) { this.name = name this.price = price } printInfo() { // 함수와 같이 특정 코드를 실행할 수 있는 메소드 console.log(`상품명: ${this.name}, 가격: ${this.price}원`) // 템플릿 리터럴을 활용해 가지고 있는 객체의 속성들을 찍어줌. } } // 객체 생성 및 메소드 호출 const notebook = new Product(..
객체(Object) 타입 & 클래스(Class) 선언 1️⃣ 객체(Object) 타입 관련있는 데이터들을 묶어서 한번에 잘 나타낼수 있는 데이터 타입. // 노트북1을 것을 표현하기 위한 데이터들 // 변수명을 명시적으로 하는 것 이외에는 이 데이터들의 관계를 표현해줄 수 있는 방법이 없음 const notebook1Name = 'Macbook' const notebook1Price = 2000000 const notebook1Company = 'Apple' // 이름, 가격, 제조사와 같은 정보를 다 담을 수 있는 좀 더 큰 범위의 데이터 타입이 있으면 좋지 않을까? 이 때 사용하는 데이터 타입이 바로 객체 타입이다. 객체를 좀 어렵게 얘기하면 '물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것'..

티스토리툴바