[HTML] HTML의 모든 것 - (2)CSS, Links, Image , Table, List, Block&Inline

STUDY/HTML.CSS.JS 2021. 3. 3. 15:40

CSS
Links
Image
Table
List
HTML Block and Inline Elements

CSS

CSS는 Cascading Style Sheets의 약자로 웹 페이지의 레이아웃 형식을 지정하는 데 사용한다.

CSS를 사용하여 색깔, 글씨체, 크기, 간격, 위치, 화면 크기 등을 조절할 수 있다.

Note : Cascading이라는 의미는, 부모 element에 적용된 스타일이 자식의 모든 element에도 적용됨을 의미한다. 예를 들어 body의 배경을 파란색으로 하면, 모든 heading, paragraph, 다른 모든 텍스트 element들이 파란색으로 적용된다.

1. CSS를 사용하는 방법

Inline - HTML element 내부에서 사용

<h1 style="color:blue;">A Blue Heading</h1>

Internal - <head>에 <style> 태그를 사용

<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>

External - <link> 태그를 사용하여 외부의 css 파일로 적용( 가장 일반적으로 사용)

<head>
  <link rel="stylesheet" href="styles.css">
</head>

styles.css

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

2. CSS Property

1) Colors, Fonts and Sizes

<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
</style>

2) Border

p {
  border: 2px solid powderblue;
}

3) Padding : 텍스트와 border 사이에 간격을 지정

p {
  border: 2px solid powderblue;
  padding: 30px;
}

4) Margin : border 외부의 간격을 지정

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Links

HTML에서 Link는 HyperLink이다. 다른 웹 페이지로 갈 수도 있고, 이미지나 HTML의 element로 이동할 수도 있다.

하이퍼링크의 형식은 아래와 같다.

<a href="url">link text</a>

<a> 태그에서 가장 중요한 속성 중 하나는 link의 목적지를 지정하는 href 속성이다.

1. target 속성

target 속성은 링크되어있는 문서가 어디서 열릴지 결정하는 속성이다.

_self - Default. 현재 있는 윈도우와 탭에서 페이지가 열린다.
_blank - 새로운 탭에서 문서가 열린다.
_parent - 상위 프레임에서 문서를 연다.
_top - 창 전체에서 문서를 연다.

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

2. 절대 경로와 상대 경로

절대 경로 : 전체 주소를 쓴다.

상대 경로 : https://www 부분을 작성하지 않는다.

<h2>Absolute URLs 절대 경로</h2>
<p><a href="https://www.w3.org/">W3C</a></p>

<h2>Relative URLs 상대 경로</h2>
<p><a href="html_images.asp">HTML Images</a></p>

3. 이미지를 링크로 사용하기 : <a> 태그 안에 <img> 태그를 넣어 사용

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

4. 버튼을 링크로 사용하기

<button onclick="document.location='default.asp'">HTML Tutorial</button>

5. Link 색깔

기본적으로 모든 브라우저에서 Link의 색은

방문하지 않았을 때 -> 밑줄과 파란색
방문했을 때 -> 밑줄과 보라색
활성화된 링크 -> 밑줄과 빨간색

CSS를 통해 이 색상을 바꿀 수 있다.

a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

6. Bookmark

글의 길이가 길어지면, 내용을 찾기 어려워진다. 이때 사용하는게 북마크!

<h2 id="C4">Chapter 4</h2>

<a href="#C4">Jump to Chapter 4</a>

이렇게 하면, 'Jump to Chapter 4'에 밑줄과 함께 id가 C4인 링크가 연결된다.

'Jump to Chapter 4'를 누르면, 'Chapter 4' 가 있는 위치로 이동한다.

Use the id attribute (id="value") to define bookmarks in a page
Use the href attribute (href="#value") to link to the bookmark

Image

<img src="url" alt="alternatetext">

이미지를 웹 페이지에 넣을 때는 위와 같은 형식을 사용한다.

<img> 태그는 empty 태그로, 속성만 포함하고 닫는 태그는 없다.

<img> 태그의 속성에는 src와 alt가 있다.

src - 이미지의 주소

alt - 이미지가 나오지 않을 경우, 이미지에 대한 설명을 보여준다.

Size

이미지의 크기를 조절하는 방법은 두가지가 있다.

1) style 속성을 사용 ==> 권장하는 방식!!!

