HTML, CSS, JS5 CSS 기초 CSS (Cascading Style Sheet)- HTML로 작성된 정보를 꾸며주는 언어- 문서의 레이아웃과 스타일 정의- HTML(정보), CSS(디자인) CSS 구성요소: 선택자 { 속성 : 속성값 ;}h1 { font-size : 20px; color : blue; background-color : yellow;}- 선택자 : 디자인을 적용할 HTML 영역- 속성 : 어떤 디자인을 적용할지 정의- 속성값 : 어떤 역할을 수행할지 구체적 명령. 세미콜론 필수.CSS 연동 방법 3가지1. Inline Style Sheet (태그 안에 직접 스타일 적용) ## 2. Internal Style Sheet ( 3. External Style Sheet (.css 확장파일 따로 만들어서 태그로 불러오.. 2025. 10. 9. HTML 태그 HTML (Hyper Text Markup Language)- 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 HTML 태그 구성 컨텐츠 - 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용- 속성 : HTML 태그가 갖고 있는 추가 정보- 속성값 : 어떤 역할을 수행할지 구체적인 명령 진행 기본 예시 안녕! 태그- 닫힌 태그 없음.- src속성 : 삽입할 이미지 파일 경로- alt속성 : 웹사이트가 이미지 출력 못하면, 텍스트 정보로 대체.- width, height : 둘 중 하나만 입력하면, 기존에 갖고 있던 비율대로 나머지가 조정됨. 태그, 태그 hellohelloparagraph-.. 2025. 10. 7. 자바스크립트 DOM DOM(Document Object Model): 문서 객체 모델. 구조화된 문서를 표현하는 형식- XML이나 HTML 문서의 프로그래밍 인터페이스- DOM은 문서의 구조화된 표현을 제공함. 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 함. HTML DOM : HTML 문서를 조작하고 접근하는 표준화된 방법 노드 : HTML DOM에서 정보를 저장하는 계층적 단위노드 트리 : 노드들의 집합- 노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있음. (부모, 형제, 자식 등) 자바스크립트에서는 HTML DOM을 이용해서 노드 트리에 포함된 모든 노드에 접근 가능. 노드의 종류1. 문서 노드 : HTML 문서 전체를 나타내는 노드2. 요소 노드 : 모든 HTML 요소는 요소 노드, 속성.. 2025. 10. 7. 자바스크립트 기초2 연산자산술 연산자 (문자열도 사용 가능) 증감 연산자var num = 10;console.log(++num); //num+1 후 num 출력. 11console.log(--num); //num-1 후 num 출력. 10console.log(num++); //num 출력 후 num+1. 10console.log(num--); //num 출력 후 num-1. 11 비교 연산자 ==, ===console.log(10 == "10"); //trueconsole.log(10 === "10"); //false (값과 데이터 타입 모두 같다) 논리 연산자console.log(10 === 10 && 20 === 30); //ANDconsole.log(10 === 10 || 20 === 30); .. 2025. 10. 4. 자바스크립트 기초1 자바스크립트란- 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어 변수 선언 및 데이터 저장, 변경var fruit; //변수 선언fruit = "apple" //변수 초기화 (변수에 데이터를 전달하는 것)var fruit = "apple"; //변수 선언 및 초기화fruit = "banana"; //데이터 변경console.log(fruit); //변수 안의 데이터 확인. banana출력document.write(fruit); //변수 안의 데이터를 웹 화면에 출력. + 데이터 변경시, 변수를 이미 선언했다면, 해당 변수의 초기화 시에는 var을 다시 작성할 필요는 없음.+ console.log(변.. 2025. 10. 4. 이전 1 다음