본문 바로가기

온라인 멘토와 함께하는 공부/HTML42

[HTML] Chrome의 '페이지 소스 보기'와 '검사'의 차이 Chrome의 '페이지 소스 보기'와 '검사'의 차이 웹 문서의 소스를 보는 방법은 다음 두 가지가 있습니다. 웹 페이지에서 마우스 우클릭을 하면 팝업 메뉴 아래쪽에 '페이지 소스 보기'와 '검사' 항목이 있습니다. 페이지 소스 보기 크롬 웹 브라우저의 메뉴 옵션 중 '페이지 소스 보기'와 '검사' 기능이 있습니다. '페이지 소스 보기(Ctrl+U)'는 현재 웹 페이지의 소스 코드를 사용자에게 보여주는 기능입니다. 이를 통해 사용자는 HTML, CSS 및 웹 페이지에 포함된 스크립트 등을 볼 수 있습니다. 보통 웹 페이지의 구조를 이해하거나 특정 코드를 찾고자 할 때 사용됩니다. 검사 반면에 '검사' 기능은 개발자 도구를 열어 줍니다. 이 도구를 사용하면 웹 페이지의 소스 코드뿐만 아니라 DOM(Docu.. 2024. 2. 17.
[HTML] 제목이나 주제를 나타내는, Hn 태그 제목이나 주제를 나타내는, Hn 태그 HTML에서 hn 태그는 제목을 나타내는 태그로, h1에서 h6까지 있습니다. 각각은 다른 수준의 제목을 나타내며, h1이 가장 높은 수준의 제목을 의미하고 h6은 가장 낮은 수준의 제목을 의미합니다. 이들은 일반적으로 글의 구조를 나타내는 데 사용되며, 검색 엔진 최적화(SEO)에도 중요한 역할을 합니다. 검색 엔진은 이 태그들을 사용하여 페이지의 내용을 구조화하고 중요한 정보를 파악합니다. 다음은 hn 태그의 간단한 사용 예시입니다: 메인 제목 부제목 소제목 섹션 제목 하위 섹션 제목 최하위 섹션 제목 h1 태그는 보통 페이지의 가장 중요한 제목, 즉 페이지의 주제를 나타내는 데 사용되며, 나머지 h2부터 h6까지의 태그는 부제목이나 하위 섹션의 제목을 나타내는 .. 2024. 2. 15.
[VSCode] Visual Studio Code 편집 중인 HTML 문서 Visual Studio Code 편집 중인 HTML 문서의 기본 골격 이 문서에는 간단한 HTML 마크업이 있으며, 기본적인 웹 페이지 구조를 가지고 있습니다. HTML 문서 구성 : 문서 유형 선언으로, 이 HTML 문서가 HTML5 버전임을 나타냅니다. : HTML 문서의 시작을 나타내며, lang 속성으로 페이지의 주 언어가 한국어임을 선언합니다. : 웹 페이지의 메타데이터를 포함하는 부분으로, 여기에는 문자 인코딩, 뷰포트 설정, 웹 페이지 제목 등이 포함됩니다. : 문자 인코딩을 UTF-8로 설정합니다. : 호환성을 위해 지정되며, IE 브라우저가 최신 모드로 문서를 렌더링 하도록 지시합니다. : 반응형 웹 디자인을 위한 뷰포트 설정입니다. My First Web Page!: 웹 페이지의 제목.. 2024. 2. 14.
[VSCode] Visual Studio Code Visual Studio Code Visual Studio Code(이하 VSCode)는 마이크로소프트에서 개발한 오픈 소스 코드 편집기입니다. 다양한 운영 체제에서 사용할 수 있으며, Windows, macOS, 그리고 Linux를 지원합니다. 개발자들 사이에서 매우 인기가 높으며, 주요 특징은 다음과 같습니다. VSCode 특징 다중 언어 지원: VSCode는 JavaScript, TypeScript, Python, PHP, C++, C#, Java 등 포함하여 다양한 프로그래밍 언어를 지원합니다. 이는 구문 강조, 코드 자동완성(인텔리센스), 코드 리팩토링 등의 기능을 포함합니다. 확장 프로그램: 사용자는 VSCode의 기능을 확장할 수 있는 수천 가지의 확장 프로그램을 설치할 수 있습니다. 이를 .. 2024. 2. 14.
[SVG] 원 그리기 SVG 원 그리기 SVG(Scalable Vector Graphics)에서 원을 그리기 위해서는 태그를 사용합니다. 태그는 SVG 이미지 내에서 원을 정의하고, 여러 속성을 통해 원의 크기와 위치, 스타일을 지정할 수 있습니다. 기본 구문 속성 설명 cx와 cy: 원의 중심점의 x좌표와 y좌표를 정의합니다. 이 값들은 SVG 캔버스 내에서의 위치를 결정합니다. r: 원의 반지름을 정의합니다. stroke: 원의 테두리 색상을 정의합니다. stroke-width: 원의 테두리 두께를 정의합니다. fill: 원의 내부 채우기 색상을 정의합니다. 예시 다음 예시는 반지름이 40, 중심점이 (50, 50)인 원을 그리고, 테두리는 검은색, 내부는 빨간색으로 채워진 원을 보여줍니다: SVG를 사용하여 원을 그릴 .. 2024. 1. 28.
[CSS] font-style 속성에서 italic과 oblique font-style 속성에서 italic과 oblique font-style 속성에서 italic과 oblique은 모두 글자를 기울게 하는 스타일을 지정하지만, 미묘하게 다른 의미를 가지고 있습니다. Italic (italic): 이탤릭체는 글자의 슬랜트(slant)가 기울어진 스타일을 의미합니다. italic을 사용할 때, 대부분의 경우 글꼴에 포함된 이탤릭 스타일의 글리프를 사용하게 됩니다. 이는 일반 글자와 다르게 디자인된 별도의 글리프로, 각 글자의 모양이 자연스럽게 기울어져 있습니다. 이탤릭체는 일반체와 구별되며, 보통 강조나 인용 구문에 사용됩니다. Oblique (oblique): 오블리크체는 글꼴이 이탤릭체를 별도로 제공하지 않을 때 사용되는 기울기 스타일입니다. 오블리크체는 일반 글자를.. 2024. 1. 20.

티스토리툴바