본문 바로가기

생활코딩 HTML + CSS + 자바스크립트/HTML 이론10

14 HTML 태그의 제왕 1. 1) 태그가 웹의 왕국이라면, 이 태그는 웹 왕국의 제왕 이다. 현대의 HTML은 150 가지의 태그로 구성되어 있지만, 이 모든 태그들이 이 태그 아래에 있다. 2) 검색 엔진들은 이 태그 덕분에 전 세계의 웹을 항해 했다. 수많은 웹 페이지들을 발견할 수 있었고, 이 태그 덕분에 최고의 검색 결과를 만들 수 있었다. 이 태그 가 없다면 검색 엔진은 존재 하지 않는다. 3) 이 태그 는 도시로 따지면, 도시의 길이며, 인체로 따지면, 인체의 혈관 이다. 이 태그 가 없다면, 전 세계의 모든 웹 페이지는 고립된다. 4) 이 태그 는 우리가 매일 백 번도 넘게 사용 하고 있었던 태그 이다. 5) HTML의 약자인, HyperText Markup Language의 첫 단어인 HyperText가 바로 이.. 2023. 7. 1.
13 문서의 구조와 슈퍼스타들 1. 정보가 많아지면, 정보를 잘 정리 정돈하기 위해서 무엇이 필요할까 ? >> 체계와 구조가 필요 하다. 2. 태그를 이용한 제목 설정 하기. 태그를 사용 하지 않으면, 위와 같이, 웹 페이지의 제목이 파일 이름으로 나오게 된다. 원하는 제목으로 변경 하고 싶으면, 태그를 사용 하자. 제목이 잘 변경된 것을 확인 할 수 있다. 3. 태그의 특징은 다음과 같다. 1) 사용자에게 웹 페이지의 제목을 명시적으로 알려줄 수 있다. 2) 검색 엔진과 같은 기계들이 바로 태그 이다. 책으로 치면, 책 표지의 제목과 같은 정보 로서 사용 된다. 3) 따라서, 웹 페이지를 만들 때, 태그를 사용 하지 않는것은 손해를 보는 것이다. 4. UTF-8 이란 ? 컴퓨터는 모든 정보를 0 아니면 1로 저장 한다. 0과 1을 .. 2023. 7. 1.
12 부모 자식과 목록 1. 다음과 같이 와 라는 두개의 태그가 있다고 가정 위 와 같이, 태그가 서로 포함 관계에 있을 때, 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라고 한다. HTML에 있는 여러 태그는 부모 자식 관계가 유동적으로 변동 된다. 그런데, 자식이 있는 곳에 항상 부모가 있고, 부모가 있는 곳에 항상 어떤 특정한 자식 태그가 있는 사이 좋은 태그가 몇가지 있다. 2. 앞에서 배웠듯이, 코드상에는 줄바꿈이 되어있지만, 실제 웹 페이지 에서는 1번라인 2번라인 3번라인은 줄바꿈이 되어 있지 않는 모습을 확인할 수 있다. 목차답게 줄바꿈이 되면 좋으니, 앞에서 배운 태그를 사용해보자. 그럴듯 하게 변경된 모습이다. 그런데, HTML을 만든 사람들이 목차를 표현하고 싶을 때, 사용하려고 만든 태그가 .. 2023. 6. 26.
11 최후의 문법 속성과 <img> 태그 1. HTML 에서 가장 중요한 문법은 태그 이다. 그 다음으로 중요한 문법인 속성 이라는 문법이 있다. 2. 이미지를 웹 페이지에 포함 시키고 싶다 ? 태그를 사용 하면 된다. 3. 이미지를 사용할 때는, 어떤 이미지를 사용할것인지를 문법에 적어 줘야 한다. 어떤 이미지인지를 알려주도록 약속된 속성이 source 이다. 줄여서 src 라고 한다. 가 문법이다. 저 큰따옴표 내부에 사용할 이미지의 소스를 넣으면 된다. 이미지가 있는 링크 자체를 넣어도 되고, 이미지가 저장되어있는 경로를 넣어도 된다. 4. 이미지의 크기도 조절할 수 있다. .. 5. 속성은 attribute 라고 한다. 속성은 어디에 놓고 사용하던 상관이 없다. 아무 위치에나 사용하면 되고, 태그가 태그의 이름만으로는 정보가 부족할 때도.. 2023. 6. 26.
10 HTML이 중요한 이유 1. coding 이라는 단어가 2개 있다. 위의 coding은 글씨 크기를 직접 선택해서 키우고, B 버튼을 눌러서 BOLD 처리를 한다. 아래의 coding은 본문 이라고 적혀있는 메뉴를 클릭해서, 크기와 글씨 굵기를 키우는 처리를 한다. 보면 보기에는 크기도 비슷하고, 겉보기에는 큰 차이가 없어서, 아무렇게나 해서 사용해도 괜찮은 느낌이 든다. 하지만 소스 버튼을 클릭해서 내부적으로 어떤 차이가 있는지를 확인해 보자. 예전에는 저게 무엇인지 잘 몰랐고, 소스코드가 있는지 개념 조차도 몰랐겠지만, 이제는 알고 있다. 편집기를 이용해서 글을 쓴다는 것 자체가 내부적으로 HTML 코드를 생산하는 행위 라는 것을. 그동안 HTML이 뭔지는 몰라도 우리는 편집기를 통해 HTML을 만들어 내고 있었다. 위의 .. 2023. 6. 25.
09 줄바꿈 : <br> vs. <p> 자주 사용하는 인기 태그 두가지가 있다. 이 두 태그는 서로 경쟁관계에 있다. 1. 위와 같이 단락을 구분하면서 문장을 구성했는데, 웹 페이지에서 본다면 ? 단락 구분이 되어 있지 않은 모습을 확인할 수 있다. 엥 그러면 어떻게 하지 ? 줄 바꿈을 하는 태그를 사용 해야 한다. 추천 검색어 >> html new line tag 검색을 통해, 줄바꿈은 HTML 에서 이라는 태그를 사용한다는 것을 알 수 있게 됬다. 을 한번만 사용하면, 한줄이 떨어지는 것이고, 단락 구분을 하기 위해서는 을 두번 사용하면 된다. 입맛에 맞게 태그를 1번 ~ 2번 ~ 3번 등 본인이 선택해서 사용하면 된다. 2. 태그는 닫는 태그가 존재하지 않는다. 단순 줄바꿈이라는 시각적인 의미만 갖는 태그이기 때문에 감쌀 필요가 없어서 .. 2023. 6. 25.
08 통계에 기반한 학습 1. 최신 버전의 HTML에는 150개 이상의 태그가 있다. 150개 이상의 태그를 다 외워야 할까 ? >> XXX 어느상황에 무엇을 쓰고 싶다라는 생각만 있으면, 검색을 통해 원하는 태그 언어를 찾아서, 사용하면 그만이다. 2. 자주 사용되는 태그언어 25가지. : HTML 문서의 제목을 정의하는 데 사용 된다. : HTML 문서에 대한 메타데이터를 제공 한다. : 다른 HTML 요소를 함께 그룹화 하는데 사용되는 컨테이너 요소이다. : HTML에서 하이퍼링크를 담당. 특정 위치로 이동하기 위해 클릭할 수 있는 앵커(링크)를 정의. : HTML 문서 내에 JavaScript 코드를 포함 또는 참조하는데 사용. : 현재 HTML 문서와 스타일시트 또는 아이콘과 같은 외부 리소스 간의 관계를 정의. : H.. 2023. 6. 20.
07 혁명적인 변화 1. 태그가 무엇일까 ? h 뒤에는 숫자가 붙고, 숫자가 올라갈수록 글씨가 작아진다. h와 숫자가 나오는 태그를 쓰면 일반적인 텍스트보다는 글씨가 더 두껍다. heading은 제목이라는 뜻이다. 부터 은 제목을 나타내는 태그 이다. 부터 까지 존재하고, 부터는 없다. 2. 태그를 이용해 제목 만들기. 2023. 6. 20.
06 기본 문법과 태그 1. html 파일 생성 후 텍스트를 입력. 에디터에 작성한 내용이 원인으로 작용해서, 브라우저의 웹 페이지가 만들어진다. 에디터에 작성된 내용은 코드나 소스, 좀 더 구체적으로 설명하면 HTML이라는 프로그래밍 언어의 문법에 맞게 작성된 코드나 소스 이다. 그 결과인 웹 페이지가 브라우저에 표시 되는 개념 이다. 2. 에디터에 위와 같이 작성. 브라우저를 새로고침하면 에디터에 작성한 내용이 원인으로 작용해서, 브라우저의 웹 페이지가 만들어진다. 3. creating web pages 문자를 진하게 표시하고 싶다면 ? 웹을 지배하는 가장 중요한 문법을 사용 해야 한다. >> 태그(tag) 언어 태그로 굵게 강조. 4. web이라는 텍스트 밑에다가 밑줄을 치고 싶다면 ? 밑줄은 영어로 underline 이.. 2023. 6. 20.

티스토리툴바