미리보기 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..
#01 정의 및 특징 웹 사이트의 내용 중 독립적인 컨텐츠를 나타내는 태그로서 각각의 컨텐츠에는 앞에서 배운 제목()이 표시되어야합니다. 태그와는 서로 자식 요소로 사용 할 수 있지만, 의 자식 요소로는 사용하면 안됩니다. #02 사용처 블로그 게시물, 뉴스 기사, 리뷰 등으로 사용되며 이 태그는 블로그 게시물과 같은 독립적인 콘텐츠들을 감싸는 곳에 많이 이용합니다. #03 사용 방법 뉴스1 내용1 뉴스2 내용2 # 무료강의 바로가기
