블로그 이름을 입력해주세요

난 아니에요 운영체제(operating system) 사용자에게 편리한 인터페이스 환경을 제공하고 컴퓨터 시스템의 자원을 효율적으로 관리하는 소프트웨어 흔히 아는 컴퓨터 전원을 켜면 바로 나오는 소프트웨어를 말합니다 대표적인 것들은 Window, Mac OS, Linux, Unix 모바일은 IOS, Android가 있습니다 운영체제(OS)의 역할 사용자와 컴퓨터 사이 예를 들어 사람은 컴퓨터의 언어를 할 수 없습니다, 반대로 컴퓨터도 사람의 언어를 할 수 없습니다 사람(사용자)과 컴퓨터 사이를 소통할 수 있게 해주는 중재자 역할을 하는 것도 운영체제의 역할 중 하나입니다 컴퓨터 하드웨어의 효율적인 관리 정확히는 컴퓨터의 시스템 자원 관리라고 생각하면 됩니다 흔히 말하는 컴퓨터 시스템 자원은 하드웨어라 이..

DOM이란 문서 객체 모델(The Document Object Model, 이하 DOM) 프로그래밍 인터페이스이다 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다 - 자바스크립트는 새로운 HTML 요소나 속성을 추가 - 자바스크립트는 존재하는 HTML 요소나 속성을 제거 - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경 - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경 - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경 - 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가 - 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응 우리가 보고 있는 웹페이지는 일종의 문서(document)이다 DOM 은 프로그래밍 언어는 아니지만 DO..

window.location.href = "경로" addEventListener 사용 시 ex) loginButton.addEventListener('click', () => { window.location.href = "경로" })

배열의 요소를 가지고 문제를 풀어 봅니다 문제) divideArrayInHalf 함수를 다음과 같이 구현해주세요 divideArrayInHalf 함수는 array를 인자로 받습니다. 이 array는 숫자 값으로 만 구성되어 있으며 총 5개의 요소(element)들로 구성되어 있습니다. divideArrayInHalf 함수는 인자로 들어온 array로부터 새롭게 구성된 배열 result을 리턴합니다. array 요소들 중 10과 같거나 작은 값의 요소들은 result의 맨 앞으로, 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴해주세요. 재구성이 되는 순서는 array의 맨 뒤 요소부터 맨 앞 요소까지 입니다. 즉, 배열의 뒷 요소부터 재구성을 진행해주세요. 예를 들어, 인자로 들어..

간단하게 가운데 정렬을 쉽게 할 수 있는 방법이 있습니다 바로 예를 들어 보자면 아래 box를 만들었습니다 box .box { width: 300px; height: 300px; background-color: royalblue; } 왼쪽 상단에 box가 위치해 있습니다 여기서 margin을 통해 간단하게 body요소의 흐름에 따라 가운데 정렬을 할 수가 있습니다 margin: 0px auto; .box { width: 300px; height: 300px; background-color: royalblue; margin: 0px auto; } body가 상위요소가 아닌 부모 요소를 하나 만들어 가로(width)를 설정해주고 만들어 보겠습니다 box body { background-color: bisqu..

inline 줄 바꿈 없이 나란히 배치되는 속성을 의미합니다 대표적인 , , 태그가 있습니다 AAA BBB CCC inline-block inline-block으로 지정된 요소들은 기본적으로 inline의 속성을 가지지만 가로와 세로를 block처럼 지정해 줄 수 있습니다 span { display: inline-block; width: 200px; height: 200px; background-color: rgb(118, 83, 29); } block 전후의 줄 바꿈이 있고 다른 엘리먼트를 밀어내고 한 줄을 차지합니다 대표적으로 , , 가 있습니다 div, h1, p{ background-color: yellow; } AAAA BBBB CCCC

css의 position을 활용하면 일명 box라고 하는 레이아웃의 위치를 자유롭게 이동할 수 있습니다 position을 이용할 수 있는 프로퍼티가 몇 개 있습니다 relative absolute fixed 세 가지를 알아봅니다 relative 로얄블루색상의 박스를 만들었습니다 가로 100px, 세로 100px의 박스입니다 .box1 { width: 100px; height: 100px; background-color: royalblue; position: relative; } 여기에 relative 속성을 추가하겠습니다 실행시키게 되면 아무 일도 일어나지 않습니다 그 이유는 position속성을 움직일 명령어를 입력하지 않았기 때문입니다 position 속성들을 움직일 수 있는 명령 중 대표적으로 to..

시멘틱 웹은 의미론적인 웹이란 뜻이다 시멘틱 웹 = 의미 있는 웹 시멘틱 태그 = 의미있는 태그 과거 또는 현제 div(디비전)이라 하는 태그를 이용하여 마크업의 영역들을 구분해 왔는데 최근에 들어 사용자가 사용하기에 검색엔진과 같은 찾는 수단의 정확도가 중요해지면서 시멘틱 태그를 사용하여 개발을 하는 경우가 많이 있다 시멘틱 태그 적용 전 중요한 제목 입니다 중요한 내용 입니다 시멘틱 태그 적용 후 중요한 제목 입니다 중요한 내용 입니다 영역이 가지고 있는 확실한 의미를 부여함으로써 개발환경에 있어 관리에 용이함은 물론 사용자에게 있어도 검색엔진 등 정확도를 올려줄 수 있다는 점이다 예를 들어 HTML의 img태그와 CSS의 background-image를 통해 이미지를 넣는다고 가정할 때 둘의 차이점..