분류 전체보기 345

HTML 문법, 문서 구조, html 공백

HTML = Hyper Text Markup Language 웹페이지를 만드는 언어 Hyper Text = link HTML 문법 1. 태그 (tag) = 꼬리표, 이름표 Hello,HTML h1 = 태그이름 Hello,HTML= 브라우저에 노출 내용을 포함한 태그 전체를 요소(element)라고 한다. 2.속성 (attribute) 속성은 태그에 추가적으로 정보를 제공하고, 우리가 원하는대로 태그의 동작이나 표현을 조절할 수 있는 설정값들이기도 하다. 속성은 이름과 값으로 이루어져 있습니다. 시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현합니다. 속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현합니다. Hello, HTML 하나의 태그에도 여러 개의 속성을 선언할 수 있..

html 에 css 추가하기

CSS는 Cascading Style Sheets의 약자로 웹페이지의 레이아웃, 폰트, 색상 등을 지정하는 데 사용됩니다. HTML에 CSS를 적용하는 방법은 3가지가 있습니다. 1. inline 2. internal 3. external 1. inlne HTML 태그 안에 직접 CSS 속성을 적용하는 방법입니다. 이 방법은 style이라는 속성을 사용합니다. HTML 삽입 미리보기할 수 없는 소스 2. inaternal HTML 파일안에 이라는 태그를 이용하여 그 안에 CSS 속성을 지정하는 방법입니다. 이 방법을 사용하면, style 태그가 지정된 HTML 파일 전체에 CSS가 적용됩니다. HTML 삽입 미리보기할 수 없는 소스 3. external 마지막으로 CSS 파일을 따로 작성하고, 그 파일을..

'IT 용어 도감' 후기

미리에 아이티 업계에서 일할 것을 상상하며 빌린 책이다. 아이티 업계에서 일하거나, 관련 용어에 대해 쉽게 알고 싶은 분들에게 추천하는 책입니다. 책은 정말 쉽게 구성되어 있습니다. 용어마다 한 페이지씩 차지하고 있고, 가운데에는 그림까지 있어서 이해를 도와줍니다. 사실 이 책으로 모든 용어를 마스터하겠어!라는 목표는 힘들지 않나 싶다. 그냥 가볍게 읽으면서 상황에 따라 아! 이런 뜻이였지하면서 생각해내는 정도가 최선이지 않을까..? (실상은 생각도 안나고 구글에 찾는 방법이 가장 좋을 수도...)

'인문학도, 개발자되다' 를 읽고서, 개발 공부 방법, 개발자가 되기 위한 기본 마음가짐

제가 코딩의 세계에 입문하기 전, 막연한 두려움에 덜덜 떨고 있을 때 접한 책입니다. 이 책을 읽고, 나도 할 수 있지 않을까? 이런 자신감 한스푼을 얻은 책입니다. (결코 이 책의 저자와 비교해서 자신감을 얻은건 아닙니다.) >이런 사람이 개발자가 되기를 권한다. 효과적으로 개발자의 시간을 관리하는 방법나는 이렇게 개발을 공부했다.오픈소스에 참여해보자!영어공부는 필수로 하자!좋은 사수는 없다. 개발자 회사의 종류

visual studio code 설치 없이 코드 짜기, 핸드폰으로 코딩하기, 코딩할 수 있는 사이트 추천

항상 컴퓨터로만 코드를 짜보다가 문득 자기 전에 생각난 코드가 있다면 여러분들은 어떻게 하시나요? 메모장에 저장해두고 컴퓨터 앞에 앉으면 그때 가서 실현해본다. 그냥 기억만 잘 하려고 노력한다. ...!! 해보고 싶어서 안달난다. 저 같은 경우에는 시작한지 얼마안되기도 하고, 지금 쉽고 재밌는걸 배워서 그런지 1번인 상태입니다. 그래서 이리저리 검색하다가 핸드폰으로 코딩할 수 있는 사이트를 발견해서 공유하고자 합니다. https://codepen.io/pen/?editors=0011 Create a New Pen ... codepen.io 이 사이트는 로그인할 필요없이 바로 사용가능합니다! 저는 현재 할 줄 아는 언어가 자바스크립트인데 자바스크립도 문제없이 잘 구현됩니다. 다음으로 소개할 사이트는 vis..

