분류 전체보기

TIL] input type과 box-sizing

input type input 요소의 동작 방식은 type특성에 따라 달라진다. 특성을 지정하지 않은 경우 기본값은 text이다. input autocomplete 속성 input 태그의 autocomplete 속성은 input요소에서 자동완성 기능을 사용 여부를 결정해준다. on으로 설정하게되면 브라우저는 사용자가 이전에 입력했던 값을 기본으로 드롭다운 형식으로 보여주게 된다. off를 하게되면 자동완성 기능을 사용하지 않게 된다. input 타입의 required속성 input타입의 required속성은 폼 데이터가 서버로 제출되기 전 반드시 채워져있어야하는 입력 필드임을 명시한다. required속성은 불리언 속성인데 해당 속성을 명시하지 않으면 자동으로 False가 되고 명시하게 되면 True가 ..

TIL] 나의 첫 토이프로젝트를 하면서 느낀점

자기소개(첫 토이 프로젝트) 위의 사진은 나의 첫 토이 프로젝트이다. 맨 위의 부분에서는 h1태그를 이용해 나의 개발자 별명인 Jongveloper를 넣었고 부제목 목으로 (feat. 자기소개)를 넣었다. 화면 왼쪽을 보게 되면 블로그 형식으로 작성하였다. 깃허브 보러 가기 버튼을 클릭하게 되면 나의 깃허브로 이동이 된다. 그 밑에는 마음가짐이 있고 또 그 밑에 개발자 블로그(티스토리 블로그)가 있다. 그 밑에는 현재 날짜와 시각이 나오고 순차적으로 온도와 습도가 나온다. 화면의 메인에는 기본정보인 이메일과 휴대폰이 있고 노션 보러 가기 버튼이 존재한다. 노션 보러가기 버튼을 클릭하게 되면 항해 99를 함께하는 항해99 2기 2조 사전과제 노션 페이지로 이동된다. 그 밑으로는 순서대로 현재 공부 중인 언..

TIL] innerHTML

자바스크립트를 화면에 출력하기 기본적으로 HTML은 코딩한 것을 화면에 출력하는 마크업 언어이다. 자바스크립트는 프로그래밍 언어로 데이터를 출력하려면 다음과 같은 명령어들을 사용해야 한다. documnet.write() document.write는 괄호 안에 것을 화면에 출력하는 메서드이다. document.write는 웹페이지의 모든 내용이 로딩된 후 메서드가 실행되면 웹페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력한다. 따라서 주의해서 사용해야 한다. innerHTML=" " innerHTML은 통상적으로 document.getElementById, querySelector 같은 메서드를 함께 사용한다. innerHTML은 innerText와 헷갈릴 수 있는데 둘의 차이점은 예제..

TIL] Math

Math.abs() 절댓값이 필요할 때 전달받은 인수의 절댓값을 반환하는 메서드이다. 아래의 코드를 살펴보자 Math.abs(-7); -> 결과값 : 7 Math.abs(7); -> 결과값 : 7 Math.abs(7.89); -> 결과값 : 7.89 Math.abs(-7.89); -> 결과값 : 7.89 위의 코드를 보면 절댓값을 반환하기 때문에 음수를 넣어도 절댓값이 나오게 된다. 절댓값이 필요할 때 간단하게 활용이 가능하다. Math.max() 전달받은 값 중 가장 큰 수를 반환한다. 아래의 코드를 살펴보자 Math.max(1, 2, 3, 4, 1203, 0); -> 결과값 : 1203 Math.max(1, 2, 3, 4, 1203, "text"); -> 결과값 : NaN 위의 코드를 살펴보면 알 수..

TIL] ajax와 api활용하기

ajax ajax란 자바스크립트의 라이브러리중 하나이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않아도 페이지의 일부를 로드하는 기법이다. 쉽게 풀어서 설명하자면 자바스크립트를 통해서 클라이언트와 서버간에 데이터를 주고 받는 기술이다. 비동기방식 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이다. ajax를 통해서 서버에 요청한 후 멈추는 것이아니라 프로그램은 계속 돌아가는 것이다. 비동기 방식의 장점은 필요한 부분만 불러와 사용할 수 있기 때문에 불필요한 리소스 낭비가 발생하지 않는다. 따라서 비동기식의 장점은 다음과 같다. 웹페이지의 속도가 빨라진다. 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다. 서버에서 데이터만 전..

TIL]자바스크립트 기초

alert 위의 코드를 살펴보면 html 코드가 input-info라는 정보가 없지만 간단히 설명하면 해당 빈칸에 아무 정보도 기입되지 않았다면 경고창 "입력하세요!"가 나타나고 정보를 기입한다면 경고창 "입력된 정보"가 나타나게 된다. 위의 코드는 변수명을 따로 지정하지 않았지만 지정이 가능하다. let info = $('#input-info').val() ["tistory", "gmail.com"] ["gmail.com"] ["gmail", "com"] [gmail] 이런 작업을 거치게 된다. 위의 코드도 더욱 보기 좋게 변수명을 지정할 수 있기 때문에 다음부터 코드를 짤 때 누가 봐도 알아볼 수 있는 코드를 짜야겠다! 자바스크립트는 아직 익숙하지 않다. 그래서 자잘한 실수와 가시성이 좋은 코딩을 짜..

TIL]html 및 자바스크립트 기초

let a = 2 # a라는 박스를 꺼내서 그 안에 2를 담았다라는 뜻 딕셔너리는 키값과 밸류 값으로 이루어져 있다. let a_dict={'과일이름':'사과','가격':5000} #a_dcit["과일이름"]의 결과값 : "사과" 만약 딕셔너리에 새로운 키값과 밸류 값을 추가하려면 어떻게 해야 할까? 다음과 같이 추가하면 된다. a_dict['원산지'] = '국내산' #a_dict의 결과값 = {과일이름:"사과",가격:5000,원산지:"국내산"} 또한 추가로 딕셔너리에는 리스트도 추가가 가능하다. 글자 나누기 자바스크립트로는 글자를 나눌 수 있는데 다음 코드를 살펴보자 let email = "nerd@daum.net" email.split('@') #결과값 = ["nerd","daum.net"] emai..

TIL] html 기초 및 css

html 기초 웹브라우저의 개발자 도구에 들어가 바꾸고 싶은 부분을 내가 원하는 문구로 바꾸게 되면 내가 원하는 문구로 수정된 것을 볼 수 있다. 1. 전세계의 사람들이 문구가 수정된 것을 보는 것이 아닌 내가 보고 있는 페이지만 바뀐다. 2. 내가 보고있는 페이지는 사실 인터넷과 관련이 없다. 3. 새로고침을 한다면 원상 복귀한다. 새로고침을 하면 원상복귀되는 이유: 새로고침 버튼을 누르면 서버로부터 새로운 정보를 요청하고 받아오기 때문이다. 브라우저의 역할: 1. 서버에게 요청 - > 결과물을 받아서 그려주는 개념 웹사이트에서 보여지는 요소는 크게 세 가지이다. 1. html : 밑그림(뼈대) 2. css : 물감(보기 좋게 꾸며주는 것) 3. 자바스크립트 : 움직이는 것 반응에 대한 대응 html ..

TIL]sep

sep=\n을 하면 줄 바꿈을 해준다. sep은 구분자라는 뜻의 separator의 약자이다. 값 사이에 줄 바꿈이나 공백이 아닌 다른 문자를 넣고 싶을 때도 사용 가능하다. sep도 빈번하게 사용될 것 같으니 기억을 잘해둬야겠다.