일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- html 실무
- 코딩 자율학습
- html 기본문서
- TS
- css배경
- HTML
- propschildren
- CSS
- cpu 성능 향상 기법
- CPU
- 메모리와 캐시 메모리
- 코딩
- Git
- JS
- 이벤트
- 자바스크립트
- JavaScript
- 코딩자율학습
- 혼자 공부하는 컴퓨터구조+운영체제
- 코딩 자율학습 html + css + 자바스크립트
- html 문서작성
- do it! 한권으로 끝내는 웹 기본 교과서 html+css+자바스크립트 웹 표준의 정석
- html 필수태그
- 코딩 자율학습 html + css + 자바스크립트]
- do it! html+css+자바스크립트 웹 표준의 정석
- https://api.jquery.com/
- css필수 속성
- react
- css박스 모델
- Do it
- Today
- Total
목록분류 전체보기 (84)
게으른 나에게
14-1 변수 알아보기변수프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터.상수: 값을 한번 지정하면 바뀌지 않는 데이터. 변수 선언 규칙변수 선언: 변수를 사용하려면 변수를 구별 할 수 있도록 이름을 붙이는 것. 1. 변수 이름은 영어 문자와 언더스코어(_), 숫자 사용.사용할 수 있는 변수 이름now, _now, now25, now_25사용할 수 없는 변수 이름23now, now 25, *now 2. 자바스크립트는 영어 대소 문자 구별, 예약어는 변수 이름 x.number, Number, NumBer 모두 다른 변수 이름 인식.var X. 3. 여러 단어를 연결한 변수 이름은 중간에 대문자 섞어 씀.낙타 표기법: totalArea, TotalArea 4. 변수 이름은 의미 있게 작성.변수..
13-1 자바스크립트로 무엇을 할까웹의 요소 제어HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이거나 포토 갤러리를 펼쳐 놓은 것처럼 웹 사이트 UI 부분에 많이 활용.-웹 애플리케이션 만듦.-다양한 라이브러리 사용. (리액트, 앵큘러, 뷰, 제이쿼리)-서버 개발 가능. (Node.js) 13-2 웹 브라우저가 자바스크립트를 만났을 때웹 문서 안에 외부 스크립트 파일로 연결해서 자바스크립트 작성자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해 사용. 자바스크립트 위 텍스트를 클릭해 보세요 웹 브라우저에서 스크립트를 해석하는 과정① 를 보고 이 문서가 웹 문서라는 것을 알게 됨. 태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작.② 웹 문서에서 HTML 태그의 순서와 포함관..
7-1 다양한 보조기억장치하드디스크(=자기 디스크)자기적인 방식으로 데이터를 저장하는 보조기억장치.플래터: 실질적으로 데이터가 저장되는 곳은 동그란 원판. 자기 물질로 덮여 있어 수많은 N극과 S극 저장. N극과 S극은 0과 1의 역할 수행.스핀들: 플래터를 회전시키는 구성 요소.RPM: 스핀들이 플래터를 돌리는 속도는 분당 회전수를 나타내는 단위. 헤드: 플래터를 대상으로 데이터를 읽고 쓰는 구성요소. 플래터 위에서 미세하게 떠 있는 채로 데이터를 읽고 쓰는, 바늘같이 생긴 부분.디스크 암: 헤드는 원하는 위치로 헤드를 이동시키는 부착 도구.하드 디스크는 훨씬 더많은 양의 데이터를 저장해야 하므로 일반적으로 여러 겹의 플래터로 이루어져 있고 양면 모두 사용 가능.양면 플래터를 사용하면 위아래로 플래터당..
6-1 RAM의 특징과 종류RAM의 특징RAM: 실행할 프로그램의 명령어와 데이터 저장.휘발성 저장 장치임. 휘발성 저장 장치: 전원을 끄면 저장된 내용이 사라지는 저장 장치.비휘발성 저장 장치: 전원이 꺼져도 저장된 내용이 유지되는 저장 장치. CPU는 보조기억장치에 직접 접근 X.보조기억장치(비휘발성 저장 장치): 보관할 대상 저장.RAM(휘발성 저장 장치): 실행할 대상 저장.CPU가 실행하고 싶은 프로그램이 보조기억장치에 있다면 이를 RAM으로 복사하여 저장한 뒤 실행. RAM의 용량과 성능 RAM 용량이 충분히 크면 보조기억장치에서 많은 데이터를 가져와 미리 RAM에 저장 가능.많은 프로그램 동시에 실행하는데 유리.RAM 용량이 크면 많은 프로그램들을 동시에 빠르게 실행하는 데 유리.용량이 필요..
5-1 빠른 CPU를 위한 설계 기법클럭클럭 속도가 높아지면 CPU 명령어 사이클을 더 빠르게 반복, 다른 부품들도 더 빠르게 작동.클럭속도: 헤르츠(Hz) 단위로 측정. 1초에 클럭이 몇번 반복되는지.클럭이 1초에 한번 반복되면 CPU 클럭속도는 1Hz, 클럭이 1초에 100번 반복되면 CPU 클럭 속도는 100Hz.오버클럭킹: CPU는 계속 일정한 클럭속도를 유지하기보다 고성능을 요하는 순간에 순간적으로 클럭 속도 높임. 그렇지 않을떈 속도 낮춤.클럭 속도를 무작정 높이는 것은 발열 문제. 코어와 멀티코어CPU 성능 높이는 법: CPU의 코어와 스레드 수 늘리는 방법.코어: 명령어를 실행하는 부품.CPU는 명령어를 실행하는 부품을 여러개 포함하는 부품으로 명칭의 범위 확장.멀티코어 CPU(=멀티코어 ..
4-1 ALU와 제어장치ALUALU가 어떤 정보를 받아들이고 내보내는지 표현한 그림 ALU가 계산을 하기 위해서는 피연산자와 수행할 연산 필요.ALU는 레지스터를와 제어장치로부터 받아들인 피연산자와 제어장치로 부터 수행할 연산을 알려주는 제어 신호로 산술 연산, 논리 연산 등 다양한 연산 수행. ALU가 내보내는 정보.연산을 수행한 결과는 특정 숫자, 문자, 메모리 주소. -> 결괏값 일시적 레지스터 저장.(프로그램 실행속도 때문) -> 계산 결과 + 플래그 값 내보냄. 오버플로우: 연산결과가 연산결과를 담을 레지스터보다 큰 상황. ALU가 내보내는 플래그플래그 종류의미부호 플래그연산한 결과의 부호를 나타냄제로 플래그연산 결과가 0인지 여부를 나타냄캐리 플래그연산 결과 올림수나 빌림수가 발생했는지 나타냄..
3-1 소스 코드와 명령어명령어는 컴퓨터를 실질적으로 작동시키는 매우 중요한 정보!모든 소스 코드는 컴퓨터 내부에서 명령어로 변환. 고급 언어와 저급 언어고급언어: 사람이 이해하고 작성하기 쉽게 만들어진 언어. 대부분의 프로그래밍 언어.저급언어: 컴퓨터가 직접 이해하고 실행할 수 있는 언어.고급언어로 작성된 소스 코드가 실행되려면 반드시 저급언어, 명령어로 변환되어야 함. 저급언어1. 기계어: 0과 1의 명령어 비트로 이루어진 명령어 모음. 2. 어셈블리어: 0과 1로 표현된 명령어(기계어)를 읽기 편한 형태로 번역한 언어. -하드웨어와 밀접하게 맞닿아 있는 프로그램을 개발하는 임베디드 개발자, 게임 개발자, 정보 보안 분야 등의 개발자 많이 이용. -어셈블리어를 읽으면 컴퓨터가 프로그램을 어떤 ..
12-1 반응형 웹 알아보기반응형 웹 디자인스마트폰, 태블릿, 스마트tv 등 브라우저 환경이 다양하게 바뀔 때 기존 웹 사이트 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트 구현. 모바일 기기를 위한 뷰포트뷰포트: 스마트폰 화면에서 실제 내용이 표시되는 영역.뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시 가능. 뷰포트 지정하기태그를 이용해 태그 사이에 작성. content 안에서 사용하는 뷰포트의 속성종류설명사용 가능한 값기본값width뷰포트 너비device-width 또는 크기브라우저 기본값height뷰포트 높이device-height 또는 크기브라우저 기본값user-scalable확대.축소 가능 여부yes 또는 no(yes는..
11-1 변형 알아보기transform과 변형함수css에서 변형을 적용하려면 transform 속성과 변형함수 이름을 함께 작성해야 함.transform: 함수웹 요소를 이동시키는 변형함수: translate()웹 요소를 x축으로 50 px, y축으로 100px 이동하는 클랙스 선택자 .photo를 정의..photo { transform: translate(50px, 100px) 2차원 변형: 웹 요소를 평면에서 변형. x축은 오른쪽으로 갈수록 값이 커지고, y축은 아래로 내려갈수록 값이 커짐.3차원 변형: x축과 y축 원근감을 주는 z축을 추가해서 변형. z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아짐.2차원 변형함수종류설명translate(tx, ty)지정한..
10-1 연결 선택자종류형식설명하위 선택자상위요소 하위요소상위요소 포함 모든 하위요소 선택자식 선택자부모요소 > 자식요소부모요소 포함 자식요소만 선택인접 형태 선택자요소1 + 요소2요소1 이후 먼저 오는 형제요소 선택형제 선택자요소1 ~ 요소2요소1과 형제인 모든 요소 선택 10-2 속성 선택자종류선택요소예시[속성]해당 속성있는 요소[required][속성 = 값]지정한 속성값 있는 요소[target + _blank][속성 ~= 값]지정한 속성값 포함 요소(단어별)[class ~=button][속성 ㅣ=값]지정한 속성값 포함 요소(하이픈,단어별)[title l= us][속성 ^= 값]지정한 속성값 시작 요소[title ^= eng][속성 $= 값]지정한 속성값 끝나는 요소[href $= xls][속성 *..