본문 바로가기

전체 글43

var, let, const 차이점 변수varletconst범위함수영역블록 영역 { }블록 영역 { }호이스팅OXX재할당OOX재선언OXX  var변수지역 / 전역 모두가능 let, const변수지역변수  함수 영역 (var)해당 함수 내에서는 어디든 사용가능 블록 영역 (let, const)같은 함수 내에서라도 해당 블록 { } 을 벗어나면 사용불가 2024. 8. 3.
querySelector와 getElementById의 차이점 querySelector와 getElementById는 모두 HTML 문서에서 요소를 선택하는 데 사용되는 자바스크립트 명령어입니다. 하지만 이 둘 사이에는 몇 가지 중요한 차이점이 있습니다.getElementByIdgetElementById는 주어진 ID 속성 값을 가진 요소를 선택합니다. 특징:단일 요소 선택: ID는 문서 내에서 유일해야 하므로, getElementById는 항상 단 하나의 요소만 반환합니다.빠른 성능: 브라우저가 내부적으로 최적화되어 있어 매우 빠르게 요소를 찾을 수 있습니다.문법 간단: 간단한 ID 선택에 적합합니다. querySelectorquerySelector는 CSS 선택자 구문을 사용하여 문서에서 첫 번째로 일치하는 요소를 선택합니다. 특징:유연한 선택: ID, 클래스,.. 2024. 8. 2.
요소(element)와 속성(attribute)의 차이점 속성과 요소는 HTML 및 XML 문서에서 중요한 개념이지만, 그 용도와 역할이 다릅니다. 이 두 용어의 차이점을 이해하는 것은 웹 개발에 있어서 매우 중요합니다.요소 (Element)요소는 HTML 또는 XML 문서의 기본 구성 블록입니다. 요소는 시작 태그, 콘텐츠(옵션), 그리고 종료 태그로 구성됩니다. 요소는 웹 페이지의 구조를 정의하고, 콘텐츠와 콘텐츠의 관계를 나타냅니다.구성:시작 태그: 요소의 시작을 나타냅니다.종료 태그: 요소의 끝을 나타냅니다.콘텐츠: 요소 내부의 내용(텍스트, 다른 요소 등).예시: This is a div element.위 예시에서 는 div 요소의 시작 태그이고, 는 div 요소의 종료 태그입니다. "This is a div element."는 요소의 콘텐츠입니다... 2024. 8. 2.
블록 요소와 인라인요소에 대하여 블럭요소(block element)와 인라인요소(inline element)란?블럭요소 : 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들입니다.인라인요소 : 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다.블럭요소(block element)와 인라인요소(inline element)의 종류블럭요소~,,,,,등 인라인요소,, 특징 및 주의점블럭요소는 내부에 블럭요소와 인라인요소를 포함할 수 있습니다. 인라인요소는 내부에 블럭요소를 포함할 수 없습니다.블럭요소들 중에서도 인라인요소만 포함할 수 있는 것들이 있습니다. : ~,인라인요소를.. 2024. 7. 24.
스타일 시트, 스타일 우선순위, 선택자 CSS - 스타일인라인 스타일 : 태그 내에 작성내부 스타일 시트 : 헤드블록에 style태그 작성외부 스타일 시트 : 외부에 새로운 css디렉토리를 생성하여 작성  CSS - 선택자  CSS - 스타일 우선 순위CSS에서 스타일의 우선순위는 다양한 요소들에 의해 결정되며, 이를 "특이성(Specificity)"이라고 합니다. 특이성은 어떤 스타일 규칙이 다른 규칙보다 우선하는지를 결정합니다. CSS에서 스타일 우선순위는 다음과 같은 요소들에 의해 결정됩니다:1. 인라인 스타일 (Inline Styles)인라인 스타일은 HTML 요소 내에 직접 정의된 스타일입니다. 예를 들어, 와 같이 작성됩니다. 인라인 스타일은 항상 다른 스타일 규칙보다 높은 우선순위를 가집니다.2. 아이디 선택자 (ID Select.. 2024. 7. 24.
경로 지정 2024. 7. 23.
form관련 태그 form속성을 사용하는 이유?사용자가 아이디와 비밀번호를 입력하고 로그인 버튼을 누르면 입력한 정보는 웹 서버로 전송된다.그럼 서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인하고 그 결과를 웹 브라우저에 보낸다. 폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동한다.따라서 텍스트 박스나 버튼같은 폼 형태는 HTML태그로 만들지만, 폼에 입력한 사용자 정보는 ASP나 PHP, JSP같은 서버 프로그래밍을 이용해 처리한다. method사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정함.메소드에서 사용할 수 있는 속성값은 get과 post이다.get : 데이터 제한이 있고 주소 표시줄에 사용자가 입력한 .. 2024. 7. 23.
DAY01 HTML(Hyper Text Marup Language) - 기획자의 영역- 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 CSS(Cascading Style Sheets) - 디자이너의 영역- 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당. JS(JavaScript) - 개발자의 영역- 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당. 웹 표준(Web Standard)- 웹 표준이란 '웹에서 사용되는 표준 기술이나 규칙'을 의미, W3C의 표준화 제정단계의 권고안에 해당하는 기술.포트폴리오 만들 때 웹 표준에 맞게 웹페이지를 꾸며보자. 크로스 브라우징(Cross Browsing) - 크롬, 엣지.. 2024. 7. 22.
09-3 그러데이션 효과로 배경 꾸미기 웹 문서의 배경을 꾸밀 때는 배경색이나 이미지를 사용하는 것 외에 그러데이션 효과로 색 다른 느낌을 줄 수도 있음. 그러데이션 효과를 사용하려면 아직 웹 브라우저의 다양한 부분을 고려해야 하지만 여러모로 편리하게 사용할 수 있는 기능임. >>> 선형 그러데이션 선형 그러데이션이란 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말함. [기본형] linear-gradient ( to 또는 , , [], .....]); 2023. 4. 17.