2024/09/04 15

09일차 프론트엔드 공부 - 기초 CSS

- 09일차 프론트엔드 공부 -   태그rel : 해당 태그로 연결 시켜줄 파일과 어떤 관계인지 지정href : 연결할 파일의 경로를 지정 선택자 (Selector) 태그 선택자 tag {property : value} ex)div { background-color : red; }id 선택자#id { property : value; }   ex)#title { font-size : 24px; } class 선택자.class { property : value;}   ex).box { border : 2px solid red;}   자손 선택자 제목부제목   ex).box1 .title {color : red;}-> box1 class 안에 있는 title class 만 선택한다 (공백 필요) 다중 선택자선..

08일차 프론트엔드 공부 - 회원 가입 실습 2

- 08일차 프론트엔드 공부 - 회원가입 페이지를 만들어보려고 한다간단히 핸드폰 번호를 입력하고 인증번호를 생성하며 3분안에 인증을 해야한다.또한 회원가입을 위한 정보를 입력하기 전에 가입하기 버튼을 누르면 입력하지 않은 칸 밑에 텍스트를 통해 보여주고 모두 입력 시 팝업을 통해 회원가입 축하 팝업을 출력할것이다.   회원가입 - ..

07일차 프론트엔드 공부 - 싸이월드 실습 5

- 싸이월드 실습 4 - 싸이월드 1싸이월드 2싸이월드 3간단하게 싸이월드 페이지를 완성해보았다.첫번째 페이지에서 동영상을 넣어서 재생이 가능하도록 하였다.두번째 페이지에서는 간단히 음악 앨범을 보여주는 페이지를 만들었다.세번째 페이지에는 간단한 게임이 있는데 끝말잇기 게임과 로또 번호 생성기이다.완성한 코드는 추후 Git을 통해 공유할 예정이다.

07일차 프론트엔드 공부

- 프론트엔드 공부 07일차 - 06일차 인증번호 생성기와 타이머를 만들어보았다. 하지만 해당 코드에서 인증번호 전송을 여러번 누르면 인증번호가 계속 생성되고 타이머는 꼬이는 오류가 생기게 되었다.이를 해결하기 위해 그때 이용한 html은 그대로 사용하고 js만 수정해보았다.let isStarted = false;const createNum = () => { if(isStarted === false){ //타이머가 작동중이지 않을때 isStarted = true document.getElementById("completebtn").disabled = false const num = String(Math.floor(Math.random..

06일차 프론트엔드 공부 - 기초 JS 3

- 프론트엔드 공부 06일차 -  함수우리가 직접 만드는 기능 function 함수이름(매개변수(선택사항)) {함수를 호출했을 때 실행할 명령문}     function hello() {alert(“안녕하세요”)}함수작성방법 함수 선언식function hello(name) {alert(name + "님 안녕하세요")}  함수 표현식const hello = function(name) {alert(name + "님 안녕하세요")}  화살표 함수const hello = (name) => {alert(name + "님 안녕하세요")}   실무에서는 화살표 함수를 많이 사용한다.함수 선언식을 함수 표현식으로, 함수 표현식을 화살표 함수로 변환하는 방법을 알아야한다.  000000 인증번호 전송 let ..

05일차 프론트엔드 공부 - 기초 JS 2

프론트엔드 공부 05일차 - 데이터 타입과 연산자 데이터 타입String            “code”Number         123Boolean         trueObject            { }Null                nullundefined      undefined 연산자 산술 연산자+ : 더하기 - : 빼기 * : 곱하기 / : 나누기 % : 나머지숫자 뿐만 아니라 문자열에도 사용 가능ex) “포론트” + “엔드” = “프론트엔드10 + ‘1’ = ‘101’10 + ‘만원’ = ‘10만원’10 - ‘1’ = 910 * ‘10’ = 100자바스크립트는 유연성을 가지고 있어서 타입이 다른 데이터를 가지고 연산을 하면 자동으로 데이터 타입을 통일해서 연산해준다. 하지만 이러한 ..