1. 오늘 배운 html 코드 단순 정리
<!DOCTYPE html> → 이 문서는 html로 작성되었습니다. 라는 뜻
<head> 문서의 정보가 들어가는 부분 / title, meta 태그나 script 태그 등이 들어간다 </head>
<body> 화면에 보이는 콘텐츠의 내용이 들어간다 </body>
<!-- 화면에는 노출되지 않으며 개발자들끼리 볼 수 있는 주석의 부분이다 -->
<title> 웹사이트를 띄웠을 때 탭 부분에 노출되는 내용이다 </title>
<h1> h1~h6 까지 있다. 본문이 아닌 제목을 쓸 때 쓰는 태그이다 </h1>
<p> 텍스트를 쓸 때 사용하는 태그이다. / display:block; </p>
<hr> 단일 태그이다. 수평선을 만들어주는 태그로 단락 구별할 때 쓰인다 / display:block;
<strong> 글씨를 굵게 표시할 때 쓰는 태그 / display:inline; </strong>
<em> 기울어진 텍스트 효과 / display:inline; </em>
<q> "인용구를 사용할 때 쓰는 태그" 이다 / display:inline; </q>
<ins> 밑줄을 표시해주는 태그이다 / display:inline; </ins>
<del> 취소선을 표시해주는 태그이다. / display:inline; </del>
<mark> 형광펜 효과를 줄 수 있는 태그이다. / display:inline; </mark>
<span> 텍스트를 쓸 때 사용하는 태그이다. / display:inline; </span>
** 블럭 태그 안에 블럭을 쓸 수는 있으나 이상하게 나온다 / 블럭 태그 안에 인라인 태그를 써서 강조 효과를 주기도 한다 **
2. 컨테이너와 전역속성
<div> </div>
위의 태그로 같은 내용으로 쓰여진 태그를 한 단락으로 묶어준다.
특별한 의미가 있는 것은 아니고 영역을 따로 지정해주는 역할을 한다.
아래 이미지를 참고 하면 된다.
단순 컨테이너로 나눠주고 여기서 더 분류를 해주기 위해 전역 속성이라는 것을 사용한다.
위의 이미지를 보면 div 태그와 p 태그에 속성이 추가된 것을 볼 수 있다.
다양한 전역 속성이 있지만 자주 다루는 전역 속성만 설명하겠다.
| 전역 속성 | 설명 |
| id | 요소에 이름을 부여하는 식별자 역할 / 1개의 요소당 1개의 id만을 가질 수 있으며 중복될 수 없다. |
| class | 요소를 그룹별로 묶을 수 있는 식별자 역할 / 1개의 요소에 여러 class를 가질 수 있으며 중복될 수 있다. |
| style | 요소에 적용할 css 스타일을 선언해주는 속성 |
| title | 요소의 추가 정보를 제공하는 텍스트 |
3. img 태그
img 는 말 그대로 이미지를 보여주는 태그이다
img에는 여러 속성이 있는데, 오늘 배운 내용을 정리해두겠다.
| 속성 | 설명 |
| src | 이미지 파일의 URL을 나타내는 속성이다. ( src="이 안에 이미지 url을 넣으면 된다" ) |
| alt | 이미지를 볼 수 없는 상황에 놓여있는 사람들을 위해 이미지 설명을 넣어놓는 속성이다 |
| width | 이미지의 가로 사이즈를 설정해주는 속성이다 / 보통 width 또는 hegith만 설정해도 알아서 비율을 맞춰서 줄여준다. |
| hegith | 이미지의 세로 사이즈를 설정해주는 속성이다 |
'코딩이론 > html&css' 카테고리의 다른 글
| chapter.04-1 (0) | 2024.11.19 |
|---|---|
| chapter.03 - flex (0) | 2024.11.18 |
| chapter.02-3 (0) | 2024.11.15 |
| chapter.02-2 (1) | 2024.11.15 |
| chapter.02-1 (0) | 2024.11.15 |