워드프레스를 위한 html 연습
워드프레스를 위한 html 연습, 태그를 하나씩 확인해 보면서 어떤 곳에 적절하게 사용할 수 있는지,
확인해 봅시다. 디자인을 전문으로 하는 아주 상세히 잘 가르쳐 주는 유튜브를 찾았습니다. ^^;
html 에서 css까지 하나씩 배워 보도록 합시다.
이미니강사 – YouTube
- 제목단락태그
- div, span, em, strong
- img / src, alt, width, height
- 목록태그 / ol, ul, li, dt, dd
- table태그 / table, tr, td, th, colspan, rowspan
01. 제목단락태그
제목과 단락은 HTML에서 가장 기본적인 구조를 형성합니다.
제목을 정의하기 위해서 <h1>부터 <h6>까지의 태그를 사용하고,
단락을 정의하기 위해 <p>태그를 사용합니다.
제목태그와 단락태그를 사용하여 HTML 문서를 구성할 수 있습니다.
그리고 이러한 태그를 이용해서, 페이지의 구조를 정의하고, 이 구조에 CSS를 적용하여,
디자인을 꾸밀 수 있습니다.
02. div, span, strong, em
🖥️ <div>`** 태그: `div`는 Division(분할)을 나타내며, 웹 페이지에서 구획을 나눌 때 사용합니다. 주로 CSS와 함께 사용되어 스타일을 적용하거나 레이아웃을 조정하는 데 유용합니다. `div` 태그는 블록 수준 요소로, 항상 새 줄에서 시작하고 전체 너비를 차지합니다. 예를 들어, 여러 개의 요소를 그룹화하거나 특정 스타일을 적용하기 위해 `div` 태그를 사용할 수 있습니다.
<div>
<p>This is a paragraph inside a div.</p>
</div>
🖥️ span 태그: span은 Inline(인라인) 요소로, 텍스트나 문장의 일부를 그룹화할 때 사용됩니다. span 태그는 주로 특정 부분에 스타일을 적용하거나 스크립트에서 특정 부분을 식별할 때 사용됩니다. span 태그는 div와 달리 새 줄에서 시작하지 않고 해당 요소의 너비만 차지합니다.
<p>This is a <span style=”color: red;”>highlighted</span> text.</p>
🖥️ strong 태그: strong은 중요한 텍스트의 강조를 나타내는 데 사용됩니다. 브라우저는 기본적으로 strong 태그 안의 텍스트를 굵게 표시합니다. 시각적으로 강조하는 것 외에도, 검색 엔진은 strong 태그를 사용하여 텍스트의 중요성을 이해하고 페이지의 검색 엔진 최적화를 결정합니다.
<p>This is a <strong>important</strong> message.</p>
🖥️ em 태그: em은 텍스트의 강조를 나타내는 데 사용됩니다. 브라우저는 기본적으로 em 태그 안의 텍스트를 이탤릭체로 표시합니다. strong과 유사하지만, em은 강조된 텍스트의 의미론적 중요성을 나타내는 데 사용됩니다.
<p>This is an <em>emphasized</em> text.</p>
03. img / src, alt, width, height
🖥️ img** 태그: img태그는 이미지를 웹 페이지에 삽입합니다. 이 태그는 종료 태그가 없으며, 이미지의 위치를 지정하는src속성이 필수적으로 포함되어야 합니다. 아래는img` 태그의 주요 속성에 대한 설명입니다.
- src: 이미지 파일의 경로를 지정합니다. 이 속성은 필수적으로 지정되어야 합니다. 파일의 경로는 로컬 파일 경로일 수도 있고, 웹 상의 URL일 수도 있습니다.
- alt: 이미지에 대한 대체 텍스트를 지정합니다. 이 속성은 이미지가 로드되지 못했을 때 텍스트로 대체되거나, 스크린 리더 등의 보조 기술에서 이미지를 설명하는 데 사용됩니다. 이는 웹 접근성을 향상시키는 데 중요합니다.
- width: 이미지의 너비를 지정합니다. 픽셀 단위로 값을 지정하거나, 상대적인 값인 ‘%’를 사용할 수 있습니다.
- height: 이미지의 높이를 지정합니다. width와 마찬가지로 픽셀 단위나 ‘%’를 사용하여 값을 지정할 수 있습니다.
04. 목록tag, 테이블tag
태그를 일일이 다 외울 수는 없지만, 하나씩 필요한 부분에 적용을 해서 사용을 하면,
보다 멋진 블로그를 꾸밀 수 있지 않을까 생각해 봅니다.
더 필요로 한 것?!
CSS로 적용을 하는 부분인데, 워드프레스 사이트 내에서 어떻게 조정을 해야 하는지에 대해서도
차근차근 하나씩 공부해 봅시다.