티스토리

mong2coding

검색하기

블로그 홈

mong2coding

codingmong2.tistory.com/m

몽이코딩 님의 블로그입니다.

구독자: 68

방명록 방문하기

반응형

주요 글 목록

6. HTML 요소 관련 메서드 메서드 종류 설명 text(), html() 문서객체 안의 내용을 가져오거나 추가할 때 사용하는 메서드 attr(), prop() 문서객체의 속성의 값을 가져오거나 속성을 추가하는 메서드 removeAttr() 문서객체 속성을 제거하는 메서드 텍스트 관련 text()와 html() 메서드 비교 text메서드와 html메서드는 문서객체의 텍스트컨텐츠를 컨트롤하는 메서드입니다. 둘다 게터와 세터를 갖고 있어, 글자를 얻어올 수도 있고, 변경할 수도 있습니다. 두 메서드의 큰 차이는 태그문자를 태그로 인식하는지, 아니면 문자로 인식하는지입니다. 자바스크립트의 innerHTML속성과 innerText속성을 메서드화 시켰다고 생각하면 편합니다. 1. 매개변수가 없는 경우(게터) 텍스트1텍.. 공감수 11 댓글수 0 2024. 9. 10.
5. DOM 탐색 메서드 DOM 탐색 메서드문서객체의 선택이 이동되는 메서드들입니다. 흔히, 가족관계 선택을 의미합니다.(부모, 조상, 자손, 후손, 형제) 메서드 종류 설명 parent() 선택된 문서객체의 부모요소를 선택 parents() 선택된 문서객체의 모든 조상요소를 선택 parents('선택자') 선택된 문서객체의 조상요소 중 매개변수에 작성한 조상요소를 선택 parentsUntil('선택자') 선택된 문서객체의 조상요소 중 매개변수에 작성한 요소 전까지 조상요소들을 선택 children() 선택된 문서객체의 모든 자손요소를 선택 children('선택자') 선택된 문서객체의 자손요소 중 매개변수에 작성한 자손요소를 선택 find('선택자') 선택된 문서객체의 후손요소 중 매개변수에 작성한.. 공감수 10 댓글수 0 2024. 8. 22.
4. 필터 메서드 필터 메서드선택된 문서객체를 다시 재선택하는 메서드입니다. 메서드 종류 설명 first( ) 선택된 문서객체 중 첫번째 객체를 재선택하는 메서드 last( ) 선택된 문서객체 중 마지막 객체를 재선택하는 메서드 even( ) 선택된 문서객체 중 짝수 객체를 재선택하는 메서드 odd( ) 선택된 문서객체 중 홀수 객체를 재선택하는 메서드 eq(n) 선택된 문서객체 중 배열번호가 n번인 객체를 재선택하는 메서드 filter(기준) 선택된 문서객체 중 매개변수의 기준에 맞는 객체를 재선택하는 메서드 not(기준) 선택된 문서객체 중 매개변수의 기준이 아닌 것을 재선택하는 메서드 add('선택자') 선택된 문서객체와 매개변수의 선택자를 추가로 선택하는 메서드 first( ) .. 공감수 6 댓글수 0 2024. 8. 21.
3. 메서드 문법 메서드 문법 jQuery는 속성을 사용하는 방식은 거의 없고 대부분 메서드화시켜서 작성합니다. 메서드 괄호( ) 안에 매개변수를 어떻게 작성하는지에 따라 다양한 유형이 나뉩니다. 메서드에 따라서 한 개 유형만 가질 수도 있고 여러 개 유형을 가질 수도 있습니다. 게터(get~) 형식 메서드는 객체의 값을 얻어오는 메서드를 의미합니다. 세터(set~) 형식 메서드는 객체의 값을 변경하는 메서드를 의미합니다. javascript는 get과 set을 붙여 구분하지만 jQuery는 한 메서드로 같이 사용합니다. 메서드 문법 유형 문법유형예시1. 매개변수가 없는 유형 $('선택자').메서드명( ); 2. 매개변수가 한개인 유형 $('선택자').메서드명(값); 3. 매개변수가 여러개인 유형 $('선.. 공감수 7 댓글수 0 2024. 8. 20.
2. 선택자 선택자란?jQuery는 자바스크립트에서 파생되어 객체선택 방식을 사용해야 하는데 그 방식을 선택자라고 합니다셀렉터라고도 불리며 객체선택이 쉬워진 것이 특징입니다.소개된 선택자 외에도 다양한 선택자가 있습니다. (https://www.w3schools.com/jquery/jquery_ref_selectors.asp) 요소(Element) 관련 선택자선택자의 종류예시설명*$('*')모든 문서객체를 선택 element $('h1')특정 태그를 모두 선택 #id $('#text')작성된 아이디값을 갖는 문서객체를 선택 .class $('.text')작성된 클래스값을 갖는 문서객체를 선택 [attribute='value'] $('input[type=text]')해당 요소의 태그속성명과 속성값이 갖은 문서객체를 선.. 공감수 49 댓글수 0 2024. 8. 7.
1. jQuery 란? jQueryHTML의 조작을 단순하게 하기위해 설계된 크로스 플랫폼 자바스크립트 라이브러리입니다.존 레식이 2006년 뉴욕시 바캠프에서 공식적으로 소개하였습니다.최근 리액트나 Vue.js같은 자바스크립트 프레임워크가 나오면서 트렌드에 밀리고는 있지만 실무에서는 여전히 많이 사용합니다.jQuery의 목적은 웹사이트에서 javascript를 훨씬 쉽게 사용할 수 있도록 하는 것입니다. 라이브러리 적용 기본적으로 웹페이지가 라이브러리 없이 인식하는 프론트엔드 언어는 HTML, CSS, Javascript 세가지입니다.그 외의 자바스크립트 프레임워크들을 사용하려면 반드시 라이브러리를 적용해야 합니다.웹페이지에 jQuery를 추가하는 방식은 두 가지가 있습니다. 다운로드 방식jQuery 라이브러리 파일을 다운로.. 공감수 6 댓글수 0 2024. 8. 5.
11. 이벤트 이벤트란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건을 말합니다. 예시) 어떤 요소 위에 마우스 커서를 올릴 때 키보드에서 키를 누를 때 브라우저 창의 크기를 재조정하거나 닫을 때 웹 페이지가 로딩을 완료할 때 form에서 양식을 제출할 때 오류가 발생했을 때 등.. 이벤트 등록하기 인라인 (Inline) : 이벤트 대상의 HTML 요소에 직접 등록합니다.인라인 프로퍼티 리스너 (Property Listener) : 이벤트 대상이 되는 HTML 요소의 객체에 프로퍼티로 이벤트를 등록합니다.프로퍼티 리스너//Javascriptconst btn1 = document.getElementById('btn1')btn1.onclick = function () { alert('hello');} .. 공감수 49 댓글수 0 2024. 7. 23.
10. DOM DOM 이란?Document Object Model 의 약어로 웹 문서를 객체화한 것을 말합니다. 웹 문서(HTML)를 객체화 함으로써 제어할 수 있습니다. HTML 요소 선택하기 get 메서드 document.getElementById : HTML 아이디 명으로 요소를 찾을 수 있습니다. document.getElementsByClassName : HTML 클래스 명으로 요소를 찾을 수 있습니다. document.getElementsByTagName : HTML 태그명으로 요소를 찾을 수 있습니다.프론트엔드 html css javascript//javascriptdocument.getElementById('title');document.getElementsByClassName('item');d.. 공감수 48 댓글수 0 2024. 7. 3.
9. 객체 객체(Object) 객체는 연관된 데이터를 담는 그릇입니다. 객체 안의 내용물은 바뀔 수 있지만 본질은 항상 객체입니다.객체는 키(key)와 값(value)으로 구성되어 있습니다.객체가 가지고 있는 값을 프로퍼티(property)라고 하며 함수인 경우 메서드라고 합니다.프로퍼티로는 숫자, 문자, 불리언 등과 같은 타입이 될 수도 있고, 메서드를 가질 수도 있고, 배열, 객체 같은 또 다른 객체를 가질 수 있습니다.// name이 키(key)이며, // '홍길동'가 값(value)이다.const obj = { name: '홍길동', // name 프로퍼티 age: 99, // age 프로퍼티 hello: function() { // hello 메서드 console.log.. 공감수 20 댓글수 0 2024. 5. 22.
8. 함수 함수명령문을 하나의 단위로 그룹화한 것을 말합니다.함수를 생성하는 방법에는 함수 선언식과 함수 표현식이 있습니다. 함수 선언식function 키워드, 함수이름( ), 블록{…} 으로 이루어져 있습니다.function sayHello() { console.log("안녕하세요"); console.log("반갑습니다");}sayHello(); 함수 표현식객체인 함수를 변수에 담아 생성할 수 있습니다.함수 표현식으로 선언할 경우 호이스팅의 영향을 받지 않습니다.let sayHello2 = function() { console.log("자바스크립트"); console.log("함수입니다");};sayHello2(); 파라미터 괄호() 안에 파라미터(매개변수)를 선언하여, 함수 호출 시 값을 전달할.. 공감수 49 댓글수 0 2024. 5. 15.
7. 반복문 반복문 동일한 코드를 반복하여 실행시키는 명령문으로 for, while, do while이 있습니다. for 문정해진 숫자만큼 반복하려 할 때 사용합니다. 괄호는 초기화 조건식 표현식 순으로 구성 되어있습니다./*1. let i = 0 으로 한번만 초기화2. i while 문 반복 횟수를 알 수 없을 때 사용할 수 있는 반복입니다. 조건문이 true일 때 실행되는 반복문이며 명령문이 실행되기 전에 참, 거짓을 판단합니다.let count = 0;while (count do...whilewhile문과 같이 반복 횟수를 알 수 없을 때 사용할 수 있는 반복문입니다. 조건문이 true일 때 실행되는 반복문이며 while문과 다른 점은 최초 한번은 명령문을 수행합니다.let num = 0;do {.. 공감수 50 댓글수 0 2024. 5. 10.
6. 조건문 조건문 조건에 따라 다른 문장을 실행하는 명령문으로 if와 switch가 있습니다. if 문 조건이 참(true)인 경우 명령문을 실행합니다. 조건이 거짓(false)인경우 명령문을 실행합니다. else if(다중조건)을 사용하여, 여러개의 조건문을 작성할 수 있습니다. 논리 연산자에서 배운 값(null, 0, NaN, 빈 문자열(""), undefined)은 거짓(false)로 간주합니다.let condition = false;if (condition) { console.log("참 입니다.");} else { console.log("거짓 입니다.");}let number = 20;if (number == 10) { console.log("조건문1");} else if (number == 20.. 공감수 46 댓글수 0 2024. 5. 10.
5. 배열 배열이란값과 인덱스로 참조되어 정렬된 집합입니다.여기서 index는 배열의 위치를 의미합니다.배열의 값은 서로 타입이 다를 수 있으며 비어 있을 수도 있습니다. 배열 생성리터럴 표기법 (array literal syntax)let fruit = ['사과', '바나나', '딸기']; 생성자 표기법 (array constructor syntax)let fruit = new Array('사과', '바나나', '딸기'); 배열 접근[ ](대괄호)를 통해 배열안의 값에 접근할 수 있으며 index는 0부터 시작합니다.let fruit = ['사과', '바나나', '딸기'];console.log(fruit[0]); // "사과"console.log(fruit[1]); // "바나나"fruit[2] = .. 공감수 58 댓글수 0 2024. 5. 6.
4. 연산자 연산자 어떠한 연산을 수행하는 기호입니다. 문자열 병합문자열은 + 연산자를 사용하여 병합할 수 있습니다.//javascriptconsole.log("안녕" + "하세요"); // "안녕하세요" 출력console.log("1" + 2 + 3); // "123" 출력 산술 연산자x + y - 덧셈x - y - 뺄셈x * y - 곱셈x / y - 나눗셈x % y - 나머지//javascriptlet x = 10;let y = 20;console.log(x + y);console.log(x - y);console.log(x * y);console.log(x / y);console.log(9 % 2); 증감 연산자++x - 전위 증가 (x에 1만큼 증가 시킨 후 현재 명령문 수행)x++ - .. 공감수 75 댓글수 0 2024. 5. 3.
3. 자료형 데이터 타입데이터 타입은 값의 종류를 말하며, 크게 기본 타입과 객체 타입으로 구분 할 수 있습니다. 기본 타입 (Primitive Type)값을 하나만 가지며 더 이상 단순화할 수 없기 때문에 원시값이라고도 합니다.number(숫자)string(문자열)boolean(불린)nullundefinedsymbol 객체 타입 (Object Type)기본 타입을 제외한 값은 모두 객체입니다.Object(객체)Array(배열)Function(함수)Date(날짜 타입)이외에 정규식, 수학 계산 등 다양한 객체들이 존재 숫자(number)숫자 값을 나타내는 자료형을 number 타입이라고 합니다. 자바나 다른 언어에서는 정수나 소수 그리고 데이터 크기에 따라서 키워드를 다양하게 주지만 자바스크립트는 그냥 숫자를 적.. 공감수 69 댓글수 0 2024. 5. 2.
2. 변수, 상수 변수변수란 값을 담는 그릇 입니다.변수에 담긴 값은 언제든 바뀔 수 있습니다.변수를 선언할 때는 let이라는 키워드와 식별자와 값으로 나뉩니다. ES6 이전에는 변수를 선언할 때는 var 키워드를 사용했습니다. 같은 영역안에 같은 식별자를 가진 변수는 추가 생성이 불가능합니다.let name = "홍길동"; // name 라는 변수에 "홍길동" 값 할당name = "김길동"; // 변수 값을 "김길동" 으로 변경 가능 상수상수도 변수와 마찬가지로 값을 담는 그릇입니다.변수와 차이점은 한 번 할당된 값을 바꿀 수 없습니다.상수를 선언할 때는 const라는 키워드와 식별자와 값으로 나뉩니다. ES6 버전 이후에 생겼습니다.const age = 35; // age 라는 상수에 35 값 할당age = .. 공감수 67 댓글수 0 2024. 4. 30.
12. 반응형 웹 반응형 웹 사이트란?웹 사이트에서 PC화면 뿐만 아니라 모바일, 태블릿, 노트북 등 여러가지 디바이스의 해상도에 반응하여 각각에 맞는 최적의 화면을 보여주는 홈페이지 입니다. 뷰포트(viewport)뷰포트란 웹 브라우저에서 실제 내용이 표시되는 영역입니다. 모바일 viewport와 PC의 viewport는 그 크기가 다릅니다. 그렇기 때문에 반응형 웹 에서는 viewport에 맞게 화면을 보여줘야 할 필요가 있습니다.이럴때 사용하는 메타태그가 뷰포트 메타태그 입니다. 메타 뷰포트 태그 지정하는 법 메타 뷰포트 태그 속성width - 뷰포트 가로height - 뷰포트 세로user-scalable - 사용자 확대/축소 가능 여부initial-scale - 초기 화면 비율maximum-scale - 최대.. 공감수 41 댓글수 0 2024. 4. 29.
1. javascript 시작하기 javascript란?자바스크립트는 웹 페이지의 동적인 기능을 구현하기 위해 만들어진 언어입니다.이후 자바스크립트는 다양한 기능과 라이브러리가 추가되면서, 웹 어플리케이션 개발의 필수적인 언어가 되었습니다. ESECMAScript의 약어로 버전을 의미합니다. 2015년에 ES6 버전이 출시될 때 많은 기능들이 추가되면서 큰 변화가 있었습니다. 자바스크립트 사용법내장 스크립트 - script 태그 안에 Javascript 코드 사용외부 파일 링크 - script 태그 안 src속성에 js파일 경로 삽입 주석// - 한 줄 주석/* javascipt code */ - 긴 줄 주석 숫자표현, 문자표현, 세미콜론숫자 - 12345문자 - 싱글쿼트('helo') 더블쿼드("hello") 로 표현세미콜론(;) .. 공감수 80 댓글수 0 2024. 4. 29.
11. Flexbox display float position 등과 같은 속성을 사용해 레이아웃을 구현하는데 한계가 있어서 어려운 레이아웃을 간단하게 구현할 수 있게 CSS3에 추가된 레이아웃 방식이 flexbox입니다. flexbox 효율적으로 HTML 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식입니다. flexbox는 우리가 배치하고 싶은 HTML 요소인 item과 이것을 감싸고 있는 상위 부모 요소인 container로 구성됩니다. flexbox를 만드는 방법은 정렬하려는 요소(item)의 부모 요소(container)에 display: flex;속성을 적용하면 됩니다. flex container 속성 종류전체적인 정렬이나 흐름에 관련된 속성은 container에 정의합니다.flex-dire.. 공감수 5 댓글수 0 2024. 4. 29.
10. Transform, Transition transformtransform 속성은 HTML 요소를 이동 효과, 크기 조절, 회전, 기울이기를 나타낼 때 사용합니다.사용은 속성 값으로 특수한 함수를 넣어주면 됩니다. transform 속성 값 translate(x, y) - 지정한 크기만큼 x축, y축으로 이동합니다. translateX(x) - 지정한 크기만큼 x축으로 이동합니다. translateY(y) - 지정한 크기만큼 y축으로 이동합니다. scale(x, y) - 지정한 크기만큼 x축과 y축으로 확대·축소합니다. scaleX(x) - 지정한 크기만큼 x축으로 확대·축소합니다. scaleY(x) - 지정한 크기만큼 y축으로 확대·축소합니다. rotate(각도) - 지정한 각도만큼 회전합니다. (+시계방향, -시계반대방향) rot.. 공감수 6 댓글수 0 2024. 4. 25.
9. 표(table) 태그 관련 속성 border - 속성을 사용하여 , , 태그에 테두리를 그립니다. border-collapse: collapse; - 속성을 사용하여 중복된 테두리를 하나로 합칩니다. background-color - 속성을 사용하여 배경색을 지정합니다. 실습 테이블 이름 과목 국어 수학 영어 홍길동 70 90 80 김길동 90 60 70 /* CSS */table { border: 1px solid black; border-collapse: collapse;}th, td { .. 공감수 66 댓글수 0 2024. 4. 24.
8. Position position 속성 position은 HTML 요소를 배치하는 방법을 지정합니다. position 속성 값 static - 요소가 일반적인 흐름을 따라 배치가 되게하며, 기본값입니다. relative - 요소가 일반적인 흐름에 따라 배치가 되지만 static과 차이점은 요소가 자신의 위치에서 top right bottom left와 같은 지정된 속성 값 기준으로 배치된다는 점입니다. absolute - 요소가 일반적인 흐름을 따르지 않게합니다. static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다. fixed - 요소가 일반적인 흐름을 따르지 않게합니다. 화면의.. 공감수 62 댓글수 0 2024. 4. 23.
7. Float float 속성 float이 적용되면 HTML 요소는 원래의 흐름에서 벗어나 둥둥 떠다니듯 배치가 됩니다. float 속성 값 none - 기본 값으로 요소를 띄우지 않습니다. left - 왼쪽에 띄웁니다. right - 오른쪽에 띄웁니다. inherit - 부모 요소로부터 상속합니다. initial - 기본값으로 설정합니다. clear 속성 clear는 취소하다 라는 뜻으로 float: left; 혹은 float: right; 값을 취소합니다. clear 속성 값 none; - 기본 값으로 전체를 취소합니다. left; - 왼쪽을 취소합니다. right; - 오른쪽을 취소합니다. both; - 왼쪽 오른쪽 둘 다 취소합니다. 실습 긴 내용1 긴 내용2 /* CSS */ img { width: 300px.. 공감수 5 댓글수 0 2024. 4. 19.
6. Display display 속성 HTML 요소마다 기본적으로 갖고 있는 display 속성 값을 어떻게 표시할지를 결정합니다. display: block 이면 Block 레벨 영역이며, display: inline 일 경우 Inline 레벨 영역 입니다. display 속성은 주로 4가지가 있습니다. display 속성 값 none 요소를 보이지 않게 설정합니다. 영역도 차지하지 않습니다. block 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. width, height 속성을 지정 할 수 있습니다. inline 컨텐츠만큼 영역을 차지합니다. block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. inline-block.. 공감수 37 댓글수 0 2024. 4. 18.
5. Box Model Box Model 모든 HTML 요소는 웹 페이지에서 일정 공간을 차지하게 됩니다. 그리고 이러한 공간을 CSS에서는 박스 모델(Box Model)로 정의하고 있습니다. HTML 요소의 박스 모델은 Content, Padding, Border, Margin으로 구성되어 있습니다. 웹 브라우저 > 개발자도구 > Computed 탭에서 박스모델을 확인하시면 편리합니다. Content 텍스트나 이미지가 들어있는 HTML 요소의 실직적인 내용입니다. width와 height를 사용하여 가로 세로 너비를 지정할 수 있습니다. 인라인 요소는 콘텐츠 만큼의 영역을 가지므로 width, height 가 적용되지 않습니다. 적용하고 싶다면 display: inline-block으로 영역을 변경해주어야 합니다. Paddi.. 공감수 52 댓글수 0 2024. 4. 16.
4. 배경 배경 스타일 속성 background-color HTML 요소의 배경 색을 지정합니다. .backcolor { /* 키워드 값 */ background-color: red; /* 16진수 값 */ background-color: #bbff00; /* RGB 값 */ background-color: rgb(255, 255, 128); } background-image HTML 요소에 배경 이미지를 한 개 또는 여러 개를 지정할 수 있습니다. .backimage { background-image: url(https://source.unsplash.com/random); } background-repeat 배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수.. 공감수 41 댓글수 0 2024. 4. 15.
3. 폰트 글꼴 관련 속성 font-family - 글꼴 종류를 지정합니다. 기본값은 웹브라우저 기본 글꼴이며 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 사용할 수 있습니다. 적용은 웹 폰트 사이트에 방문하여 또는 @import 문을 사용하여 웹 폰트를 적용합니다. font-size - 글자 크기를 지정합니다. font-style - 글자를 주로 이탤릭체를 설정하기 위해 사용합니다. font-weight - 글자 굵기를 지정합니다. font-variant - 소문자를 작은 대문자로 바꾸는 속성 CSS 글꼴 속성1 글꼴 속성2 글꼴 속성3 /* CSS */ @import url('https://fonts.googleapis.com/css2?family=Moirai+One&display=swap'); * {.. 공감수 8 댓글수 0 2024. 4. 15.
2. 선택자 HTML 요소를 선택해서 꾸미려면, HTML 요소를 선택하는 방법을 알아야하는데 그 방법을 선택자(Selector)라고 합니다. 전체 선택자 모든 요소를 선택합니다. 전체 선택자는 브라우저 기본 스타일을 초기화 하려고 할 때 자주 사용합니다. 사용문법 - * /* 모든 요소를 선택함. */ * { margin: 0; padding: 0; } 타입 선택자 특정 태그 이름을 가진 모든 요소를 선택합니다. 사용문법 - tag명 /* 태그명이 h1인 요소를 모두 선택함. */ h1 { color: blue; } 클래스 선택자 주어진 class명을 가진 모든 요소를 선택합니다. 웹 문서에서 복수의 태그에 사용이 가능합니다. 문법 - .class명 /* class에 title을 갖고 있는 모든 요소를 선택함. */.. 공감수 48 댓글수 0 2024. 4. 14.
1. CSS란? Cascading Style Sheets의 약자로 HTML 문서를 예쁘게 꾸미는 역할을 합니다. HTML에도 스타일을 적용할 수 있지만 HTML과의 분리를 위해선 CSS 파일에 사용합니다. CSS 구조 선택자 or Selector - 꾸미고 싶은 HTML 요소를 선택합니다. 예) h1 속성명 - 꾸미고 싶은 속성명을 입력합니다. 예) color 속성값 - 어떻게 꾸밀지 속성값을 입력하면 됩니다. 예) blue CSS 적용 방법 인라인 스타일 - Inline Style Sheet 내부 스타일 - Internal Style Sheet 외부 스타일 - External Style Sheet 인라인 스타일 - Inline Style Sheet 스타일을 정의하고 싶은 HTML 요소에 스타일을 적용합니다. HTML .. 공감수 53 댓글수 0 2024. 4. 13.
10. HTML 구조 웹 페이지를 작성하려면 기본적으로 선언되어야 하는 것들이 있는데요. 이것을 HTML 문서 기본구조라 하며, 그 구조는 다음과 같습니다. HTML 이번 시간에 배울 내용은 HTML 입니다. 도큐먼트 타입으로 현재 문서가 어떤 버전으로 작성되었는지 미리 표시합니다. 은 태그는 아니며 웹 문서 제일 처음에 표시합니다. 위 예시의 도큐먼트 타입 은 HTML5 버전 이라는 뜻이며, 이전 버전인 HTML 4.01 에서는 더 복잡하게 사용했습니다. 하지만 현재 대부분 HTML5를 사용하고 있기 때문에 웹 사이트를 만들때 제일 상단에 이 표시를 사용하면 됩니다. ~ 웹 문서의 시작()과 끝()을 나타내는 태그입니다. 태그는 문서정보(메타데이터)를 담고 있습니다. - 과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데.. 공감수 42 댓글수 0 2024. 4. 12.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.