DOM 이벤트 참조 사이트 & Mouse event 참조

DOM 이벤트 참조 사이트! https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org Mouse event의 종류는 위와 같다. (출처: https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events) auxclick: 이 이벤트는 마우스 왼쪽버튼을 제외한 다른 버튼을 클릭했을 때 작동한다. 오른쪽 버튼, 휠버튼, 다른 매크로 버튼 등이 이 이벤트를 작동시킨다. clic..

무조건 알아야하는 코딩용어를 정리해보자! ft. 스파르타 코딩클럽

스파르타 코딩클럽에서 진행하는 무료 강의인 "1시간만에 끝내는 직장인 코딩용어 해설"를 듣고 내용을 정리했습니다. 다음 수업을 어떤 것을 들어야할지 정리하던 중에 스파르타 코딩클럽에 접속하게 되었고, 무료 수업이라서 간단하게 회원가입을 하고 강의를 들었습니다. 총 1시간 가량의 강의이고, 저는 내용을 정리하면서 들어서 시간은 좀 더 걸렸습니다. 비전공자인 제가 대략적인 용어에 대해 알 수 있어서 정말 좋았고, 무엇보다 지루하지 않고 빨리빨리 진행되서 좋았습니다. 아이티 회사에 재직하고 있거나, 개발자와 소통이 많으신 분들도 들으면 좋을 것 같습니다. 귀여운 그림과 함께해서 좋았어요! ㅎㅎ 총 8개의 강의이고, 부담없는 시간이라서 출퇴근할 때 들으면 좋을 것 같습니다. 컴퓨터와 인터넷 컴퓨터는 기본적으로 ..

자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #13 위치 불러오기, API란 , Json viewer 크롬확장 프로그램 사용 방법

navigator.geolocation.getCurrentPosition() user의 위치(geolocation)를 켜준다. 성공했을 때 실행될 함수 에러가 발생했을 때 실행될 함수 API 란? application programming interface 프로그램들이 서로 소통하는 방법 / 코드들끼리 서로 소통하기 위해 만들어진 것 공공 API 날씨 API 각 어플들의 API 과거 날씨 API 공기 오염 API API 는 데이터, 서버를 가지고 있는 사람들이 원하는대로 디자인할 수 있다. 그래서 어떤 API는 접근권한이 정해져있다. 가끔은 API 사용에 제약이 있거나, 사용하기 위해 지불해야할때도 있다. web API = 브라우저를 위해 만든 API. ex) 구글 크롬, 파이어폭스 등등 https://..

10171. 고양이 출력하기

백준 10171 고양이 출력하기 문제입니다. 콘솔창에 고양이를 출력하는 문제 입니다. 구글링 해서 문제를 맞추기는 했지만 굉장히 비효율적으로 문제를 풀었기 때문에 다시 구글링해서 찾은 정답을 공유합니다. \ /\ ) ( ') ( / ) \(__)| var a = "\\ \/\\"; var b = " \) \( \'\)"; var c = "\( \/ \)"; var d = " \\\(\_\_\)\|"; console.log(a); console.log(b); console.log(c); console.log(d); console.log(`\\ /\\ ) ( ') ( / ) \\(__)|`) 우선 개행을 그대로 적용하기 위해서 백틱을 사용. ​ 그리고 자바스크립트에서 \(백 슬러시)를 문자열로 넣고 싶을 때..

자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #12 Date.now, filter 함수, 화살표 함수

const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "toDos"; const toDos = []; function saveToDos (){ localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } function deleteToDo (event){ const li = event.target.parentElement; // 우리가 삭제하고 싶은 내용 li.remove(); } function p..

반응형