1. 변수(Variable) 변수는 값을 저장하고 그 저장된 값을 참조하기 위해 사용한다. 한번 쓰고 버리는 값이 아닌 유지할 필요가 있는 값은 변수에 담아 사용한다. 또한 변수 이름을 통해 값의 의미를 명확히 할 수 있어 코드의 가독성이 좋아진다. 변수는 위치를 기억하는 저장소이다. 위치란 메모리 상의 주소(address)를 의미한다. 변수란 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자이다. -. 변수 선언 방식 -var var 는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. 아래와 같이 변수를 한 번 더 선언해도 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이를 보완하기 위해 추가된 변수 선언 방식이 let과 const이다. const 와 let ..
1. 프로그래밍이란? 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 프로그래밍에 앞서 문제를 명확히 이해한 후 적절한 문제 해결 방안의 정의가 필요하다. 이때 요구되는 것이 문제 해결 능력이다. 왜냐하면 대부분의 문제는 복잡하며 명확하지 않을 수도 있다. 따라서 문제를 명확히 이해하는 것이 우선되어야 하며 복잡함을 단순하게 분해하고 자료를 정리하고 구분해야 하며 순서에 맞게 행위를 배열해야 한다. 프로그래밍은 0과 1밖에 알지 못하는 기계가 실행할 수 있는 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며 그 결과물이 바로 코드이다. 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라보아야 한다. Computational thinking 2. 프로그래밍 언어 명령을 수행할 ..
Web browser - HTML 문서와 그림, 멀티미디어 파일등 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭 -. 웹 브라우저와 웹 서버의 통신과정 브라우저의 주요 기능 - 사용자가 자원을 서버에 요청하고 요청한 자원을 브라우저에 표시하는 것 웹 브라우저 → 웹 서버 : 요청(request) 웹 서버 → 웹 브라우저 : 응답(response) 웹 브라우저가 웹 서버에 연결하려면, 웹 서버가 실행중인 컴퓨터의 주소를 알아야하는데, 이 주소를 IP 주소라 한다. 각 컴퓨터는 IP주소를 가지고 있다. 숫자로 구성되어있어 외우기 쉽지않아 도메인 이름을 사용하는데 브라우저와 서버는 IP주소를 이용하여 연결해야하기 떄문에 DNS(Domain Name Server)을..
Flexbox를 사용하면 기존에 방식에 비해 매우 간단히 레이아웃을 처리할 수 있다. 1줄의 코드 추가로 수평 정렬이 가능하다 요소의 상하좌우 정렬, 순서 변경이 간단하다 요소가 간격 조절이 간단하다 서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다 -. Flexbox 레이아웃은 flex item이라 불리는 자식 요소와 이들을 내포하는 flex container 부모 요소로 구성된다. -. flex-direction flex-direction 속성은 flex 컨테이너의 주축 방향을 설정한다 row : 가로축 정방향 row-reverse : 가로축 역방향 column : 세로축 정방향 column-reverse : 세로축 역방향 -.flex-wrap flex-wrap : ..
-. display 프로퍼티 layout 정의에 자주 사용되는 중요한 프로퍼티이다. (교재의 내용이 어려워서 다른 곳에서 공부를 했다.) block : 요소 앞뒤로 줄바꿈 된다. inline : 요소 앞뒤로 줄바꿈이 되지 않는다. lnline-block : 박스 모양이 inline 처럼 옆으로 늘어선다. none : 박스가 생성되지 않습니다. -. block 레벨 요소 div (division) : 순수 컨테이너로서 아무것도 표현하지 않지만 class 나 id 속성으로 꾸미기 쉽도록 돕는 태그 h1~h6 : 제목 태그 p (paragraph) : 단락을 나누는 태그 ol (ordered list) : 순서가 있는 리스트 / 앞에 숫자가 붙는 태그 ul (unordered list) : 순서가 없는 리스트..
브라우저는 박스 모델의 크기와 프로퍼티, 위치를 근거로 하여 *렌더링을 실행한다. *렌더링 - 그림자, 색상, 농도 등에 변화를 주어 단순 그래픽 표면에 3차원 질감을 더해주는 과정 Box model 이미지 content : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height, 프로퍼티를 갖는다. padding : 테두리(border) 안쪽에 위치하는 요소의 내부 여백 영역이다. border : 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다. margin : 테두리 바깥에 위치하는 요소의 외부 여백 영역이다. margin 프로퍼티 값은 마진 영역의 두께를 의미한다. -. margin, padding 프로퍼티는 4개 방향에 대하여 지정이 가능하다. t..
