DAY48 - 디자이너를 위한 개발지식3

HTML 텍스트 태그 복습

1. <h> 제목태그 Heading : 제목 h1~h6 h1 제목 / h4 소제목 / p 본문
2. <a> 하이퍼링크 태그 href 속성을 통해 url 연결함
3. <p> paragraph 하나의 문단을 나타냄 문단을 구분하기 위해 하단에 여백이 생김
4. <br> 태그 line break 약어로 줄을 나눈다는 뜻 html은 엔터 값을 인식하지 않기 때문에 br 태그로 줄 바꿈 해줌
5. <strong> 중대한 내용
6. Entity code 특수 문자(공백, <, > 등)

▶ 대표적인 Entity 코드 예시

문자 Entity Code 설명

<	&lt;	less than (작다) 기호
>	&gt;	greater than (크다) 기호
&	&amp;	ampersand (앤드 기호)
"	&quot;	큰따옴표 (double quote)
'	&apos;	작은따옴표 (single quote)
©	&copy;	copyright 기호
→	&rarr;	오른쪽 화살표

---

리스트 태그

1. <ol> 순서가 있는 목록
2. <ul> 순서가 없는 목록

블록 레벨 요소 vs 인라인 레벨 요소

✅ 블록 레벨

• 줄 바꿈이 자동으로 생김
• 화면에 한 줄 전체를 차지함
• 안에 블록 , 인라인 요소를 포함 할 수 있음

대표적인 예) div, p, h, ul, ol, li, section, article , header, footer

<div> 태그

- division의 약자로, 나눈다라는 의미
- 웹페이지의 레이아웃을 만들기 위해 콘텐츠를 분할하는 블록 레벨 컨테이너를 나타냄
- 영역을 구분하는 태그

✅ 인라인 레벨

• 줄 바꿈 없이, 이어져 배치, 사이즈에 맞게 배치
• 글자처럼 흐름 속에서 사용함
• 블록 요소는 포함 할 수 없고, 인라인 요소만 포함 가능함

<span> 태그

- span 태그는 인라인 컨테이너로, 스타일을 적용하거나 인라인 요소를 묶는 데 사용함
-특정 텍스트나 인라인 요소에 css 스타일을 적용할 수있음

---

<img> 이미지 태그

src : source 이미지 경로
alt : 대체 텍스트 (이미기 경로 찾을 수 없을 경우)

예시)

<img src ="이미지주소" alt="이미지 섦명">

---

[과제] 나의 프로필 웹으로 만들어보기