html과 css

TIL] ajax

ajax ajax는 전에 블로그에 공부한 것을 올린 적 있지만 아직 이해도가 부족하다고 생각하여 복습 겸 좀 더 자세히 다뤄야겠다! ajax의 기본 형태 $.ajax({ url:"/example/~~~/~~~/~~~.~~~", //클라이언트가 요청을 보낼 서버의 URL주소이다. data: {~~~ : "~~~"}, //HTTP요청과 함께 서버로 보낼 데이터 type: "GET", //HTTP요청 방식(GET과 POST가 있다.) dataType:"json" //서버에서 보내줄 데이터 타입 }) ajax의 기본 형태는 다음과 같다. url 부분에 클라이언트가 요청을 보낼 서버의 URL 주소를 넣고 data에 HTTP요청과 함께 서버로 보낼 데이터 값을 넣는다. 데이터 요청방식을 설정하고 dataType을 ..

TIL] ::before 과 ::after

가상 요소 ::before, ::after 가상 요소란 별도의 클래스를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있다. 가상 요소는 가상 클래스처럼 선택자에 추가되고 존재하지 않는 요소를 존재하는 것 처럼 부여하여 특정 부분 선택이 가능하다. ::before은 실제 내용 바로 앞에서 생성되는 자식 요소를 뜻하고 ::after은 실제 내용 바로 뒤에서 생성되는 자식요소를 뜻한다. 또한 두가지를 사용해야 할 땐 content 속성이 필요하다. content="" content는 ::before과 ::after와 함께 쓰이는 가짜 속성이다. HTML 문서에 정보로 포함되지 않는 요소를 css에서 새롭게 생성해주기 때문이다. content를 쓸 때 대표적으로 사용되는 속성들은 아래와 같다. normal ..

TIL] outline

outline outline속성은 border 속상과 비슷하다. boder를 테두리라고 한다면 outline은 border 바깥 외곽선을 말한다. outline 속성의 용도는 요소를 강조하기 위해 사용한다. outline 사용하기 outline 속성을 사용하면, 외곽선 색상, 모양 , 너비를 한꺼번에 지정할 수 있고 outline-color, outline-style, outline- widtht 속성으로 각각 지정할 수 있다. 하지만 outline-style은 항상 필수로 지정해야 한다. 선이 있어야, 색상이나 너비를 지정할 수 있기 때문이다. outline은 border와 마찬가지로 외곽선 스타일을 지정할 수 있다. outline-style 속성 dotted : outline을 점선으로 설정한다. d..

TIL] css포지션(position)

css 포지션 css포지션 속성은 HTML에서 element를 배치하는 방법을 지정하는 속성이다. position속성에 쓸 수 있는 것은 총 5개가 있다. 5개를 차례대로 살펴보자. static static은 HTML에서 일반적인 흐름을 따라 배치가 된다. element에서 포지션을 지정하지 않는다면 기본값으로 static이 적용된다. *static에서는 top, right, bottom, left, z-index 속성들이 아무련 효과를 주지 못한다. relative relative는 static과 마찬가지로 HTML에서 일반적인 흐름을 따라 배치된다. static과의 차이점은 static에서는 적용되지 않는 top, right, bottom, left, z-index속성들이 적용된다는 것이다. abso..

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] 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..