자바스크립트(JavaScript)의 변수는 임의의 값을 저장하고 필요한 곳에서 다시 사용하기 위해 사용되는 저장소입니다. 변수에는 여러 가지 유형이 있지만 그 중에서도 var, let, const는 가장 일반적으로 사용되는 변수 유형으로 오늘은 이 특징들에 대해서 알아보겠습니다. Var 자바스크립트(JavaScript)의 가장 오래된 변수 유형입니다. var는 함수 스코프를 가지고 있습니다. var로 선언된 변수는 중복 선언이 가능하며, 변수 선언과 동시에 값을 할당할 수도 있습니다. 범위 또한 전역 범위 혹은 함수 내에서만 지정하여 자유롭게 사용이 가능합니다. 한번 예제를 살펴보겠습니다. var kaheal_name_en = "kaheal";// 값이 지정된 변수 선언 var kaheal_name_kr..
미리보기 View Transition API 작동 영상 미리보기 작동원리 페이지를 불러오면, 현재 페이지를 캡쳐하여 "view-transition-old" 에 저장한다. 새로운 페이지로 이동되면 이전 페이지 장면인 "view-transition-old"에 저장 되어 있던 장면을 보여주고, 새로운 화면 인 "view-transition-new" 화면을 나타낸 후 다시 "view-transition-old"에 저장된다. 사용방법 JS 로도 컨트롤이 가능하지만 이번 시간에는 HTML과 CSS만으로 제어하는 방법을 배워보겠습니다. # 01 버전 확인 크롬의 버전 111 이상에서 작동하기에 현재 사용하는 크롬의 버전을 확인합니다. (크롬 설정 -> Chrome 정보) # 02 view-transition 활성화 ..
#01 정의 및 특징 #01-01 태그 글을 작성 할때는 문단을 나누는 경우가 생깁니다. 그 한문단을 구성할때 사용하는 태그입니다. #02-02 태그 일반적으로 줄 바꿈을 하기위해 (Enter) 를 사용해도 HTML 문서 내에서는 텍스트들이 다 붙어 있는 현상을 보실 수 있습니다. 이럴 때 태그를 사용해줌으로써 줄을 바꿀 수 있습니다. #02 사용처 #01-01 태그 해당 태그는 style을 적용하여 문단 효과를 주기도 합니다. 그러므로 정확하게 구분이 필요한 문단의 경우에 사용을 하고 일방적으로 줄을 바꿀 시에는 잘 사용하지 않습니다. #02-02 태그 문단 내에서 줄을 바꿔야 할 때 사용합니다 #03 사용 방법 안녕하세요! 카힐 블로그에 오신 걸 환영합니다. HTML의 기본 태그 중 p, br 태그의..
#01 정의 및 특징 단어나 문장을 굵게 표현하기위해 사용 단어나 문장의 의미를 강조하기 위해 사용 단, 과도한 강조는 텍스트의 내용을 모호하게 만들기 때문에 꼭 사용해야 할 때만 사용 #02 두 태그의 차이 "두 태그 모두 굵고 강조를 위해 사용을 하는데 무슨 차이가 있나?" 라는 생각을 많이 하셨을거에요. 눈에 보이지 않는 한가지 큰 차이가 있답니다! #02-01 태그 정말로 단순하게 텍스트를 진하게만 표시해줍니다. 그 외 다른 기능은 없습니다! #02-02 태그 텍스트를 진하게 표현 해주는 것 뿐만 아니라, "브라우저 자체에서 이 부분은 중요하구나" 를 인식합니다. 바로 브라우저에서 지원하는 웹 접근성(Web Accessibility)에 큰 기여를 합니다. 특히 스크린 리더 기능을 사용 시 태그에 ..
#01 정의 및 특징 클릭 시 페이지를 이동하게 하기 위해 사용 태그 내부에는 이동하고자 하는 URL이 작성 사용자가 해당 링크를 클릭하면 다른 페이지로 이동 기본적으로 a 태그는 html 자체적으로 파란색으로 변경 또한 a 태그는 텍스트 뿐만 아니라 이미지, 각종 태그를 포함하여 제작 가능 #02 사용처 웹페이지 원하는 위치에 링크를 만들 수 있다 nav 메뉴에 사용한다 게시판 목록을 구성할 때 사용한다 그리드 형식으로 구성할때도 사용한다 (박스 전체가 A 태그로 쌓여있다) (예 : https://lottomaker.co.kr/board/list/news/all/1) 무궁무진한 사용방법이 존재한다 메일 주소, 전화하기 기능을 사용할 때 사용한다 #03 사용 방법 로또메이커 바로가기 로또메이커 새창열기 ..
#01 정의 및 특징 블록을 나타내는 요소로, 다른 요소를 묶어 그룹화하는데 사용한다. 사용자 CSS나 SCRIPT를 사용하여 하기 위해 사용 레이아웃 스타일을 적용할 때에도 사용 (display:block;) 의 기본 스타일을 지니고 있어서 사용 시 (width:100%;) 를 작성할 필요 없음 다만, 디자인의 관련된 기능(그룹화)만 수행하기 때문에 다른 HTML 요소에 비해 별다른 기능 없음 #02 사용처 다른 요소들을 묶어 묶음을 만들기 위해 사용됩니다. 따라서 이 태그는 CSS를 사용하여 스타일을 적용하거나 레이아웃을 조정하기 위해 흔히 사용되고 JavaScript 코드를 사용하여 다양한 동작을 실행할 때 이 태그를 활용할 수도 있습니다. 즉, 구조를 구성 하거나 선택 영역을 정할 때 사용 #03..
