2022 Web Development Bootcamp

Section 03: Diving Deeper into HTML & CSS

olivia_yj 2022. 8. 9. 03:51

The goals

💪🏻Build deep knowledge of HTML and CSS

👍🏻Try to practice it

 

 Develop server & local website address

Local web development environments are a useful tool for web coders. In programming circles, an integrated development environment (IDE) is a collection of software programs that make it easy and efficient to write code. Most development environments are tailored to a particular programming language and come with tools for editing, testing, and compiling code (that is, converting the code to its final form as an application).

In the web coding game, there aren’t IDEs, per se, but there is a similar beast called a local web development environment, which is also a collection of software. It usually includes the following:

  • A web server
  • A relational database management system (RDBMS) to run on the web server
  • A server-side programming language
  • An interface for controlling (starting, stopping, and so on) the web server
  • An interface for accessing and manipulating the RDBMS

What is Localhost (IP 127.0 0.1)?

Localhost is the default name of the computer we are working on. The term is a pseudo name for 127.0.0.1, the IP address of the local computer. This IP address allows the machine to connect to and communicate with itself. Therefore, localhost (127.0.0.1) is used to establish an IP connection to the same device used by the end-user.

Although using 127.0.0.1 is the most common practice, the IPv4 network standard reserves the range 127.0.0.1 – 127.255.255.255 for localhost. Using another IP address within the range results in the same or similar manner. The IPv6 standard assigns one address to loopback - :: 1.

 

 

To ping the local machine in the command prompt, simply run localhost or 127.0.0.1 as a command in the terminal.

If there is no prior setup, we’re likely to get no response after pinging localhost or a message that the computer refused the request. This is because it is not expecting incoming connections. The response changes once we run a server on the computer as it starts listening to incoming requests.

 

 

What is a port?

A port is a virtual point where network connections start and end. Ports are software-based and managed by a computer's operating system. Each port is associated with a specific process or service. Ports allow computers to easily differentiate between different kinds of traffic: emails go to a different port than webpages, for instance, even though both reach a computer over the same Internet connection.

What is a port number?

Ports are standardized across all network-connected devices, with each port assigned a number. Most ports are reserved for certain protocols — for example, all Hypertext Transfer Protocol (HTTP) messages go to port 80. While IP addresses enable messages to go to and from specific devices, port numbers allow targeting of specific services or applications within those devices.

 

List in HTML

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain −

  • <ul> − An unordered list. This will list items using plain bullets.
  • <ol> − An ordered list. This will use different schemes of numbers to list our items.
  • <dl> − A definition list. This arranges our items in the same way as they are arranged in a dictionary.

Inheritance & Cascading & Specificity

Inheritance: (Selected) container rules apply to descendants

Cascading: Muliple lines can be  applied to the same element and if there are same property for the same element, then                         the latest line applies to the element

Specificity: Moore specific selector's rule wins over less specific selector

 

The CSS Box Model

The CSS box model is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model. Box-Model has multiple properties in CSS. Some of them are given below:

  • content: This property is used to displays the text, images, etc, that can be sized using the width & height property.
  • padding: This property is used to create space around the element, inside any defined border.
  • border: This property is used to cover the content & any padding, & also allows to set the style, color, and width of the border.
  • margin: This property is used to create space around the element ie., around the border area.

The following figure illustrates the Box model in CSS.

 

 

  • Content Area: This area consists of content like text, images, or other media content. It is bounded by the content edge and its dimensions are given by content-box width and height.
  • Padding Area: It includes the element’s padding. This area is actually the space around the content area and within the border-box. Its dimensions are given by the width of the padding-box and the height of the padding-box.
  • Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the width and height of the border.
  • Margin Area: This area consists of space between border and margin. The dimensions of the Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors.

Selectors & Combinators

CSS selectors define the elements to which a set of CSS rules apply.

Basic selectors

 

Universal selector:

Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. Syntax: * ns|* *|* Example: * will match all the elements of the document.

Type selector:

Selects all elements that have the given node name. Syntax: elementname Example: input will match any <input> element.

Class selector:

Selects all elements that have the given class attribute. Syntax: .classname Example: .index will match any element that has a class of "index".

ID selector:

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. Syntax: #idname Example: #toc will match the element that has the ID "toc".

Attribute selector:

Selects all elements that have the given attribute. Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).

Grouping selectors

Selector list:

The , selector is a grouping method that selects all the matching nodes. Syntax: A, B Example: div, span will match both <span> and <div> elements.

