JH 개발 블로그

To do DEV 유튜브 강좌 듣고 유동적인 '헤더 상단바 코딩' 해보기 School 시스템자동화 4주차 강의 듣기 품질표준방법론 과제 피피티 대략 만들기 산종설 레포트 대략 작성.. TIL 오늘은 유튜브에 있는 좋은 무료 강좌를 찾아서 그것을 들어보고 따라해서 헤더 상단바 코딩을 해보았다. 요새 들어 이론보다 실제로 무언가를 만드는게 더 중요하다고 느껴졌다. 이론으로는 무슨 개념인지 이해를 하고 넘어갔지만 막상 웹사이트를 만들자니 구조가 명확히 보이지 않았다.. 보자마자 구조를 파악하는 능력이 필요할 것 같다. 유튜브에 좋은 영상들이 많아서 앞으로도 따라해서 만들어볼 생각이다. Tomorrow do 오늘 배웠던 것 -> 간단하게 블로그에 몰랐던 것, 핵심 개념들 올리기

오늘은 간단한 로그인 폼 만들기 연습을 해보았습니다. 따라해 볼 모델은 다음과 같습니다 HTML Sign in Forgot Password? Remember Me Sign in OR twiter facebook need an account? Sign up forgot your password? Retrive CSS .device{ position: absolute; top: 50%; left: 50%; // 컨테이너 시작점이 가운데로 배치되기 때문에 밑처럼 해줘야 margin: -300px 0 0 -150px; //1-4줄까지 화면 크기를 바꿔도 유동적으로 가운데 정렬 width: 300px; height: 600px; border: 1px solid whitesmoke; border-radius: 20..

flexbox란? flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다. flexbox의 구성 flexbox는 복수의 자식들 요소인 item과 그 상위 부모 요소인 container로 구성된다. flexbox를 만드는 방법은 간단하다. 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언..

중앙처리장치 CPU 중앙처리장치는 메모리에 저장된 프로그램과 자료를 이용하여 실제 작업을 수행하는 전자회로 장치이다. 이 중앙처리장치는 자료의 연산을 수행하는 연산장치와 컴퓨터의 작동을 제어하는 제어장치, 그러고 연산에 필요한 자료를 임시로 저장하는 레지스터로 구성된다. 중앙처리장치 내부에도 자료 버스와 제어 버스가 연결되어 있다. 자료 버스는 연산장치와 레지스터 간 연결 경로이다. 이 자료 버스는 외부 버스와 구별하여 내부 버스 또는 시스템 버스라고 한다. 제어 버스는 레지스터와 연산장치에 읽기, 쓰기 또는 여러 종류의 명령 제어 신호를 전달하는 경로이다. 1. 연산장치 ALU 산술연산과 논리연산 연산장치(ALU)는 더하기, 빼기, 나누기, 곱하기 등의 산술연산 모듈과 NOT, OR, XOR 등의 논리..

컴퓨터 구성요소 하드웨어의 중요한 구성요소로는 중앙처리장치, 주기억장치, 보조기억장치, 입력장치, 출력장치 등이 있다. 중앙처리장치는 연산을 수행하는 연산장치(ALU)와 연산을 제어하는 제어장치로 구성되어 있다. 1. 중앙처리장치 CPU 중앙처리장치(CPU)는 주어진 임무를 수행하기 위해 소프트웨어로부터 받은 명령어를 실행하는 장치이다. 중앙처리장치는 마이크로세서 또는 줄여서 프로세서라고도 부르며, 사람의 머리에 해당하는 매우 중요한 컴퓨터의 구성 요소이다. 중앙처리장치는 제어장치와 연산장치로 구성되며 제어장치는 자료와 명령어의 입출력을 제어하며, 연산장치는 산술연산과 논리연산을 수행하는 장치이다. 메인보드 중앙처리장치는 마더보드라고도 부르는 컴퓨터 내부의 메인보드에 장착된다. 메인보드는 중앙처리장치를 ..

To do School 품질표준방법론 강의 듣기 산업공학프로그래밍 과제 제출 My Study 자바스크립트 기초 복습(TIL에 간단히 정리) 인프런 강좌 '인터렉티브 웹 개발 제대로 시작하기' 듣기 TIL window.addEventListener('load', function (){ var title = document.getElementById('main-title'); console.log(title); }); // addEventLisner은 메서드, 즉 함수.. 첫번째 매개변수는 문자열 형태의 이벤트 이름이 들어감. 두번째 매개변수는 첫번째 매개변수인 이벤트가 실행되면 실행될 함수를 넣음. // 전체 문서가 load 되면 함수를 실행 // HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라..

e '이벤트 발생시 전달되는 정보'라는 뜻으로, 만약 '클릭'이라는 이벤트를 발생했을 시, 이벤트 객체는 해당 이벤트에 대한 상세한 정보를 담고 있다. 예) 마우스 위치, 마우스 버튼의 상태, 옵션키(연관된 ctrl, Alt, Shift 키) 등 이벤트 핸들러에 전달되는 이벤트 정보를 담고 있다. 이벤트 리스너 함수에 넘겨지는 인수(매개변수) 이다. 예제를 통해서 설명을 덧붙이겠습니다. 먼저 html과 css는 다음과 같습니다. Event menu 1 menu 2 menu 3 이어서 다음은 javascript입니다. 코드 해석 맨 마지막 줄 addEventListner 메서드를 통해 되도록 합니다. clickHandler 함수의 매개변수에 를 써주었습니다. 는 '이벤트 객체'로써 현재 클릭이라는 이벤트를..