style 속성을 사용하여 크기를 지정하는 것이 스타일 시트가 이미지의 크기를 변경하는 것을 방지한다.

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

2) width와 height 속성을 사용

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Note : 항상 이미지의 높이와 너비를 지정해야 한다. 그렇지 않을 경우, 이미지가 로드되는 동안 웹 페이지가 깜빡거릴 수 있다.

Float

Float 속성은 이미지가 글씨의 왼쪽 혹은 오른쪽에 위치할지 결정하는 속성이다.

//글씨 오른쪽에 사진
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

//글씨 왼쪽에 사진
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.  
</p>

* 기타 Image Map, Background Images, The Picture Element는 아래의 링크를 참고 www.w3schools.com/html/html_images.asp

Table

HTML 문서에서 테이블을 정의하는 태그는 <table>이다.

테이블의 행은 <tr>태그, 테이블의 헤더(열의 이름)는 <th>, 데이터와 셀은 <td>로 정의한다.

<th>는 자동으로 가운데 정렬과 볼드체로 텍스트가 나타난다.

<td>는 왼쪽 정렬과 기본적인 텍스트로 표시된다. (regular text라는게 볼드체, 이텔릭체 등이 아닌 그냥 평범한 텍스트를 말하는거라고 한다..)

테이블 사용 예시

<table style="width:100%">
	<tr>
    	<th> FirstName </th>
        <th> LastName </th>
     </tr>
     <tr>
     	<td>kuku</td>
        <td>kimm</td>
     </tr>
</table>

1. Table Border : CSS의 border 속성 이용

css의 border property는 테이블과 테이블의 셀들의 border까지 정의한다!

table, th, td {
	border:1px solid black;
}

2. Cell Padding

Cell Padding은 cell 내의 내용과 border 사이의 간격을 지정한다.

Padding을 지정하지 않으면, cell은 간격없이 보여지게 된다.

th, td {
  padding: 15px;
}

3. Text-align : 텍스트 정렬

left, right, center로 정렬 가능하다.

th {
  text-align: left;
}

4. Border Spacing

cell과 border 사이의 간격을 지정한다.

Padding과의 차이점을 기억하자!

table {
	border-spacing : 5px;
}

5. 셀 병합

colspan : 행을 병합

rawspan : 열을 병합

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td rowspan="2">Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

6. Caption : 테이블의 이름

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
 </table>

7. Table에 id 속성 부여

<table id="t01">
	<tr>
    	<th>FirstName</th>
        <th>LastName</th>
    </tr>
    <tr>
    	<td>kuku</td>
        <td>kim</td>
    </tr>
</table>

table에 id를 부여하고 이 id를 이용하여 특정 테이블만 style을 적용할 수 있다.

(css에 대한 더 자세한 내용 #이나 nth-child 등은 css 정리에서 더 자세하게 다룬다.)

#t01 tr:nth-child(even) {
	background-color:#eee;
}    
#t01 tr:nth-child(odd) {
	background-color:#fff;
} 
#t01 th {
  color: white;
  background-color: black;
}

List

1.Unordered HTML List : <ul>

순서가 없는 리스트는 <ul> 태그로 시작하고, 각각의 리스트 안의 내용들은 <li>태그로 시작한다.

<ul>
    <li>Coffee</li>
    <li>Pizza</li>
    <li>Cake</li>
</ul>

순서가 없는 목록은 기본적으로 ● 로 리스트를 나타내는 데, CSS를 통해 이 모양을 바꿀 수 있다.

● : disc

○ : circle

■ : square

: none

아래와 같이, style="list-style-type:circle;" 의 형식으로 사용할 수 있다.

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

또한 순서가 없는 리스트 안에 또 다른 리스트를 넣을 수도 있다. (ol, ul 상관없이 모두 동일하다!)

<li> 태그 안에는 새로운 리스트, 이미지나 링크 같은 다른 html element도 포함할 수 있다.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

CSS를 이용하여 리스트를 다양한 방법으로 꾸밀 수 있다.

그중에 하나가 리스트를 수평적으로 사용하여 네비게이션 메뉴로 사용하는 방법이다.!

<li>의 float 을 left로 지정해주면, 리스트를 수평으로 나타나게 표현할 수 있고, 나머지는 리스트의 padding이나 색 등을 꾸며주면 된다. 전체 코드는 이곳을 참고하길.

<style>
....
li {
  float: left;
}
....
</style>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

2.Ordered HTML List : <ol>

