HTML <head> 사용 방법 알아보기 웹사이트의 요소입니다. HTML <head> 요소는 페이지 제목, 스타일 및 스크립트와 같은 웹 페이지에 대한 메타데이터(정보)의 컨테이너입니다. <head> 내부의 콘텐츠 요소는 주로입니다. 사이트 방문자가 아닌 컴퓨터(예:브라우저)에서 읽고 처리합니다. <head> 요소는 <header>와 혼동되어서는 안 됩니다. 다른 용도로 사용되는 요소입니다. <head> 요소는 여는 <html> 바로 아래에 배치됩니다
없이 HTML 코드 구문을 표시하려면 브라우저가 이를 실제 마크업으로 해석(및 렌더링)하려면 reserved를 이스케이프해야 합니다. HTML 문자를 먼저 입력하세요. <h1>를 살펴보세요. <code></code> 내부의 태그 아래 요소: 위의 코드를 HTML 문서에 추가하면 <h1> 분명히 원하지 않는 실제 마크업으로 해석됩니다. 꺾쇠 괄호 <를 이스케이프해야 합니다. 및 > h1을 둘러싼 예약된 HTML 문자이기 때문입니다. 다행히도 쉽습니다. < 바꾸기 &
가장 일반적으로 사용되는 속성 이름과 값을 살펴보고 HTML 속성을 사용하는 방법을 알아보세요. HTML 속성이란 무엇입니까? HTML에서 속성은 HTML 요소에 추가 정보를 추가하거나 기본 동작을 변경하는 데 사용되는 수정자 도구입니다. 추가된 속성이 없는 HTML 요소는 다음과 같습니다. 속성이 있는 HTML 요소 다음과 같이 정의됩니다: 이 모델을 염두에 두고 몇 가지 실용적인 속성 예를 살펴보겠습니다. href 속성 href 속성은 HTML에서 가장 중요한 속성 중 하나입니다. href 다음 URL을 지정하는
href 속성 href 속성은 HTML에서 가장 중요한 속성 중 하나입니다. href 다음 URL을 지정하는 데 사용됩니다. 하이퍼링크(간단히 링크라고도 함). 또는 스타일 및 스크립트와 같은 외부 리소스를 가져오기 위해 href의 가장 일반적인 사용 사례 앵커 요소 <a>에 내부 또는 외부 링크(URL)를 추가하는 것입니다. : href가 있는 내부 링크 사용자가 클릭하면 첫 페이지로 이동하는 링크를 만들어 보겠습니다. 집이라고 부를 것입니다. 먼저 앵커 요소를 정의합니다. 이제 <a>
태그는 HTML의 인라인 요소를 정의하여 텍스트 사이에 새 줄(줄 바꿈)을 삽입합니다. 예: <p> The <br> tag <br>forces<br>line<br>breaks in text </p> 결과: 태그 힘 선 텍스트 나누기 태그에 대해 알아두면 좋은 정보 개발자가 <br>를 사용하는 것을 종종 볼 수 있습니다. 태그를 사용하여 개별 HTML 요소 사이에 공백을 추가하지만 이는 잘못된 사용법입니다. CSS 여백을 사용해야
HTML에는 3가지 유형의 목록 요소가 있습니다. 순서 없는 목록(가장 일반적) 순서가 있는 목록 설명 목록 순서 없는 목록 정렬되지 않은 목록은 <ul>로 정의됩니다. 요소 및 내부의 각 목록 항목은 <li>로 정의됩니다. 요소: 결과: 애플 바나나 주황색 기본적으로 정렬되지 않은 목록은 원형 글머리 기호로 스타일이 지정되지만 CSS로 사용자 지정할 수 있습니다. 순서 목록 순서가 지정된 목록은 <ol>로 정의됩니다. 요소 및 내부의 각 목록 항목은 <li>로 정의됩니다.
HTML <noscript> 요소는 JavaScript가 비활성화된 경우 사이트 방문자의 브라우저에 콘텐츠를 표시하는 데 사용됩니다. . 누군가 귀하의 웹사이트를 방문했지만 브라우저에서 JavaScript가 비활성화되어 있다고 가정해 보겠습니다. 그들에게 알리려면(실수로 JavaScript를 껐을 수 있음) <noscript>를 사용합니다. 이렇게: 설명하기 위해 위의 HTML 스니펫을 이 CodePen에 추가했습니다. 하지만 JavaScript가 비활성화되어 있지 않으면 볼 수 없습니다. 자바스크립트를
버튼과 링크(앵커 요소 <a> ) 상호 교환 가능합니다. 그러나 올바르게 이해하는 것은 어렵지 않습니다. 다음은 기본 지침입니다. 링크 사용 시기() 링크 사용(<a href="/go-here">link</a> ) 사용자가 다음을 수행하기를 원하는 경우: 같은 페이지의 다른 섹션으로 이동 웹사이트의 다른 페이지로 이동 외부 웹사이트(다른 도메인)로 이동 버튼 사용 시기() 버튼 사용 (<button type="button">button</bu
HTML <meta> 사용 방법 알아보기 요소. <meta> 요소는 HTML 문서에 대한 여러 유형의 메타데이터를 정의하는 데 사용됩니다. 메타데이터는 정보를 의미합니다. 또는 더 구체적으로 메타데이터는 다른 데이터에 대한 정보를 설명하고 제공하는 데이터입니다. <meta> 요소에는 여러 속성과 값이 있습니다. name 속성은 가장 중요한 속성 중 하나입니다. name 여러 값을 취합니다. 예를 들어 description , content와 함께 사용 페이지를 설명하는 속성: <met
rel="noopener" 속성은 외부 링크 보안에 직접적인 영향을 미치기 때문에 알아야 할 가장 중요한 HTML 속성 중 하나입니다. target="_blank"를 사용하는 앵커 링크에서 속성. target="_blank" 새 브라우저 탭에서 링크를 엽니다. 다음은 rel="noopener"가 있는 링크의 예입니다. 속성: rel=noopener 작동 방식 rel="noopener"를 추가할 때 웹사이트의 외부 링크(target=&qu
대상 속성 target 속성은 사용자가 링크를 클릭할 때 링크를 열 위치를 지정합니다. 아래 링크를 클릭하면 현재 있는 것과 동일한 브라우저 탭/창에서 TechStacker의 첫 페이지로 이동합니다. 따라서 다른 웹사이트에 링크하면 사용자는 귀하의 웹사이트에서 귀하가 링크한 웹사이트로 이동하게 됩니다. 이것을 원할 수도 있고 원하지 않을 수도 있습니다. 이것은 기본적으로 <a>이기 때문에 발생합니다. 요소에는 target이 있습니다. 값이 _self인 속성 — 즉, 사용자가 있는 동일한 창에서 링크가 열립니다.
HTML에서 속성은 일반적으로 앵커 요소 예제와 같이 속성 이름과 속성 값으로 구성됩니다. 그러나 때때로 가치 (동작)은 속성 이름에 내장되어 있습니다. 예를 들어, defer HTML <script>를 수정하는 데 사용하는 속성 요소: defer 속성에 할당 연산자가 없습니다(=). ) 또는 동작이 내장되어 있기 때문에 값입니다. defer 이른바 부울입니다. 기인하다. 부울은 true의 두 가지 값만 가질 수 있는 데이터 유형에 사용됩니다. 또는 거짓 (또는 활성화/비활성화 ). defer를 자세히 살펴보겠
HTML에서는 사용자 정의 속성을 만들 수 있습니다. 그런 다음 CSS를 사용하여 스타일을 지정하거나 JavaScript를 사용하여 해당 속성의 동작을 제어할 수 있습니다. 사용자 정의 속성을 원하는 대로 부를 수 있지만 사용자 정의 속성 이름 앞에는 data-가 와야 합니다. 레이블: 예를 들어 Apple이라는 음식 요소가 있다고 가정해 보겠습니다. . 사용자가 클릭하면 유형이 무엇인지 표시하고 싶습니다. 음식의 팝업 대화 상자에 있습니다. 이를 위해 food-type이라는 사용자 정의 속성을 생성합니다. (data- 레
<figcaption> 요소는 <figure에 대한 캡션을 추가하는 데 사용됩니다. 요소. 이미지 캡션을 추가하는 데 자주 사용됩니다. 코드 예:
전체 HTML 캔버스를 특정 색상으로 채우려면 fillRect()를 사용할 수 있습니다. 사각형을 단색으로 채우는 속성입니다. 그런 다음 캔버스의 높이 및 너비 속성을 사용하여 채워진 사각형을 캔버스 전체에 펼칩니다. const canvas = document.getElementById(my-canvas); const ctx = canvas.getContext(2d); ctx.fillStyle = blue; ctx.fillRect(0, 0, canvas.width, canvas.height);
HTML <link media> 속성은 자산(일반적으로 CSS 파일)이 최적화되어야 하는 장치 유형을 지정하는 데 사용됩니다. 이렇게 하면 다양한 목적을 위해 다양한 CSS 스타일시트를 사용할 수 있습니다. media 속성은 여러 값을 취하며 가장 일반적인 값은 다음과 같습니다. all :모든 미디어 유형 장치에 적용되는 기본값입니다. screen :컴퓨터 화면, 태블릿, 스마트폰 등 모든 화면에서 사용할 수 있습니다. print :인쇄 미리보기 모드 및 인쇄된 페이지용입니다. 따라서 실제로는 screen에 최적
모달은 웹 페이지의 기본 창과 분리된 창입니다. 주요 목적은 사용자 상호 작용에서 기본 창을 비활성화하고 사용자와 정보를 공유하거나 무언가를 확인하는 것입니다. 모달 창은 로그인 구성 요소, 사용자 입력 확인 또는 기타 다양한 용도로 널리 사용됩니다. 부트스트랩은 구성 요소를 매우 빠르게 생성하는 데 도움이 되는 프레임워크입니다. 이 기사에서는 부트스트랩을 설정하는 방법을 검토하고, 모달이 필요한 이유를 배우고, 부트스트랩 프레임워크를 사용하여 작동하는 모달의 몇 가지 예를 살펴봅니다. 시작하기 웹 페이지에서 모달을 볼 수
탭은 추가 공간을 사용하지 않고도 다양한 정보 창을 볼 수 있게 해주는 UI(사용자 인터페이스) 요소입니다. 바인더나 책의 탭과 마찬가지로 페이지에 추가 정보를 표시하고 정보 창에 포함된 내용으로 식별됩니다. 탭을 클릭하면 해당 탭과 관련된 정보가 표시됩니다. 부트스트랩은 탭을 빠르게 만드는 데 도움이 되는 프레임워크입니다. 이 기사에서는 부트스트랩 설정 방법을 검토하고, 탭을 사용해야 하는 이유를 배우고, 부트스트랩 탭이 작동하는 몇 가지 예를 살펴봅니다. 시작하기 웹 페이지에서 탭을 볼 수 있도록 하기 위해 가장 먼저 해
마크업 언어에 대해 이야기할 때 프로그래밍에서 우리는 누군가가 무언가의 가격을 올리려고 한다는 의미가 아닙니다. 마크업 가격 인상이 아닙니다. 특정 유형의 스크립팅 언어를 사용하여 데이터를 나타내는 방법입니다. 이 가이드에서는 마크업 언어가 무엇인지, 어떻게 작동하는지, 언제 마크업 언어를 사용할 수 있는지 논의할 것입니다. 또한 세 가지 다른 마크업 언어와 사용 사례를 분석하여 마크업이 작동하는 방식을 확실히 이해할 수 있도록 합니다. 마크업 언어란 무엇입니까? 마크업 언어는 문서에 주석을 달기 위해 컴퓨터에서 사용하는 언어입
웹 페이지의 스타일을 지정하기 위해 CSS를 사용할 때 종종 페이지의 특정 부분을 대상으로 하고 싶을 것입니다. 하나 이상의 요소를 선택할 수 있는 방법 중 하나는 ID 및/또는 클래스 속성을 사용하는 것입니다. 이 튜토리얼을 진행하면서 대화형 Codepen을 확인하고 저와 함께 플레이하세요! ID 속성 및 CSS 선택기 태그를 사용하여 간단한 단락을 만들어 보겠습니다. <p> Color this paragraph! </p> ID는 고유하게 식별하기 위해 단일 요소를 추가하는 고유 식별자입니다.