javascript를 이용해서 '클릭하면 해당 버튼의 색깔을 바꾸는 실습'을 해볼 겁니다. 학습의 차원에서 해당 실습에 대한 여러 가지 방법을 나열하려고 합니다. 아래의 사진은 메뉴 버튼을 클릭했을 때 버튼의 색깔이 바뀌어지는 결과를 캡쳐해둔 것입니다. 방법 1) (스크립트를 중점적으로 보세요) Event menu 1 menu 2 menu 3 /* 메뉴 클릭 때 색깔 바꾸기 - 첫번째 방법(약간 비효율적) */ var menuLinks = document.querySelectorAll('.menu-link'); function clickMenuHandler() { /* onclickMenu와 같은 on____ , _____listener, _____handler들은 이벤트 리스너들이라고 할 수 있고, 보..

addEventLister의 정의 : 특정 이벤트가 발생했을 시 특정 함수를 실행할 수 있게 해주는 기능 -----> addEventListener가 특정 이벤트 발생 시 특정 함수를 실행시킨다면, removeEventListener는 등록된 이벤트리스너를 지우는 역할을 합니다. - 사용법 addEventListener var st = document.getElementById("stalker"); st.addEventListener('이벤트종류', '함수이름'); removeEventListener (이벤트리스너가 등록된 후)st.removeEventListener('이벤트종류', '함수이름'); 예제 change color 마우스만 올려도 색깔 바뀌는 버튼: green red 한번만 메세지 띄우는 버..

display: inline-block; display: block; display: inline; 이것들에 대해 알아보기 전에 먼저 간단한 예제를 보자. 안녕하세요 저는 친절한 소나무입니다 출력 결과 안녕하세요 저는 친절한 소나무입니다 태그 뒤에 줄바꿈이 일어나고 태그 뒤에는 줄바꿈이 일어나지 않는 것이 보일 것입니다. 왜 이런 현상이 발생할까요? 두 태그에 border값을 주면 확인할 수 있습니다. display: block; 태그는 block 요소입니다. block요소는 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. block이니까 기다란 블럭이라고 생각하면 외우기 쉽겠죠? p 태그, h 태그#, li 태그 를 한번 떠올려 보세요! 보통 ..