The first step in entering data into the table is to add rows using thetable rowelement:<tr>.
Table Data
you can add data using thetable dataelement:<td>.
In the example above, two data points (73and81) were entered in the one row that exists. By adding two data points, we created two cells of data. If the table were displayed in the browser, it would show a table with one row and two columns.
Table Headings
Table data doesn’t make much sense without titles to describe what the data represents.
To add titles to rows and columns, you can use thetable headingelement:<th>.
Just like table data, a table heading must be placed within a table row.
the use of thescope attribute, which can take one of two values:
row- this value makes it clear that the heading is for a row.
col- this value makes it clear that the heading is for a column.
Table Borders
So far, the tables you’ve created have been a little difficult to read because they have no borders.
The code in the example above is following is deprecated , so please don’t use it.
CSS에서 해주는게 좋다~~
Spanning Columns
What if the table contains data that spans multiple columns?
For example, a personal calendar could have events that span across multiple hours, or even multiple days.
Data can span columns using thecolspanattribute.
The attributes accepts an integer (greater than or equal to 1) to denote the number of columns it spans across.
질문 2
Spanning Rows
Data can also span multiple rows using therowspanattribute.
perhaps an event goes on for multiple hours on a certain day
Table Body
Over time, a table can grow to contain a lot of data and become very long. When this happens, the table can be sectioned off so that it is easier to manage.
Long tables can be sectioned off using thetable bodyelement:<tbody>.
The<tbody>element should contain all of the table’s data, excluding the table headings (more on this in a later exercise).
Table Head
When a table’s body is sectioned off, however, it also makes sense to section off the table’s column headings using the<thead>element
only thecolumnheadings go under the<thead>element.
질문 2
Table Footer
The bottom part of a long table can also be sectioned off using the<tfoot>element.
In the example above, the footer contains the totals of the data in the table.
Footers are often used to contain sums, differences, and other data results.
Now that we’ve learned about some of the most common HTML elements,
it’s time to learn how to set up an HTML file.
HTML files require certain elements to set up the document properly. We can let web browsers know that we are using HTML by starting our document with adocument type declaration.
<!DOCTYPE html>
This declaration is an instruction, and it must be the first line of code in your HTML document.
To make sure your document is forever interpreted correctly,
always include<!DOCTYPE html>at the very beginning of your HTML documents.
2가지 정보를 알려줌
the type of document
the HTML version to expect
The <html> tag
질문 1
//
Declared to the browser that your code is HTML with<!DOCTYPE html>
Added the HTML element (<html>) that will contain the rest of your code.
The Head
The<head>element contains themetadatafor a web page. Metadata is information about the page that isn’t displayed directly on the web page. Unlike the information inside of the<body>tag, the metadata in the head is information about the page itself. You’ll see an example of this in the next exercise.
Page Titles
The<title>tag is always inside of the<head>.
Linking to Other Web Pages
One of the powerful aspects of HTML (and the Internet), is the ability tolinkto other web pages.
<a>TThis Is A Link To Wikipedia</a>
The anchor element in the example above is incomplete without thehrefattribute. This attribute stands forhyperlink referenceand is used to link to apath, or the address to where a file is located (whether it is on your computer or another location). The paths provided to thehrefattribute are often URLs.
Opening Links in a New Window
웹서핑을 하다가 링크를 클릭하면 페이지가 현재창으로 열리는게 있고 새창으로 열리는게 있음.
target="_blank" 는 새로운 창에서 열리게하는 것
Linking to Relative Page
When making multi-page static websites,
web developers often store HTML files in theroot directory, or a main folder where all the files for the project are stored.
we can link web pages together using arelative path.
<a href="./contact.html">Contact</a>
In this example, the<a>tag is used with a relative path to link from the current HTML file to thecontact.htmlfile in the same folder. On the web page,Contactwill appear as a link.
A relative path is a filename that shows the path to alocal file(a file on the same website, such as./index.html) versus an absolute path (a full URL, likehttps://www.codecademy.com/learn/learn-htmlwhich is stored in a different folder). The./in./index.htmltells the browser to look for the file in the current folder.
*링크 추가 검색하여 설명*
인터넷을 하다 보면, 평소에는 화살표 모양이던 마우스 커서가 어떤 그림이나 글 위에 갖다대면 손 모양으로 변함.
HTML provides structure to the content appearing on a website, such as images, text, or videos.
In HTML, the computer can interpretraw textthat is wrapped in HTML elements.
Learning HTML is the first step in creating websites.
ㅡ HyperText = hyperlinks
HTML is composed ofelements. These elements structure the webpage and define its content.
예를 들어서, paragrah element 구조는 다음과 같음
<p>content</p>
Anopening tag(<p>)
The content (“Hello World!” text)
Aclosing tag(</p>)
*tag를 element라고 같다고 보면 안됨*
HTML Element = tag + content
= a unit of content in an HTML document formed by HTML tags and the text or media it contains.
HTML Tag = the element name, surrounded by an opening (<) and closing (>) angle bracket.
The Body
HTML Structure
HTML is organized as a collection of family tree relationships. As you saw in the last exercise, we placed<p>tags within<body>tags. When an element is contained inside another element, it is considered thechildof that element. The child element is said to benestedinside of theparentelement.
자식 얘기가 전세계 오피셜한 얘기였구낭...
Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren, and beyond. The relationship between elements and their ancestor and descendent elements is known ashierarchy.
Understanding HTML hierarchy is important because child elements can inherit behavior and styling from their parent element. You’ll learn more about webpage hierarchy when you start digging into CSS.
Headings
In HTML, there are six differentheadings, orheading elements.
<h1>— used for main headings. All other smaller headings are used for subheadings.
<h2>
<h3>
<h4>
<h5>
<h6>
Divs
One of the most popular elements in HTML is the<div>element.
<div>is short for “division” or a container that divides the page into sections. These sections are very useful for grouping elements in your HTML together.
Remember to always add two spaces of indentation when you nest elements inside of<div>s for better readability.
Attributes
If we want to expand an element’s tag, we can do so using anattribute. Attributes are content added to the opening tag of an element and can be used in several different ways, from providing information to changing styling. Attributes are made up of the following two parts:
Thenameof the attribute
Thevalueof the attribute
One commonly used attribute is theid. We can use theidattribute to specify different content (such as<div>s) and is really helpful when you use an element more than once.ids have several different purposes in HTML, but for now, we’ll focus on how they can help us identify content on our page.
When we add an id to a <div>, we place it in the opening tag:
가독성을 위해 써주는듯?
Displaying Text
If you want to display text in HTML, you can use aparagraph or span:
Paragraphs(<p>) contain a block of plain text.
<span>contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content.
It’s best to use a<span>element when you want to target a specific piece of content that is inline, or on the same line as other text. If you want to divide your content into blocks, it’s better to use a <div>.
Styling Text
You can also style text using HTML tags.
The<em>tag will generally render asitalicemphasis.
The<strong>will generally render asboldemphasis.
Line Breaks
The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser.
If you are interested in modifying the spacing in the browser, you can use HTML’sline breakelement:<br>.
웹사이트에서 보이는 문장에서, 엔터 기능이 이거구낭
질문글 1
Unordered Lists
In HTML, you can use anunordered listtag (<ul>) to create a list of items in no particular order.
An unordered list outlines individuallist itemswith a bullet point.
Ordered Lists
Ordered lists(<ol>) are like unordered lists, except that each list item is numbered.
They are useful when you need to list different steps in a process or rank items for first to last.
Images
Most elements require both opening and closing tags, but the<img>tag is aself-closing tag.
Note that the end of the<img>tag has a forward slash/.
The<img>tag has a requiredattributecalledsrc.
Thesrcattribute must be set to the image’ssource, or the location of the image.
Image Alts
Part of being an exceptional web developer is making your site accessible to users of all backgrounds.
Thealtattribute, which means alternative text, brings meaning to the images on our sites.
Thealtattribute can be added to the image tag just like thesrcattribute. The value ofaltshould be a description of the image.
If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise), thealtattribute should be left empty.
꼭 있다고 좋은건 아닌가보다.
Videos
Unlike the<img>tag however, the<video>element requires an opening and a closing tag.
In this example, the video source (src) ismyVideo.mp4
The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.
After thesrcattribute, thewidthandheightattributes are used to set the size of the video displayed in the browser.
Thecontrolsattribute instructs the browser to include basic video controls: pause, play and skip.
The text, “Video not supported”, between the opening and closing video tags will only be displayed if the browser is unable to load the video.
