티스토리

sy의 코딩 개발일지

검색하기

블로그 홈

sy의 코딩 개발일지

syscoding.tistory.com/m

나아눙 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

unit11-coz'mini hackathon local git repository 디렉토리를 만들고 해당 디렉토리에 로컬 git repository 생성 ( git init) stataging area (git add) staging area(commit 하기전에 내용을 기록하는 장소)의 파일은 commit 가능(git commit) -> commit으로 로컬 git repository에 내 코드를 기록 index.html과 style.css의 각 코드들(저장하고 싶은 코드들)을 하나로 모아두는 과정 -> staging area로 넣는다.(git add or git add.) git status(staging area로 잘 옮겨졌는지 확인,git repository 변경사항 확인하기) staging area의 코드 묶음을 저장하기로 결심(git c.. 공감수 0 댓글수 0 2023. 1. 9.
unit10[JS/브라우저]DOM DOM(Document Object Model) HTML요소를 Object처럼 조작할수 있는 모델 DOM을 이용하면 HTML을 조작 가능 -> HTML로 구성된 웹 페이지를 동적으로 움직이게 할수 있다. 웹 페이지를 제어하기 위한 목적으로 자바스크립트를 사용 HTML에 javascript를 적용할려면 요소를 만나면 웹 브라우저는 html해석을 멈추고 부터 먼저 실행한다. 추가 방법 1. 안쪽에 삽입 HTML 페이지를 파싱하던 중 js파일을 받아오고(Fetching), 실행(Executing)한 뒤 다시 페이지를 파싱하게 된다. 2. 요소 끝나기 전에 삽입 HTML 페이지를 파싱을 먼저 진행하고 JS파일을 받아오고 실행 맨뒤에 삽입하는 이유? html태그와 CSS가 모두 동작한 다음 불러오기 때문에 미완성.. 공감수 0 댓글수 0 2023. 1. 5.
unit9[javascript]JavaScriptkonans 10문제 블로그 하면서 회고를 쓰고 왔다..달라진 블로그 start * 알게 된점 ? 회고 코드 스테이츠 페어분들과 koanRunner.html 문제를 풀기 01_Introduction.js 먼저 테스트를 하기 위해서는 expect 함수가 필요하다. expect함수는 테스트하는 값과 기대값을 비교하기 위해 사용한다. expect().to.be.true -> true가 되도록 한다. expect().to.be.false -> false가 되도록 한다. expect().to.equal() -> 테스트 하는 값과 기대하는 값이 같도록 한다. 02_Types-part1.js 느스한 동치 연산(==)은 프로그램 작동 예측에 어렵다. 엄격한 동치 연산(===)을 이용하도록 한다. 1+'1' = "11" 문자열이 된다. *더.. 공감수 0 댓글수 0 2023. 1. 4.
unit9[javascript] 핵심개념과 주요문법 원시 자료형:고정된 저장 공간을 차지하는 데이터(String number boolean undefined null symbol) => 변수에 값을 할당 , 보관함의 주소가 담김 ,데이터 값 저장 참조 자료형:대량의 데이터 다루기 적합(배열과 객체,function(){} ) =>동적으로 크기가 변하는 보관함 , 데이터가 담긴 저장소의 주소로 저장(주소 안에 데이터 변경) 미리 주소값과 메모리 값을 잡아둔다. heap : 특별한 데이터 보관함 a address:1 Q a=[5,7]; 1-5 7 변수의 주소를 참조(refer)하여 실제 변수가 있는 장소에 어떤 데이터가 있는지 본다. strict equality (===) 참조 자료형으로 주소값이 같은지 확인 let x = {so:2} let y = x; //.. 공감수 0 댓글수 0 2023. 1. 3.
unit8[javaScript]배열,객체 배열 let so = [ 1, 2, 3, 4, 5]; 값은 요소 // 1, 2, 3, 4, 5 순서가 있는 값은인덱스 [0],[1].[2].[3],[4].[5] so[0[ // 1 so //[1,2,3,4,5] 배열길이 so.length //5 요소추가 so.push(6) 배열끝에 6을 추가 요소삭제 so.push() 배열 마지막 값 삭제 배열의 반복 for( let n=0; n 공감수 0 댓글수 0 2022. 12. 29.
unit7[Linux,git기초] 텍스트 에디터 nano 패키지 매니저 npm node.js의 버전관리매니저 nvm javasscript 또 다른환경 분산 제어 시스템 git Command-Line interface 개요 입력소스 : 컴퓨터에 새로운 명령을 전달하는 모든소스(키보드,마우스) 출력소스:시각적출력(모니터),청각적출력(스피커) 리눅스터미널:컴퓨터를 조작하기 위해 사용 CLI는 GUI가 할수있는 작업 모두 한다. AWS는 데이터센서를 가지고 있으며, 데이터센서에서 서버컴퓨터 설치 CLI를 이용해 서버컴퓨터 접속요청->서버컴퓨터는 요청한 출력소스이용 모니터로 서버컴퓨터 소통 Linux환경에서 CLI를 이용하기 프롬포트(prompt) 키보드의 입력을 확인,편집하는 한 줄의 공간 터미널은 CLI이다. CLI 명령어 pwd(print .. 공감수 0 댓글수 0 2022. 12. 28.
unit5[html/css]활용 레이아웃 각각의 요소를 목적에 맞게 배치 와이어프레임 레이아웃의 뼈대를 그리는 단계 목적 : 화면의 영역 구분 목업 실물 크기의 모형 실제 작동 모습과 동일하게 html문서 작성 *하드코딩 : html문서에 하나하나 입력 Atomic CSS 방법론 클래스 이름과 구현을 1:1로 일치 시킴 , 아주 작은 단위로 css를 작성하는 기법 .so{ height:50%; } 레이아웃 리셋 *{ box-sizing:border-box; } body{ margin : 0; padding: 0; } display:flex 부모요소에 적용 부모요소에 적용해야하는 flexbox 속성들 flex-direction : 정렬 축 정하기 아무것도 설정 X : 기본적으로 자식요소들을 가로 정렬 row(기본값) : 가로 정렬 col.. 공감수 0 댓글수 0 2022. 12. 23.
Unit4 [css기초] css은 사용자 경험을 제공하는 도구 사용자 인터페이스(UI): 일반사용자가 쉽게 사용할수 있도록 인터페이스 사용자 경혐(UX) :사용자 경험 CLI :개발자들이 애플리케이션과 소통하기 위해 키보드로 작성한 암호눌러서 동작시킴 프론트엔드 개발자 역할 : 애플리케이션과 소통에 필요한 UI이 제작 컴포넌트 기능별로 묶어서 제작 레이아웃 디자인 타이포그래피와 색상 적용 셀렉터 body { color: green; 선언 속성명 : 속성값 ; 선언구분자 } 선언블록 css 연결 -> link요소 : hrml파일과 다른 파일을 연결하는 목적으로 사용 rel속성 : 파일의 특징 href 속성: 파일의 위치 css 스타일 적용 1.인라인 스타일 2.내부 스타일 시트 3. 외부 스타일 시트 기본적인 셀렉터 id로 이름 .. 공감수 0 댓글수 0 2022. 12. 22.
unit3 [html기초] html기초 html: 프로그래밍 언어 X , 웹 페이지의 뼈대를 구성하는 마크업 언어 트리구조 자주 사용하는 html 요소 div 태그는 한줄 차지 span 컨텐츠 크기만큼 차지 img 이미지 삽입 닫는 테그 없음 a :링크 삽입 ul,li :리스트 input ,textarea : 다양한 폼 input type에서 radio 다수개중 하나 -> A B A B checkbox는 여러개 선택 textarea :줄바꿈이되는 입력폼 로그인 로그인 시맨틱 요소란? 의미를 가진 요소를 사용하는 방식 , 의미적 가치 X 의미적 가치O 1. 검색 엔지이 시맨틱 요소를 중요한 키워드로 고려 2. 여러개발자가 의미있는 코드 찾는게 더 유용 시맨틱 종류 : 독립적인 콘텐츠 : 중요하지 않은 부분 설명 : 아랫부분 위치 :.. 공감수 0 댓글수 0 2022. 12. 21.
unit2 [javascript기초] 1 코드 기초 StackBliz로 코드 실행 1. terminal에서 node index.js 입력 2. node 입력하면 REPL사용 종료할려면 .exit 입력 용어정리 *REPL : 컴파일 과정 없이 즉석에서 코드를 입력해 결과를 바로 알수 있는 방식 2 타입 number타입 :숫자로 정수와 실수 모두 표현 Math 내장 객체 Math.floor() : 괄호 안의 숫자를 내림하여 반환 Math.ceil() : 괄호 안의 숫자를 내림하여 반환 Math.round() : 괄호 안의 숫자를 반올림하여 반환 Math.abs() : 괄호 안에 숫자를 절대값을 반환 Math.sqrt() : 괄호 안에 숫자의 루트값을 반환 Math.pow() : 괄호 안에 첫번째 숫자를 밑,두번째 숫자를 지수인 숫자로 반환 st.. 공감수 0 댓글수 0 2022. 12. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.