순서가 있는 리스트는 <ol>태그로 시작하고, 각각의 리스트 안의 내용들은 <li>태그로 시작한다.

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

순서가 있는 목록은 기본적으로 숫자(1,2,3...) 로 리스트를 나타내는 데, CSS를 통해 이 모양을 바꿀 수 있다. 아래의 형식처럼 사용하면 된다.

<ol type="i">

type="1" (default)

type="A"

type="a"

type="I" (대문자 i)

type="i"

그리고 순서가 있는 리스트의 경우, 숫자가 1부터 차례로 증가하지만, 시작하고자 하는 숫자를 지정할 수 있다.

<ol start="50">

이렇게 사용하면, 숫자는 50부터 51,52,53,,, 의 순서로 증가하게 된다.

3.Description HTML List : <dl>

Description 리스트는 용어에 대한 설명이 포함된 목록이다.

<dl>로 설명 리스트를 정의하고, <dt>로 용어(이름)을 정의하고, <dd>로 각각의 용어를 설명한다.

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

HTML Block and Inline Elements

모든 HTML 요소들은 화면에 표시되는 default 값을 가지고 있다. 화면에 표시되는 요소에는 Block과 inline 두가지가 존재한다. 이번에는 이 Block과 Inline 요소에 대해 알아보자.

Block-level Elements : <div> 등

- 블록 단위의 요소는 항상 새로운 줄에서 시작한다.

- 블록 단위 요소는 항상 사용가능한 최대 너비를 사용한다. 할 수 있는 한 왼쪽과 오른쪽으로 최대한 확장하여 공간을 차지한다.

- 블록 단위 요소는 모든 inline 요소를 포함할 수 있고, 다른 블록 요소도 일부 포함할 수 있다.

- 블록 단위 요소에는 위와 아래의 margin을 가지고 있다. (inline은 가지고 있지 않음!)

- <div>가 블록 단위 요소 중 하나이다. 아래의 사진처럼 블록 단위 요소는 차지할 수 있는한 최대의 공간을 차지한다.

<div style="border: 1px solid black">Hello World</div>

- 기본적으로 가로폭 전체의 넓이를 가지는 직사각형의 형태를 가지고, width, height, margin, padding 등을 이용하여 모양을 변형해 레이아웃을 수정할 수 있다.

- display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경할 수 있다.

- 이외의 블록 단위 요소는

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video

Inline Elements : <span> 등

- Inline 요소는 새로운 줄에서 시작하지 않는다. Inline 요소 다음에는 줄바꿈 없이 우측에 바로 이어서 표시된다.

- Inline 요소는 오직 필요한만큼만의 공간(너비)를 차지한다. 그래서 임의로 width, height를 변경할 수 없다.

line-height로 줄의 높낮이 조절과, text-align으로 텍스트 정렬만 가능하다.

- Inline 요소 안에는 다른 Inline 요소가 포함될 수 있다.

Inline 요소 중 하나인 <span>을 보면 아래와 같다. 블록 단위 요소인 div와의 차이점을 이해하자!

 <span style="border: 1px solid black">Hello World</span>

이외의 inline 요소는

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

이 글은 3school을 참고하여 작성된 글입니다.

'STUDY > HTML.CSS.JS' 카테고리의 다른 글

[HTML] HTML의 모든 것 - (6) Graphics(Canvas, SVG), MultiMedia(video, audio, YouTube) (0)	2021.03.06
[HTML] HTML의 모든 것 - (5) Form (0)	2021.03.05
[HTML] HTML의 모든 것 - (4)Semantic element, Encoding, URL, HTML vs XHTML (0)	2021.03.05
[HTML] HTML의 모든 것 - (3) class, id, iframes, javascript, file path, layout (0)	2021.03.04
[HTML] HTML의 모든 것 - (1)HTML, 기본 문법,Attribute, Heading, Style, Text, Colors (0)	2021.03.03

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

인기포스트

ABOUT ME

크크의 개발 블로그 크크의 개발 블로그

CSS

Links

Image

Table

List

HTML Block and Inline Elements

Block-level Elements : <div> 등

Inline Elements : <span> 등

'STUDY > HTML.CSS.JS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

인기포스트

ABOUT ME

CSS

Links

Image

Table

List

HTML Block and Inline Elements

Block-level Elements : <div> 등

Inline Elements : <span> 등

'STUDY > HTML.CSS.JS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역