전체 글41 [프로그래밍] 컴파일러 VS 인터프리터 컴파일러와 인터프리터는 고급언어로 작성된 Source Program을 Object Program으로 번역하는 번역 프로그램을 말합니다. 두 가지는 프로그램을 번역 하는 방식에 따라 구분됩니다. 컴파일러 컴파일러는 고급 언어로 작성된 프로그램 전체를 목적 프로그램으로 번역한 후, 링킹 작업을 통해 컴퓨터에서 실행 가능한 프로그램을 생성합니다. - 장점 : 단 한번의 번역 후에는 다시 번역하지 않으므로 실행 속도가 빠릅니다. - 단점 : 프로그램 전체를 번역한 후 실행하기 때문에 번역 시간이 오래 걸립니다. 위와 같은 컴파일러 방식을 사용하는 대표적인 언어로는 C 와 JAVA 등이 있습니다. 인터프리터 인터프리터는 고급 언어로 작성된 프로그램을 한 줄 단위로 받아들여 번역하고, 번역과 동시에 프로그램을 즉시.. 2023. 7. 14. 자바스크립트 - DOM 과 노드 DOM DOM은 Document Object Model의 약자로, 웹 피이지의 구조와 콘텐츠를 표현하는 데 사용되는 API를 말합니다. 웹 페이지를 스크립트나 프로그래밍 언어와 연결하여 상호작용할 수 있도록 해줍니다. 문서를 논리적인 트리 구조로 표현하며, 각 노느에는 객체가 포함됩니다. DOM메서드를 사용하면 문서의 구조, 스타일 또는 콘텐츠를 프로그래밍적으로 변경할 수 있습니다. 웹 브라우저에서 HTML, XML 문서를 표현하는데 사용되며, 문서를 노드 트리로 나타냅니다. 또한 노드를 생성, 이동 및 변경할 수 있으며, 이벤트 리스너를 추가할 수 있습니다. DOM 메서드 getElementById : 주어진 ID를 지니고 있는 요소를 DOM 트리에서 찾아서 접근하는데 사용됩니다. getElements.. 2023. 7. 13. CSS 박스 모델 (Box Model) Margin, Padding, border 더보기 목차 CSS 박스 모델 콘텐츠 영역 패딩(padding) 영역 테두리(border) 영역 바깥(margin) 영역 CSS 박스 모델 (Box Model) CSS 박스는 4개의 영역으로 이루어집니다. 각 영역은 콘텐츠(contents) 영역, 안쪽(padding) 영역, 테두리(border) 영역, 바깥(margin) 영역이라고 부릅니다. 콘텐츠 영역 콘텐츠 영역은 Contents edge가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함하고 있는 영역을 말합니다. 콘텐츠 영역의 크기는 contents width와 contents height로 정해지고, 배경색과 배경 이미지를 가질 수 있습니다. div { width: 160px; height: 80px; background-c.. 2023. 6. 29. CSS - 계단식 ( Cascade ) 웹 프로젝트를 진행하다 보면 요소에 적용시킨 CSS 가 제대로 작동하지 않는 현상이 발생하는 경우가 있습니다. 보통 이런 상황에서 가장 먼저 확인해야할 사항은 동일 요소에 두 가지 규칙이 작성되었는지를 확인하는 것입니다. CSS에는 동일 요소에 두 가지 규칙이 작성되었을 때 계단식(Cascade)과 밀접하게 관련된 우선 순위 개념을 사용하여 충돌을 제어합니다. 계단식 CSS에서는 규칙의 순서가 매우 중요합니다. 동일한 요소에 적용된 두 가지 규칙에 대해서 CSS는 마지막에 나오는 규칙이 사용됩니다. 아래의 예시에서는 h1에 대해 2가지의 스타일을 적용합니다. 하나는 글자의 색을 빨강으로 하나는 글자의 색을 파랑으로 설정했습니다. HTML 삽입 미리보기할 수 없는 소스 CSS는 이처럼 중첩된 단락이 본문에.. 2023. 6. 28. CSS - 속성(3) CSS 리스트 CSS에서 사용할 수 있는 list-style 속성 1. list-style-type 2. list-style-image 3. list-style-position list-style-type 리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 합니다. list-style-type 속성을 이용하면 리스트에 다양한 마커를 적용할 수 있습니다. list-style-type 속성을 이용한 마커의 변경 사과 멜론 바나나 수박 참외 옥수수 감자 상추 고구마 오이 배추 시금치 list-Style-image list-style-image 속성을 이용하면 마커로 자신만의 이미지를 사용할 수 있습니다. list-style-position list-style-position 속성을 이용하면 리스.. 2023. 6. 27. CSS - 속성(2) CSS 글꼴 (font) - generic family : 비슷한 모양을 가지는 글꼴 집합("Serif", "Monospace" 등) - font family : 특정 글꼴 집합 ("TImes", "Courier" 등) font-family : 해당 속성은 하나의 글꼴만을 설정 할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있습니다. font-family 속성값이 여러개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 옵니다. 사용자에게 해당 글꼴이 있는지 여부를 판단하고 존재하면 해당 글꼴로 존재하지 않으면 다음 글꼴을 가져와 확인합니다. 글꼴의 이름은 반드시 따옴표로 둘러 쌓아야 하고 여러 개의 글꼴을 나열할 때는 쉼표로 구분 짓습니다. font-style : 주로 이탤.. 2023. 6. 26. CSS - 속성 CSS 색 색상 이름으로 표현 RGB 색상 값으로 표현 16진수 색상 값으로 표현 CSS 배경 background-color : 해당 HTML 요소의 배경색을 설정 background-image : 해당 HTML 요소의 배경 이미지를 설정 background-repeat : 배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타납니다. 하지만 이 속성을 사용하면 배경 이미지를 한 방향으로만 반복되도록 설정할 수 있습니다.(repeat - x (수평), repeat - y(수직), no-repeat(반복 x)) background-position : 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정합니다. background-position 에서 사용할 수 있는.. 2023. 6. 26. CSS CSS란 HTML이나 XML과 같은 구조화된 문서를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어입니다. HTML의 각 요소(element)의 style을 정의하여 화면에 어떻게 표현할 것인지를 나타냅니다. CSS 사용 이유 HTML 요소의 세부 스타일을 일일이 따로 지정하고 유지 보수 해야되는 문제점을 해소하기 위해 만들어진 언어 웹 페이지의 스타일을 별도의 파일로 저장해서 사이트의 전체 스타일을 쉽게 제어 가능 웹 사이트의 스타일을 일관성 있게 유지해주고 유지 보수 또한 쉽게 가능 CSS 문법 a{ background-color:yellow; font-size: 16px;} CSS 의 문법은 선택자(selctor) 와 선언부 (declaratives)로 구성됩니다. 선택자 : CSS를.. 2023. 6. 26. 이전 1 2 3 4 5 6 다음
