Introduction To HTML
🎯Introduction to HTML
HTML은 웹사이트에 보여지는 구성 요소 및 구조를 제공(이미지, 비디오 등).
웹사이트의 어느 곳에서 우클릭 후 inspect를 고르면, HTML 확인 가능
HTML은 HyperText Markup Language의 약자
- HyperText: 컴퓨터 또는 디바이스에 나타나는 텍스트, 링크를 통해 다른 텍스트로 접근 가능(하이퍼링크와 유사). 링크는 HTML에서 웹페이지에 스타일, 기능, 하이퍼링크, 경로 등의 구성 요소를 추가할 때 사용
- Markup: raw text의 구조와 표식을 정의하는 컴퓨터 언어
- HTML에서, 컴퓨터는 HTML 요소로 싸여진 raw text를 번역할 수 있음
HTML을 배우는 것은 웹사이트를 만드는 첫 번째 단계이지만, 약간의 지식만으로도 뉴스레터, 블로그 또는 웹사이트 템플릿에 코드를 삽입하는 데 도움이 될 수 있음
지금부터는 텍스트, 이미지, 비디오와 같이 페이지의 기본적인 요소를 어떻게 추가하고 수정하는지에 초점을 맞출 것
🔎raw text는 이미 문접적인 구조를 갖추고 있는데, 왜 구조를 정의해야 할까
▶️페이지의 요소들을 주의 깊에 표시함으로써, 다음과 같은 목적을 위해 개발자들은 정보의 계층을 만들 수 있음
- 사용자가 사이트를 스캔하여 가장 중요한 아이디어를 빠르게 선택 가능
- 시각 장애가 있는 사용자가 특별한 소프트웨어를 사용하여 페이지의 내용을 탐색할 수 있도록 도와줌
- 검색 엔진이 텍스트 바다에서 길을 잃지 않도록 중요한 키워드를 선택할 수 있도록 도와줌
🎯HTML Anatomy(HTML의 구조)
HTML은 element로 구성되어 있으며, 이러한 element는 웹페이지를 구성하고 내용을 정의함.
위 다이어그램은 HTML 문단의 element를 설명함
- 오프닝 태그 <p>
- 내용물 "Hello World!" 텍스트
- 클로징 태그 </p>
태그, 내용물 모두 HTML의 element이며, 태그를 이용하여 텍스트 뿐만이 아니라 이미지와 같은 다른 타입의 content들 또한 조직화하고 나타낼 수 있음
- HTML element: HTML 태그, 태그가 보유하는 텍스트, 미디어로 구성된 HTML 문서의 content 단위
- HTML 태그: element의 이름. 오프닝(<)과 클로징(>) 대괄호로 둘러싸여 있음(< > 형태)
- 오프닝 태그: HTML element의 시작 부분에 오는 첫 HTML 태그. 오프닝, 클로징 대괄호로 둘러싸여 있음(< > 형태)
- 내용물(content): HTML element의 오프닝과 클로징 태그로 둘러싸인 정보(텍스트 또는 다른 content들)
- 클로징 태그: HTML element의 끝 부분에 오는 두 번째 HTML 태그. 클로징 태그 안에서 클로징 대괄호(>)바로 앞에 슬래시(/)기호가 옴
🔎태그는 content가 될 수 없는가
▶️ content는 단지 태그로 둘러싸인 내용물일 뿐이며, 태그는 이 내용물이 브라우저가 알고 적절히 번역하여 구축할 수 있도록 표시하는 도구임. 단 모든 content가 반드시 오프닝, 클로징 태그로 둘러싸인 것은 아님(예를 들어 <p> 태그와 달리 <img> 태그는 자체 닫기(self-closing) 태그로 클로징 태그가 따로 필요하지 않으며 슬래시(/)를 이용하여 자체 닫기 해줘야 함)
🔎HTML element가 보유할 수 있는 content에는 무엇이 있는가
▶️ element에 따라 다름. <p>, <div>, <span>과 같은 element들은 텍스트를 보유할 수 있는 반면 <ul>, <ol>은 직속 자식으로 <li> element를 보유해야 함. <div>와 같은 블록 레벨 태그는 <body> 안에 존재할 수 있는 모든 태그들을 보유할 수 있는(즉, <div> 안에 다른 element를 포함시킬 수 있음) 반면, <img>와 같은 자체 닫기 태그는 어느 content도 보유할 수 없음
🔎문장이나 단어도 element가 될 수 있는가
▶️ 문장이나 단어 element는 따로 존재하지 않지만, 단어, 문장, 문자와 같은 문단의 일부에 대해 보다 세밀한 조절을 하고 싶은 개발자들은 태그의 content를 구체적으로 설정하기 위해 <span>, <em> 또는 <strong>과 같은 요소를 사용할 것. 지금 당장은 이 element들이 문단 안의 문장, 단어, 문자, 심지어 더욱 큰 아티클의 전체 문단을 타깃으로 설정하기 위해 존재하고 사용된다고만 알고 있어도 괜찮음. 다시 말하자면, 개발자들은 이 태그들을 사용하여 타깃 설정된 content의 세분화를 조절할 수 있음
🎯The Body
우리가 웹페이지를 구축할 때 가장 핵심적인 HTML element 중 하나는 body element임. 오프닝과 클로징 body 태그 사이에 있는 content만이 스크린에 나타날 수 있음
- 오프닝 body 태그: <body>
- 클로징 body 태그: </body>
파일에 body가 있는 한, 텍스트, 이미지, 버튼과 같은 다양한 종류의 content들이 body에 더해질 수 있음
<body>
<p>What's up, doc?</p>
</body><body>
<p>"Life is very short and what we have to do must be done in the now." - Audre Lorde</p>
</body>일부 브라우저는 HTML에서 가끔 발새하는 실수를 수용하기 위해 body 태그 바깥에 있는 content의 일부를 렌더링할 수 있으나 모든 브라우저가 이를 수행하는 것은 아님. 모든 브라우저에서 HTML이 동일한 방식으로 렌더링되도록 하는 가장 좋은 방법은 오프닝, 클로징 body 태그 안에 element가 유지되도록 하는 것.
🔎<p>Hello World</p>와 같이 body태그에 포함되어있지 않은데도 화면에 표시되는 이유는 무엇인가
▶️ 위에서 설명한 것과 같이, 일부 브라우저에서는 사용자가 실수를 할 수 있다고 가정하여 body 태그 외부에 다른 태그가 있다면 마치 body 태그 안에 넣었어야 한 것으로 판단하고 해당 작업을 실행함. 하지만 중요한 것은 모든 브라우저는 이 작업을 다른 방식으로 실행하기 때문에, 포맷이 올바르지 않다면 각각의 다른 브라우저들에서 화면이 다른 모양으로 나타날 수 있음. 모든 브라우저에서 HTML이 동일한 화면으로 보이기 위해서는 body 태그 안에 넣길 원하는 태그들을 body 태그 안에 넣어야 함.
🎯HTML Structure
HTML은 family tree relationship의 집단으로 구성되어 있음. <body> 태그 안에 <p> 태그를 넣으며, element가 다른 element 안에 포함되어 있다면 이는 자식 element로 봄. 자식 element는 부모 element에 끼워 넣어졌다고도 말함
<body>
<p>This paragraph is a child of the body</p>
</body>위 예시에서 <p> element는 <body> element 안에 속해있음. <p> element는 <body> element의 자식으로 간주, <body> element는 부모로 봄. 가독성을 좋게 하기 위해 두 칸 들여쓰기 해줌
여러 단계에 걸친 포함관계가 있을 수 있기 때문에, 이 비유는 손자, 증손자 그 이상으로 확장될 수 있음. element와 이의 조상, 후손과의 관계는 계층 구조로 이루어져 있음
<body>
<div>
<h1>Sibling to p, but also grandchild of body</h1>
<p>Sibling to h1, but also grandchild of body</p>
</div>
</body>- <body> element는 <div> element의 부모
- <h1>과 <p> element는 <div> element의 자식
- <h1>과 <p> element는 같은 계층이므로 형제로 간주하는 동시에 둘 다 <body>의 손자로 간주함
자식 element가 그들의 부모 element로부터 양식과 스타일을 상속받을 수 있기 때문에 HTML 계층 구조를 이해하는 것은 매우 중요함. CSS를 공부할 때 이러한 웹페이지 계층 구조에 대해 더 공부할 수 있음
🔎<body> element가 <html> element에 포함된 관계라고 봐도 되는가
▶️볼 수 있음. <html> 태그는 모든 페이지의 element의 근원이 되며 언제나 <head>와 <body>라는 자식 element를 지님. <head>와 <body> element는 서로 형제 관계이며, <html> element과는 부모 자식 관계임.
🔎<p> element가 <div> element 안에 포함되는 이유는 무엇인가
▶️이는 순전히 표현의 목적으로 시행됨. 추후에 <div> element가 주로 연관성 있는 content들을 그룹화하기 위해 사용된다는 부분을 배울텐데, 이는 페이지에 구조를 더해주고 규격화된 스타일링을 가능하도록 함.
🔎자식 element는 부모로부터 무엇을 상속받는가
▶️CSS를 공부할 때도 배우겠지만, 자식 element는 대부분 스타일 관련하여 부모 element로부터 상속받음. 즉 대부분의 스타일들은 부모에서부터 자식으로 폭포수처럼 내려옴.
🎯Headings
HTML의 Headings는 다른 종류의 미디어에 등장하는 headings와 유사함. 예를 들어 신문기사의 경우, 커다란 headings 즉 제목은 독자의 시선을 끌기 위해 사용함. 또 다른 경우로 headinigs는 content를 묘사할 때 사용하며, 그 예로 영화 제목이나 교육 목적의 기사의 제목이 있음.
다음은 HTML에서 사용가능한 heading elements를 나열한 것이며, 큰 것에서 작은 것 순으로 나열함.
- <h1>: main headings에 사용. 다른 작은 headings들은 부제로 사용
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
<h1>BREAKING NEWS</h1>위 코드에서는 독자의 주의를 끌기 위해 작성된 헤드라인을 사용함.
가능한 가장 큰 heading인 main heading element 사용
🔎어느 heading element를 사용할지 고르는 기준은 어떻게 되는가
▶️ 어떤 heading element를 선택할 것인지는 해당 페이지가 어떻게 구조화되어야 하는지에 따라 달라짐. 추후에 배울 div element는 이 페이지를 다양한 섹션으로 나누는 역할를 할 것. 각각의 섹션을은 <h2> 태그로 나타낸 제목을 보유하게 될 것이며, <h3>을 이용한 다양한 부제들도 추가할 수 있음.
🔎CSS가 페이지의 표시되는 요소를 다루는 것인데, 글자 크기는 구조적인 면(HTML)보다 표현적인 면(CSS)에 더 가까운 것이 아닌가
▶️ 글씨 크기는 웹페이지의 표현적인 부분이며, CSS가 웹페이지가 어떻게 보이는지를 다루는 것이 맞음. 하지만 heading element에 포함된 텍스트의 글씨 크기는 브라우저의 기본 스타일 시트에 의해 결정됨. 개발자들은 그들만의 커스텀 스타일 시트를 만들어서 이 기본 스타일 시트를 덮어쓸 수 있으며, 스타일 시트에 대한 자세한 내용은 CSS에서 다룸.
🎯Divs
HTML element 중에서 가장 유명한 것 중 하나가 <div> element. <div>는 division의 약자이며, 페이지를 섹션별로 나누는 역할을 함. 이 섹션들은 HTML에서 element들을 그룹화하는 데 굉장히 용이함.
<body>
<div>
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body><div>들은 시각적 표현이 내재되어있지는 않지만, HTML element에 커스텀 스타일을 적용하고 싶을 때 유용. <div>는 HTML element들을 그룹화하고 해당 그룹 안에 같은 스타일을 적용시키는 것을 가능하게 해줌. 우리는 <div> element 통째로 스타일을 적용할 수 있으며, CSS에서 해당 작업이 완성됨.
<div>는 텍스트나 링크, 이미지, 비디오와 같은 다른 HTML element들도 보유할 수 있음. 가독성을 위해 <div> 안쪽으로 element을 넣을 때 두 칸 들여쓰기 해주는 것이 좋음.
🔎<div>요소가 HTML 구조를 더 복잡하게 만드는 것이 아닌가
▶️ 더 복잡해지는 것은 사실임. 하지만 주의 깊은 HTML 구조를 짤 때 우리는 손쉽게 연관된 content를 설정하고 문법적 관계를 설명, 분석할 수 있음. 즉 '복잡성'과 '가독성', '목표성'을 교환한 것.
🔎<div>는 시각적으로 무언가를 변화시키지 않는데 왜 사용해야하나
▶️ 우리가 <div>없이 텍스트만 쓰게된다면 그저 처음과 끝만 존재할 뿐임. <div>를 이용하여 통으로 된 텍스트를 분할할 수 있음.
🎯Attributes
element 태그를 확장하고 싶다면 attribute(속성)을 이용해야 함. 속성은 element의 오프팅 태그에 더해지는 content로, 정보 제공이나 스타일 변경 등 다양한 방법으로 사용 가능함. 속성은 다음과 같은 두 부분으로 이루어짐
- 이름(The name of the attribute)
- 값(The value of the attribute)
<div id="introduction">- 여기서 이름은 id, 값(value)는 introduction임.
흔히 쓰이는 속성으로는 id가 있음. id 속성은 다른 content를 명시할 때 사용하며(<div>와 유사), element를 두 번 이상 사용할 때 유용함. id는 HTML에서 몇 가지 다른 용도들을 지니고 있지만, 지금 당장은 페이지에서 내용을 식별하는 데 어떻게 도움을 주는지에 초점을 맞출 것임
<div>에 id를 더해줄 때, 오프닝 태그에 이를 위치시킴
<div id="intro">
<h1>Introduction</h1>
</div>🔎속성은 <div> 태그에서만 사용 가능한가
▶️ 모든 오프닝 <html> 태그들은 id 속성을 지닐 수 있음. id 속성은 전체 코드에서 유일한 식별자여야 하지만, 몇 개의 다른 <html> 태그들이 유일한 id 속성을 가지는 것은 드문 일이 아님. 어떤 속성이 모든 태그에 사용 가능한지는 글로벌 속성 목록을 통해 알 수 있음
🔎속성은 어떤 종류의 정보를 제공하는가
▶️ 다른 방식으로 태그를 확장하는 여러 종류의 속성들이 존재. 주로 속성들은 element의 양식을 변화시키고, element에 대한 메타데이터를 제공하며, element에 대한 라벨링 정보를 줌. 예를 들어, id 속성은 element을 식별할 수 있도록 하는 반면 class 속성은 통으로 된 element 그룹을 식별함. 이 라벨링 정보는 또 다시 스타일링, 스크립팅, 또는 연결(linking)을 위해 content를 타겟으로 설정하는 데 사용됨.
🎯Displaying Text
HTML로 텍스트를 나타내고 싶을 때 paragraph 또는 span 사용
- paragraph(<p>): plain text 블록을 보유
- <span>: 다른 HTML 또는 텍스트의 작은 조각을 보유. 다른 content와 동일한 줄에 있는 작은 조각의 content를 구분하는 데 사용
<div>
<h1>Technology</h1>
</div>
<div>
<p><span>Self-driving cars</span> are
anticipated to replace up to 2 million jobs
over the next two decades.</p>
</div>- 서로 다른 두 개의 <div> 존재
- 두 번째 <div>는 <span>Self-driving cars</span>과 함께 <p> 보유
- <span> element는 단락에서 "Self-driving cars"를 나머지 텍스트로부터 분리하는 역할
<span> element는 일련의(inline), 혹은 다른 텍스트들과 같은 줄에 있는 특정 content 조각을 목표화하고자 할 때 사용
content를 블록 단위로 나누고자 하면 <div>를 쓰는 것이 더 좋음
🔎'span'의 용도는 정확히 무엇인가
▶️ <span>은 물리적으로 보여지는 것이 없음. 텍스트를 표시하기 위해 사용된다는 점은 <p>태그와 유사하지만, 줄을 새로 시작하지 않는다(=inline)는 점에서 <p>태그와 다름. <span>은 주로 CSS에서 한 단락을 다른 단락들과 다르게 스타일링하고 싶을 때 사용되며, content의 스타일을 지정할 수 있도록 하는 element이기도 함.
🔎content가 inline일 때랑 block일 때의 차이는 무엇인가
▶️ 블록 수준의 element(<div>, <p> 등)와 인라인 수준의 element(<span> 등)가 있는데, 이 두 유형의 element 사이의 큰 차이점 중 하나는 블록 element의 경우 포함하는 content을 자신의 폭 전부로 감싼다는 것임. 이는 기본적 <div>와 <p> element는 형제 관계의 element들을 새로운 줄이나 페이지의 새로운 섹션으로 넣는다는 의미. 반면에 인라인 element의 경우, 더 보수적으로 공간을 사용함. 사용해야 할 만큼의 공간만 사용하며, 주변 content들이 새로운 줄로 가도록 강제하지 않음.
🔎왜 우리는 작은 조각의 content를 분리시키고자 하는가
▶️ 우리는 타겟을 더욱 특정시키기 위해 표시하기를 원하는 것이지, 필수적으로 원해야 하는 것은 아님. 특정 조각의 content를 타겟팅하는 것에는 여러 이유가 존재. 예를 들어, 우리는 CSS를 사용하여 특정 <span> content를 페이지의 다른 content들과 다르게 스타일링하고자 하는데, 이것이 이유 중 하나가 될 수 있음.
🎯Styling Text
HTML 태그를 사용하여 텍스트를 스타일링 할 수도 있음. <em> 태그는 텍스트를 강조하며, <strong> 태그는 중요한 텍스트에 하이라이트를 칠해주기도 함.
나중에 웹사이트를 스타일링 할 때, <em>과 <strong> 태그를 사용하여 브라우저가 어떻게 content를 표시할지 정할 수 있음. 하지만 브라우저들은 일반적으로 다음과 같은 방식으로 이 태그 스타일을 지정하는 빌트인된 기본 스타일 시트가 내장되어있음.
- <em> 태그는 일반적으로 기울임으로써 강조를 함
- <strong> 태그는 일반적으로 굵기를 굵게함으로써 강조를 함
<p><strong>The Nile River</strong> is the <em>longest</em> river in the world,
measuring over 6,850 kilometers long (approximately 4,260 miles).</p>- <strong> 태그로 The Nile River 텍스트 굵게 함
- <em> 태그로 longest 텍스트 기울
- 실행 결과: The Nile River is the longest river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).
🔎웹페이지의 content는 왜 태그로 설명해야 하는가
▶️ 어떠한 content를 적절한 방법으로 보여주기 위해서, 브라우저는 content가 무슨 타입인지 알아야 함. 스크린리더, 검색 엔진 등 다른 소프트웨어 또한 페이지를 인덱싱하거나 탐색 기능을 제대로 수행하기 위해 해당 정보가 필요함.
🔎태그를 랜더링한다는 것이 무슨 의미인가
▶️ 웹 브라우저의 주요 컴포넌트는 렌더링 엔진임. 렌더링 엔진은 HTML 코드를 가져와 렌더링하거나 우리가 페이지에서 시각적으로 보이는 것으로 번역함. 브라우저의 기본 스타일 시트와 함께 <em>과 같은 태그는 이 태그의 content를 기울임체로 나타내기 위해 렌더링 엔진을 지시함.
🔎스타일 시트란 무엇인가
▶️ 웹개발의 맥락에서 스타일 시트란 연관된 HTML에 의해 묘사된 content의 표현을 지정하는 CSS 문서임. 다시 말하자면 스타일 시트는 웹페이지와도 같음
🎯Line Breaks
HTML 파일 안의 코드 사이 간격은 브라우저에서 element를 배치하는 데 영향을 주지 않음. 만약 브라우저에서 간격을 수정하고 싶다면, HTML의 줄 바꿈 element인 <br> 사용해야 함
줄 바꿈 element가 독특한 이유는 시작 태그로만 구성되어 있기 때문. HTML 코드 내 어디에서나 사용할 수 있으며 브라우저에 줄 바꿈이 표시됨.
<p>The Nile River is the longest river <br> in the world,
measuring over 6,850 <br> kilometers long (approximately
4,260 <br> miles).</p>- 실행 결과: The Nile River is the longest river
in the world, measuring over 6,850
kilometers long (approximately 4,260
miles).
줄 바꿈 element를 연속 2개 사용(<br><br>)하면 두 줄 간격이 생긴 후 다음 텍스트 등장
🔎HTML 코드의 간격이 페이지 내용 배치에 영향을 미치지 않는다면, 왜 두 칸씩 들여쓰기를 해야하는가
▶️ 숙련된 개발자는 코드를 깔끔하고 쉽게 읽을 수 있도록 들여쓰기와 수직 방향으로 띄어쓰기를 유지함. 가독성이 높은 코드는 유지보수성을 향상시키며 협력을 할 때 도움이 되고, 무엇보다도 더 나은 개발 경험을 제공함. HTML 안에서, 일관된 들여쓰기는 포함 관계 설명을 위해 사용되어야 함.
🔎<br>와 <br/> 모두 유효한 구문이라면, 어떤 것을 사용해야 하는가
▶️ 이에 대해 합의된 사하은 없으며, 두 구문 중 어느 하나를 사용해도 좋음. 어떤 구문을 선택하는지는 상관이 없지만, 구문을 항상 일관되게 해야 함.
🔎줄바꿈은 HTML element의 배치를 다루는 표준적인 방식인가
▶️ 이에 대한 해답은 배치하고자 하는 element에 달려있음. 지금 당장은, 웹개발에서 관심사의 분리라는 설계 원리가 있다는 것을 알아두면 됨. 이 원리는 HTML 구조를 그것의 표현과 구별되도록 해줌. 레이이아웃은 보여지는 것이기 때문에, 일반적으로 element를 배치할 때는 CSS를 사용하고자 함.
🎯Unordered Lists
문단 형식으로 텍스트를 구성하는 것에 더하여, content를 읽기 쉬운 목록으로 표시할 수도 있음.
HTML에서, <ul>라는 순서가 필요 없는 리스트의 태그를 사용하여 특정 순서가 주어지지 않은 항목들의 리스트를 만들 수 있음. 순서 없는 리스트는 글 머리 기호가 있는 개별 항목들의 윤곽을 잡아줌.
<ul> element는 raw text를 다루면 안 되며, 자동으로 raw text를 순서 없는 항목들의 리스트로 바꿔주지 않음. 각각의 리스트 항목들은 <li> 태그를 사용하여 순서 없는 리스트에 더해져야 함
<li> 태그 또는 리스트 항목(item) 태그는 리스트 안의 항목들을 묘사하기 위해 사용됨.
<ul>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li>
</ul>- <ul> 태그를 이용하여 리스트 생성
- 모든 리스트 개별 항목은 <li> 태그를 이용하여 더해줌
- 실행 결과:
- Limes
- Tortillas
- Chicken
🔎<ul> element 안에 raw text를 그대로 집어넣으면 어떻게 될까
▶️ 브라우저는 관대하게 작동하도록 디자인 되었으므로 이 경우 페이지에 텍스트가 표시될 것. 그러나 리스트로 보여지지는 않을 것이며, HTML5 사양을 무시하기 때문에 최선의 방법이 아님. HTML이 표준에 충하도록 하기 위해서는 검증인 12.0k를 실행해야 함.
🔎<li>태그는 항상 <ul>태그에 감싸져있어야 하는가
▶️ <li> element는 <ul> 또는 <ol>의 직속 자식이 될 수 있지만, 이러한 다른 부모 element 밖에 혼자 존재할 수는 없음.
🔎목록 항목을 나머지 텍스트들처럼 페이지에 딱 맞게 떨어지게 할 수는 없는가(들여쓰기 따로 X)
▶️ 사실 방법은 존재함.대부분의 브라우저들은 기본 스타일 시트를 사용하여 <ul>과 <ol> element의 왼쪽에 여백을 어느 정도 적용시킴. 개발자들은 이 기존 여백을 덮어써서 그들만의 새로운 CSS 스타일 시트를 만들어낼 수 있음.
🎯Ordered Lists
순서가 있는 리스트는 순서가 없는 리스트(unordered list)와 비슷하지만, 항목에 순서가 있다는 점에서 다름. 이는 과정에서 단계를 밟아야 하거나 항목에 순위를 매겨야 할 때 유용함.
<ol> 태그를 이용하여 순서가 있는 리스트를 만들 수 있으며, <li> 태그를 사용하여 개별 항목을 추가할 수 있음.
<ol>
<li>Preheat the oven to 350 degrees.</li>
<li>Mix whole wheat flour, baking soda, and salt.</li>
<li>Cream the butter, sugar in separate bowl.</li>
<li>Add eggs and vanilla extract to bowl.</li>
</ol>- 실행 결과:
-
- Preheat the oven to 350 degrees.
- Mix whole wheat flour, baking soda, and salt.
- Cream the butter, sugar in separate bowl.
- Add eggs and vanilla extract to bowl.
-
🔎<li> element는 텍스트 외 다른 content들도 포함할 수 있는가
▶️ 가능함. <li>element는 <body> 안에서 유효한 모든 종류의 element들을 포함할 수 있음. 이 말은 즉 비디오, 이미지, 노래, 하이퍼링크, 또는 이들의 조합으로 이루어진 리스트를 만들 수 있다는 것. 심지어 리스트의 리스트를 만들 수도 있음
🔎글 머리 기호나 숫자로 나열된 리스트만 표시할 수 있는가
▶️ CSS를 사용해서 더욱 다양한 리스트 스타일들을 만들 수 있음
🔎각각의 <li> 태그 사이 항목들에서 숫자와 항목 텍스트 사이 간격을 증가시킬 수 없는가
▶️ 가능함. CSS를 사용하여 <li> element를 타겟화하고 왼쪽 여백을 적용해주면 됨. 이 방법을 사용하면 텍스트는 숫자에서 오른쪽 방향으로 조금씩 이동하게 됨.
🎯Images
위에서 언급했던 모든 element들(제목, 단락, 리스트, span 등)의 공통점은 전부 텍스트 관련 element라는 것임. 이미지와 같이 텍스트로 구성되지 않은 element를 웹페이지에 추가하고 싶을 때 어떻게 해야 할까
<img> 태그는 웹페이지에 이미지를 추가할 수 있도록 해줌. 대부분의 element들은 오프닝과 클로징 태그를 둘 다 요구하지만, <img> 태그는 자체 닫힘(self-closing) 태그이며, <img> 태그의 끝에는 /을 써줌. 자체 닫힘 태그는 마지막 슬래시를 포함하거나 뺄 수 있는데 두 방법 모두 정상적으로 작동함.
<img src="image-location.jpg" /><img> 태그는 src라는 필수 속성을 지니는데, src 속성은 이미지의 원본 또는 소스코드로 지정되어야 함. 이 경우, src의 값(value)은 이미지의 URL(Uniform Resource Locator)이어야 함. URL은 파일이 저장된 웹 주소 또는 로컬 주소임.
🔎로컬 주소란 무엇이고, 로컬 주소와 웹 주소의 차이가 무엇인가
▶️ 로컬 주소는 자신의 컴퓨터에 존재하는 이미지, 파일 또는 리소스의 경로를 의미하는 반면, 웹 주소는 일반적으로 로컬 외부에 원격으로 존재하는 이미지, 파일 또는 리소스의 경로를 의미함.
🔎로컬 컴퓨터에 저장되어 있는 사진의 링크를 연결할 수 있는가
▶️ 가능함. 개발자들은 종종 코드를 생산물에 푸시하기 전에 자신의 로컬 컴퓨터에서 작업하곤 함. 이미지와 같은 에셋을 다룰 때, 우리는 HTML 문서 또한 포함하는 폴더 안에 이를 넣어서 보관함. 적절하게 배열된 디렉토리나 폴더 구조에서, 우리는 이미지를 가리키는 HTML 문서에 대한 상대 경로를 만들 수 있음. 여기서 상대 경로가 <img> src의 value가 되는 것.
🔎웹사이트에 이미지 url을 연결하기 위해 내 이미지를 온라인으로 업로드하는 방법에는 무엇이 있는가
▶️ 이미지를 웹에 업로드할 수 있는 사이트가 따로 존재. 이미지가 업로드되면 웹 주소를 <img> element의 속성 value로 사용할 수 있음. 더 일반적으로 이미지와 프로젝트 에셋은 HTML 문서를 포함하고 있는 폴더에 저장되며, 이는 개발자들이 src의 value값으로 사용될 수 있는, HTML 문서와 연관된 경로를 만들 수 있도록 해줌. 즉 이미지와 HTML 파일은 동일한 서버 또는 컴퓨터에 존재함.
🎯Image Alts
탁월한 웹개발자가 되기 위한 요건 중 하나는, 모든 사용자들이 환경 상관없이 접근할 수 있는 사이트를 만들어야 한다는 것임. 더욱 포용적인 웹사이트를 만들기 위해서, 우리는 스크린 리더와 같은 보조 기술이 이미지 태그와 마주칠 때 어떤 일이 일어나는지 고려해야 할 필요가 있음.
'대체 가능한 텍스트'를 의미하는 alt 속성은 우리가 제작한 사이트에 image의 의미를 가지고 옴. alt 속성은 src 속성과 마찬가지로 이미지 태그에 추가될 수 있으며, alt 속성의 값(value)는 이미지에 대한 묘사여야 함.
<img src="#" alt="A field of yellow sunflowers" />alt 속성은 다음과 같은 목적으로도 사용됨
- 웹페이지에서 이미지를 로드할 수 없는 경우, 사용자가 의도된 영역에 마우스를 올려 이미지에 대한 간단한 설명을 읽을 수 있음. 이는 alt 속성에서 제공하는 설명에 의해 가능함.
- 시각 장애인 사용자는 스크린 리더 소프트웨어의 도움으로 종종 웹을 탐색하는데, alt 속성을 포함한다면 스크린 리더 소프트웨어는 시각 장애인 사용자를 위해 설명을 큰 소리로 읽어줄 수 있음.
- alt 속성은 또한 검색 엔진 최적화(SEO)의 역할을 수행함. 검색 엔진은 인터넷에서 크롤링을 할 때 웹사이트의 이미지를 "볼 수" 없기 때문인데, 서술하는 alt 속성을 지니는 것은 사이트 랭킹을 향상시킬 수 있음.
만약 웹페이지의 이미지가 사용자에게 의미 있는 정보를 전달하는 이미지가 아닌 경우(시각적으로 손상되었든지 등), alt 속성은 비워 두어야 함.
🔎좋은 alt 문구는 무엇인가
▶️ 일반적으로 "photo of...", "image of...", "graphic of..."와 같은 문구는 잘 쓰지 않으며, 간결하면서도 충분히 설명력 있어야 함.
🔎alt 문구는 얼마나 길고 세부적이어야 하는가
▶️ 가능한 한 정확하고 충분해야 하며, 보통 몇 단어로 충분히 설명 가능하나 간혹 한 두 문장이 더 적절할 때도 있음.
🔎이미지 위에 마우스를 올려두면 alt 텍스트가 보여야 하는가
▶️ 이미지를 로드하는 데 문제가 없다면 alt 텍스트는 보이지 않음
🎯Videos
이미지와 마찬가지로, HTML은 또한 웹페이지에서 동영상이 보이도록 도와주기도 함. <img> element와 마찬가지로, <video> element는 src 속성으로 링크를 넣어줘야 하는 한편 <img>와 달리 <video> element는 오프닝과 클로징 태그를 필요로 함.
<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>- 위 예시에서 비디오 소스(src)는 "myVideo.mp4"
- 해당 소스는 웹페이지와 함께 호스팅되는 비디오 파일이거나 다른 웹 페이지에서 호스팅되는 비디오 파일을 가리키는 URL일 수 있음.
- src 속성 다음으로 오는 width와 height 속성은 브라우저에서 보여지는 비디오의 크기를 정하는 역할 수행함.
- controls 속성은 브라우저가 일시정지, 재생과 같은 비디오의 기본적인 조작을 포함하도록 함.
- 오프닝, 클로징 태그 사이의 "Video not supported" 텍스트는 브라우저에서 비디오를 로드할 수 없는 상황일 때만 보여짐.
🔎비디오에서도 alt 문구가 사용가능한가
▶️ 비디오 태그에서는 alt 속성을 사용할 수 없음. 일관성이 없어 보일 수 있지만, 실제로는 비디오 요소에 대체 시스템 옵션이 포함되기를 원할 수 있기 때문에 설계상 그렇게 된 것임. 예를 들어 비디오가 로드되지 않으면 로드가 가능한 다른 비디오에 대한 링크를 표시할 수 있음. 속성이 markup을 포함할 수 없기 때문에, 이 시나리오는 alt 속성만으로 수행할 수 없음. 이 대체 시스템 처리가 개발자에게 더 제어할 수 있도록 해준다면, img 태그는 왜 이를 따르지 않는지 궁금할 수 있음. 이에 대한 답은 역호환성 문제를 포함함.
🔎어떤 태그는 자기 닫힘이고 어떤 태그는 그렇지 않은데, 그 이유가 무엇인가
▶️ 자기 닫힘 태그와 다른 모든 태그의 중요한 차이점은, 자기 닫힘 태그는 공허한 element를 나타낼 수 있다는 점임. img나 br 등은 아무 content를 포함할 수 없는 공허한 element임. 다른 모든 태그들은 (필수는 아니지만) content를 포함할 수 있음.
🔎"Video Not Supported"의 용도는 무엇인가
▶️ 텍스트 "Video Not Supported"는 브라우저에서 영상을 재생할 수 없는 경우(혹은 구식 브라우저의 경우), 또는 네트워크가 좋지 않을 경우를 대비한 대체 시스템 역할을 수행함.
🎯Review
🌐HTML: Hyper Text Markup Language의 약자로, 웹페이지의 구조와 구성요소를 만들기 위해 사용됨
- 대부분의 HTML 요소들은 raw text 또는 다른 HTML 태그를 사이로 넣은 오프닝과 클로징 태그를 지님.
- HTML 요소들은 다른 요소 안에 포함될 수 있음. 안에 포함된 요소는 자식 요소이며, 포함시키는 요소는 부모 요소임.
🌐<body>: 모든 보여지는 내용물들은 오프닝과 클로징 <body> 태그 안에 포함되어야 함.
🌐heading & sub-heading: <h1>부터 <h6> 태그까지 해서 다양한 크기로 나타냄, 내용물의 영역에 제목을 부여하기 위해 사용됨
🌐<p>, <span>, <div> 태그들은 텍스트나 블록을 명시함.
🌐<em>, <strong> 태그는 텍스트를 강조하기 위해 사용됨.
🌐<br> 태그를 이용하여 줄바꿈해주기
🌐순서가 있는 리스트는 <ol> 태그를, 순서가 없는 리스트는 <ul> 태그를 이용
🌐이미지(<img> 태그 이용)와 비디오(<video> 태그 이용)는 존재하는 소스를 연결(linking)하여 웹페이지에 추가
🔎<div> 태그와 <p> 태그 요소는 같은 역할을 하는 것처럼 보이는데, 둘 사이의 차이점은 무엇인가
▶️ 두 요소 모두 블록 수준의 요소라는 점에서 공통점이 있으며, 브라우저는 이 두 요소를 같은 방식으로 렌더링함. 두 태그 중 무엇을 선택하냐는 개발자의 몫이며, 포함된 내용물을 가장 잘 설명하는 태그로 고르면 됨. 단락을 다룰 때는 의미론적으로 올바른 태그는 <p> 태그라고 할 수 있음.
🔎<p> 태그에서 raw text를 로드하기 위해 src 속성을 사용할 수 있는
▶️ 결론은 불가능함. 포괄적인 id 속성과는 달리, src 속성은 특정 태그에만 적용 가능함. 즉 모든 태그에서 모든 속성을 사용할 수 있는 것은 아님.
'Project > Backend 프로젝트' 카테고리의 다른 글
| 백엔드 프로젝트 3주차 (SQL 첫걸음) - 2장 (1) | 2023.09.23 |
|---|---|
| 백엔드 프로젝트 3주차 (SQL 첫걸음) - 1장 (0) | 2023.09.17 |
| 백엔드 프로젝트 1주차 (Learn HTML) - 4 (1) | 2023.09.11 |
| 백엔드 프로젝트 1주차 (Learn HTML) - 3 (0) | 2023.09.09 |
| 백엔드 프로젝트 1주차 (Learn HTML) - 2 (1) | 2023.09.07 |