CSS combinators

 

 

CSS combinators are explaining the relationship between two selectors. CSS selectors are the patterns used to select the elements for style purpose. A CSS selector can be a simple selector or a complex selector consisting of more than one selector connected using combinators. 
There are four types of combinators available in CSS which are discussed below:

  • General Sibling selector (~)
  • Adjacent Sibling selector (+)
  • Child selector (>)
  • Descendant selector (space)

General Sibling selector: 

The general sibling selector is used to select the element that follows the first selector element and also share the same parent as the first selector element. This can be used to select a group of elements that share the same parent element.

 

Adjacent Sibling selector: 

The Adjacent sibling selector is used to select the element that is adjacent or the element that is the next to the specified selector tag. This combinator selects only one tag that is just next to the specified tag.

 

Child Selector: 

This selector is used to select the element that is the immediate child of the specified tag. This combinator is stricter than the descendant selector because it selects only the second selector if it has the first selector element as its parent. 

 

Descendant selector: 

This selector is used to select all the child elements of the specified tag. The tags can be the direct child of the specified tag or can be very deep in the specified tag. This combinator combines the two selectors such that selected elements have an ancestor same as the first selector element.

 

Inline vs Inline-block vs Block

 

 

Every HTML element is a block in the shape of a rectangle or a square and owns a display property. Unless explicitly specified, all of them have either inline, inline-block or block values set - with the exception of table and its associated elements. It's important to recognize how these HTML elements behave because they are the building blocks of our layouts.

 

Inline

Here is a list of common inline elements

  • <a>
  • <span>
  • <img>
  • <strong>

Inline elements get placed literally in a single line together side by side with different inline or inline-block elements. Think of them as stones in the above cover photo. They will start on a new line only if the same line doesn't have enough space for any more inline elements.

 

*non-replaced inline element?

There are two types of inline elements: replaced inline elements and non-replaced inline elements. In general, non-replaced elements are those whose content is contained in the document, whereas replaced-elements are those whose content is outside of the document. For example, in the code:

Visit the

<a href="http://www.w3.org/">World Wide Web Consortium</a>

to learn about... the content of the a element is "World Wide Web Consortium". Replaced elements are those where the content comes from some external source, for example, an object or img element.

However, as far as the inline box model is concerned, the definitions are as described above except that elements with display types inline-table and inline-block (the latter is a proposed type for CSS3 to accommodate form elements) are considered replaced elements.

 

Inline-block

Here is a list of common inline-block elements

  • <input>
  • <button>
  • <select>
  • <textarea>

Interestingly enough, we can notice that most of these elements are related with <form> elements. Inline blocks are very similar in nature as inline elements. They can do everything that inline does but can also be set some widths, heights and vertical margins!

Creating a simple form is easy with inline-block elements. One gotcha with inline blocks is that they create spaces around themselves. (Notice between the input and the button).

 

Block

Here is a list of common block elements

  • <p>
  • <h1>
  • <div>
  • <header>

The block elements always start on a new line. They will also take space of an entire row or width. It means that there can be no other HTML elements that can stand side by side with block level elements. We are also able to give set width/height and vertical margins.

One common scenario is series of paragraphs in a blog.

Margin collapsing

 

Margin Collapse does not happen on Horizontal (Left and Right) Margin.
Only one type of Margin can collapse — Vertical (Top and Botton) Margins.

 

If we will directly say that margins will collapse, this will be misleading. The more correct definition would be to say that — the top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

It is like when two things collide, only one will survive. Survival of the fittest. In most of the fights, the biggest guy wins.

 

Only Vertical Margin Collapse — As we learnt a first thing at the beginning of this article that Horizontal Margins never collapse.

 

 

Only Adjacent Element Collapse — Elements need to be adjacent in the DOM for their margins to collapse. The <br/> tag is invisible and empty, but any other elements between two others will block margins from collapsing.

 

 

 

 

Sources

https://phoenixnap.com/kb/127-0-0-1-localhost#:~:text=The%20term%20is%20a%20pseudo,used%20by%20the%20end%2Duser.

https://www.cloudflare.com/ko-kr/learning/network-layer/what-is-a-computer-port/

https://www.tutorialspoint.com/html/html_lists.htm

https://www.geeksforgeeks.org/css-box-model/

https://medium.com/theleanprogrammer/mastering-margin-collapsing-css-16ee592cd920