근성프로그래머 이준형

데이터 타입 - 문자열과 숫자 어떤 형태의 데이터가 있는지 문자와 숫자라는 데이터 타입으로 이해해 보자. 자바스크립트에는 6개의 데이터 타입이 있고, 객체라는것이 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org 자료형 중 문자열(String)의 메서드를 알 수 있는 문서이다. string.length를 통해 문자열의 길이 string.toUpperCase를 통해 문자열을 대문자로 string.indexOf('o')를 통해 'o'의 인덱스를 strin..

책 리뷰/생활코딩! HTML+CSS+자바스크립트 2024. 1. 11. 13:17

자바스크립트 웹 페이지는 한 번 화면에 출력되면 자기 자신을 바꾸는 능력이 없다. 그것을 가능하게 해주는 것이 자바스크립트 사용자와 상호작용하는 언어이다. 자바스크립트 코드에 따라 태그의 style 속성이 추가되는데, HTML을 제어하는 언어이다. JavaScript html 1+1 html의 태그와 다르게 1+1이 아닌 2가 출력된다. HTML은 정적이기에 1+1이 2로 출력되지않는다. 아래는 버튼에 이벤트를 넣은 예시이다. 어떤 이벤트가 일어났을 때 어떠한 자바스크립트 코드를 실행하는 것이 onclink이라는 것이다. 내용이 변했을 때를 체크하는 이벤트인 onchange도 있다. text 박스안에 아무거나 입력하고 마우스 커서를 바깥쪽으로 빼서 클릭하면 onchange 이벤트가 발생했다. 개발자도구에..

책 리뷰/생활코딩! HTML+CSS+자바스크립트 2024. 1. 10. 17:23

10일차의 내용은 html파일에 작성한 style태그를 css파일로 빼서 적용시키는 내용이다. head 태그 영역에 방법으로 적용할 수 있다. 내부적으로는 완전히 구현이 달라지며 훨씬 더 효율적인 상태가 된다. 재사용성이 높아지고 사용성이 높아진다. 하나의 웹 페이지를 구성하는 여러 개의 파일을 별도로 분히래 두고 내려받는 것과 그냥 웹 페이지 안에 CSS 코드를 내장하는 것 중에서 어떤 것이 더 네트워크 적인 측면에서 더 효율적일까? 웹 페이지 안(html)에 CSS를 직접 작성하는 것이 그 자체로는 더 효율적이지만, 캐싱기법 덕분에 파일을 우리의 컴퓨터에 저장해 뒀다가 다음 css 요청시 저장된 결과를 가져와 속ㄷ도를 높일 수 있고, 사업자들은 돈을 덜 쓸 수 있는 굉장히 중요한 효과를 얻게 된다...

책 리뷰/생활코딩! HTML+CSS+자바스크립트 2024. 1. 9. 20:15

요즘은 반응형 디자인이 유행이다. 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 반응형 웹 또는 반응형 웹 디자인. 영어로 responsive web이라고 한다. 미디어 쿼리는 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 동작하게 되는것이다. 아래 코드를 보자. Responsive

책 리뷰/생활코딩! HTML+CSS+자바스크립트 2024. 1. 9. 01:26

박스모델 CSSCascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. 위 코드를 실행 했을때, 태그가 화면 전체를 쓰고 있음을 알 수 있고, 줄바꿈이 된것을 알 수 있다. 하지만 태그는 줄바꿈이 되지 않아 다른 콘텐츠와 섞였다. 그래서 책에서는 이것을 명확하게 구별하기 위한 style태그를 정의했다. CSSCascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document writt..

책 리뷰/생활코딩! HTML+CSS+자바스크립트 2024. 1. 5. 16:43

CSS에서 어떠한 효과를 의미하는 용어를 프로퍼티(property)라고 한다. 제목이 1)좀 더 컸으면 좋겠다, 2)가운데로 정렬하고 싶다 그런 경우에는 html에서 어떤 태그인지 찾아야겠다는 생각이 들 것이다. ... 생략 ... ... 생략 ... 1) 이미 제목으로 사이즈가 제일 큰 태그인 h1태그를 바꿀 수 있을까? 그럴때 구글에 'css text size property'를 검색한 후, 아래 링크에 접속해서 확인해보자 https://www.w3schools.com/cssref/pr_font_font-size.php CSS font-size property W3Schools offers free online tutorials, references and exercises in all the maj..

책 리뷰/생활코딩! HTML+CSS+자바스크립트 2024. 1. 4. 15:55

HTML은 통해 정보를 표현하는데 CSS는 좀 더 아름다우면서 보기 좋은 형태로 만드는 방법이다. 태그를 통해 글자의 디자인을 바꿀 수 있다. html의 주석은 로 할 수 있다. 이라는 태그는 HTML의 문법이고, 태그의 안쪽에 있는 내용은 CSS이다. CSS는 순식간에 바뀌는 폭발적인 효과를 갖게 된다. a { color:red; } a는 선택자 a 괄호 안에 있는것은 선언, 효과 color은 속성 red는 값

책 리뷰/생활코딩! HTML+CSS+자바스크립트 2024. 1. 3. 16:32

앞에서 배운 HTML의 내용 마무리 하는 과정이다. 여기서 제일 기억이 남는 부분은 우리가 한개의 태그를 바꾸기 위해서 많은 양의 코드를 수정해야하는데, 그것을 바꾸기 위해서 백엔드 기술이 필요하다. 백엔드 기술을 통해 파일 하나를 변경할 때 수억 개의 웹 페이지가 동시에 변경하게 할 수 있다. 그 외에 부록으로 동영상 삽입, 댓글 기능 추가, 채팅 기능 추가, 방문자 분석기가 있다. 나중에 필요하면 찾아보자

책 리뷰/생활코딩! HTML+CSS+자바스크립트 2024. 1. 2. 14:05