본문 바로가기

Frontend Developer/HTML9

[HTML] 강조, 인용, 출처 태그 ( <em>, <strong>, <blockquote>, <q>, <cite> ) 강조 태그 : , 제목 혹은 문단 내에 특별히 강조하고 싶은 내용을 표시할 때 강조(Emphasis) 태그를 사용한다. 강조 태그는 과 두 가지 태그가 있다. 두 태그 모두 브라우저에 강조하고자 하는 내용을 알려주기 위해 사용하는 것으로 둘 중 끌리는 태그를 사용하면 된다. 두 태그를 사용했을 때 브라우저 자체에서 강조를 표시하는 방법에 차이가 있긴 하지만, 이는 CSS 처리가 가능하기 때문에 상관없다. 책상을 가을 동경과 이름자를 쉬이 별 많은 이네들은 듯합니다. 지나고 벌써 위에 불러 하나에 마리아 불러 이름과 때 버리었습니다. 아직 나는 어머니, 무덤 있습니다. 다 멀듯이, 하늘에는 이네들은 버리었습니다. 헤는 둘 하나에 멀리 별빛이 불러 가을 나의 봅니다. 별에도 다 토끼, 다하지 밤을 하나에 별.. 2021. 2. 6.
[HTML] 제목, 문단, 컨테이너 태그 ( <h1>, <p>, <div>, <span> ) 제목 태그 : - h 태그라고도 하고 헤딩(heading) 태그라고도 하는, HTML의 제목 요소이다. '구획 제목 요소'라고도 하는 데, 단계별로 구획을 나눌 수 있기 때문이다. 구획 단계는 이 가장 높고 로 숫자가 올라갈 수록 단계는 낮아진다. Level 1 Level 2 Level 3 Level 4 Level 5 Level 6 이렇게 단계 별로 글씨 크기와 굵기에 차이가 생긴다. 그러나 글씨 크기를 위해 제목 태그를 사용하면 안된다. 글씨 크기라던가 굵기는 모두 CSS의 스타일적 요소이다. HTML은 전달하고자 하는 정보 콘텐츠를 위한 마크업일 뿐, 스타일링은 CSS로 처리할 수 있고 그렇게 해야한다! 따라서 논리적으로 생각해 이 제목이 어떤 레벨인지를 결정하고 그에 맞는 제목 태그를 사용하면 된다.. 2021. 2. 5.
[HTML] <head> 태그와 <body> 태그 채우기 ( <title>, <link>, <style>, <meta>, <script> ) 지난 포스팅에서 요소는 자식 요소로 요소는 텍스트만 포함할 수 있으며, 닫는 태그 작성은 필수이다. 닫는 태그가 없으면 브라우저가 페이지의 나머지 내용을 무시한다. 태그 HTML 요소는 현재 문서와 외부 리소스(resource)와의 관계를 명시하고 연결한다. 보통 CSS style sheets를 첨부하는 데 사용하지만, 웹 폰트를 임베드하거나 사이트 아이콘 연결 등 여러가지로 쓰일 수 있다. 요소는 대표적인 빈 요소로 닫는 태그를 작성하지 않는다. 태그를 사용하기 위해 꼭 알아야 하는 attribute(속성)은 위 코드에서 처럼, 'rel' 과 'href'이다. rel : 연결된 문서와의 관계(relationship)를 나타낸다. href : 연결하려는 리소스의 URL을 지정한다. URL은 절대 경로와 .. 2021. 2. 4.
[HTML] <!DOCTYPE html> 선언과 문서 구조, 부모・자식・형제 요소 DTD (Document Type Declaration) DTD, Document Type Declaration은 문서 형식에 관한 선언이다. 모든 HTML 문서는 이 선언으로 시작한다. 이 선언은 '태그 tag'라기 보다는, 브라우저에게 예상되는 문서 유형에 대한 정보를 주는 것이다. 즉, 브라우저가 HTML5 (최신 웹 표준) 버전에 맞게 렌더링하도록 선언하는 것이다. 그럼, DOCTYPE이 무엇이냐?! Document Type 의 줄임말(?) 즉, 문서 형식을 나타낸다. 을 선언하면 브라우저에게 '이 문서는 html 형식이니까, HTML5 버전으로 렌더링해줘~'하고 알려주는 것이다. Document Structure 문서 구조 HTML 문서의 기본 구조는 다음과 같다. 위 코드의 태그를 하나씩 살펴.. 2021. 2. 3.