Web 02. HTML Style, Color, List, Table, Border, Margin, Padding

일반문서에서도 표, 셀나누기, 셀합치기,  문서의 쪽 여백, 배경색상 등 문서의 스타일들이 있습니다.  html 문서에도 필요한 여백과 서체(웹폰트 포함), 배경색상과 글씨색상 등 Head문에 삽입외는 <style>태그내의 주요 태그별 스타일규정을 배워보고며, 목록, 테이블 태그로 표를 표현하는 방법에 대해서 알아봅니다.   

Table 태그가 복잡한 분들은 DreamWeaver라는 Adobe의 웹퍼블리싱 웹에디터를 구독해 사용하는 것을 추천하겠습니다. 아주 오래전 멀티미디어 콘텐츠제작앱을 개발하던 MacroMedia Dreamweaver Mx2004, Flash를  Adobe가 인수하면서 웹디자인 및 개발분야로 확장된 세계관을 열게된 프로그램입니다.

 

https://www.adobe.com/kr/products/dreamweaver.html

웹 사이트 디자인 소프트웨어 | Adobe Dreamweaver

 

 

 

코딩에 사용하는 표준 괄호에 대한 중괄호, 소괄호, 대괄호 등 호칭 은 더 보기를 눌러보세요.

 

 

아래 예제로 작업중인 html.zip파일을 다운로드해서 따라해 보세요.

 

 

■ 웹폰트의 사용 - 눈누서체 https://noonnu.cc/

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

 

---

 

색상적용 - 배경은 Background, 글씨는 Color

대부분이 박스모델인 본문인 Body, Div, Table외에 일정한 공간을 채우는 배경의 색과 이미지는 Background Style로 표현합니다. 

https://www.w3schools.com/html/html_colors.asp

HTML Colors

 

Style(CSS)와 인라인(태그내 스타일)의 이해

Style속에 삽입하는 스타일규정의 경우는 동일한 스타일을 전체에 인라인 방식으로 스타일을 규정하는 경우에는 일부만 그 스타일을 적용하는 부분도 있다.

 

 

 

색상은 그래픽 프로그램이나 Color로 16진수 색상을 고르는 컬러피커(color picker)를 이용하면 편리합니다.

 

https://www.w3schools.com/colors/colors_picker.asp

HTML Color Picker

 

화면의 모든색을 16진수로 뽑아내는 컬러픽커 중에서 웹, 디자인, 영상 분야에 활용할 수 있는 jcpicker를 소개합니다.

https://annystudio.com/software/colorpicker/#download

Just Color Picker 5.7 - best free colour tool for Windows and macOS

jcpicker.exe

3.65MB

 

 

---

 

 

목록 태그 UL, OL

HTML 목록을 사용하면 웹 개발자가 목록에서 관련 항목 집합을 그룹화할 수 있습니다. 순서가 지정되지 않은 목록은 다음으로 시작합니다.

 

가장 일반적인 목록의 시작은 <ul>태그로 순서없는 리스트(Unorderd List)의 줄인말이며,  하부항목들은 <li>로 해당 숫자의 리스트 만큼 기입이 되며 목록 항목은 기본적으로 글머리 기호(작은 검은색 원)로 표시됩니다.    회원가입, 요리순서와 같이 어떤 순서(명령 Orderd List)에 맞춰야 하는 경우는 <ol>로 큰 틀을 정하고 하부항목들은 <li>로 기입하는 것은 동일합니다.

 

 

 

https://www.w3schools.com/html/html_lists.asp

HTML Lists

 

 

 

---

 

표 태그 table, tr, td

웹문서에도 필요한 경우 글과 숫자등의 데이터를 표에 수록해서 표현 할 수 있습니다.
표는 태그로는 table이라고 한다. table내 한줄은 tr, 줄안쪽의 구분된 세로는 td 라고 세분화한다. td안에 글씨 들어갑니다. 메일-내게 쓰기, 게시판으로도 표를 구성할 수 있습니다.

https://www.w3schools.com/html/html_tables.asp

HTML Tables

Table태그에는 스타일이 적용되야 그 형상을 제대로 볼 수 있습니다.

https://www.w3schools.com/html/html_table_styling.asp

HTML Table Styling

 

위 링크에서 호버러블 태이블의 스타일을 아래 요약해서 정리 해보았으니 Head문에 삽입해서 사용해보세요.

<style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #DDD; } tr:hover {background-color: #D6EEEE;} </style>

 

 

 

마진:외부여백, 패딩:안쪽여백, 보더:테두리 색상 두께 스타일 3개속성 h1태그에 연습하기....웹 요소 박스형상을 띰 // 보더는 적용위치에 따라서 적용하기도 하고 일반적으로는 상하좌우에 선이 보인다. -bottom, -left, -top, -right

h1{border-left:16px #f00 solid;border-bottom:1px #000 solid;padding-left:10px;}

 

---

 

HTML 테이블은 여러 가로행row 및/또는 세로열cols에 걸쳐 있는 셀을 가질 수 있습니다. 


<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

셀 범위를 이름, 성을 나누어 구분한 구분입니다. 불편하지만 사용합니다.

<table style="width:100%">
  <tr>
    <th>F.Name</th>
    <th>L.Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>



이름과 성을 합쳐 하나로 칼(col) 옆으로 합치려면 colspan 속성을 사용합니다.

<table style="width:100%">
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>


각기 다르게 구분해서 Phone1, Phone2로 구성된 셀입니다. 기본 표의 구성입니다.

<table style="width:100%">
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th>Phone1</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <th>Phone2</th>
    <td>555-8745</td>
  </tr>
</table>



Phone으로 합쳐서 위,아래 행(row)를 수직으로 합치려면 rowspan 속성을 사용합니다.

<table style="width:100%">
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
  </tr>
</table>

 

---

테두리 효과 Border

웹문서에는 대부분이 사각형의 박스모델이고 이러한 박스모델에는 테두리인 보더 Border를 적용할 수 있습니다.

 

https://www.w3schools.com/css/css_border.asp

W3Schools.com

---

 

외부여백은 Margin, 내부여백은 Padding

본문인 Body태그를 포함해서 대부분의 박스모델에는 외부여백과 내부여백이 있습니다.  테두리, 혹은 배경색이 있는 경우에 박스모델이 기존 박스모델과의 외부로 떨어진 Margin 여백차이를 명확히 볼 수 있습니다.  박스모델과 글과 그림같은 요소들이 면에 너무 붙어있는 경우 안쪽의 여백 Padding 을 주어서 별도의 내부 여유를 주는 것입니다. 

 

필요한 경우 CSS를 사용하면 Margin과 Padding은 요소의 각 면(위, 오른쪽, 아래, 왼쪽)에 대해 마진을 설정하는 속성이 있습니다.  상우하좌  시계방향으로 각각 적용하려면 margin-top / margin-right / margin-bottom / margin-left 와 같이 별도로 추가를 해야합니다.  하지만, margin: 10px 200px 500px 200px과 같은 상우하좌 순서를 기억하면  번거로움 없이 외부여백인 Margin을 줄수 있습니다.

 

body{margin:0 300px;}

h4{border-left:#f00 solid 10px;border-bottom:#000 solid 1px;padding-left:5px;}

 

---

 

외부여백은 Margin, 에 대한 자세한 내용은 아래 링크를 참고하세요.

https://www.w3schools.com/css/css_margin.asp

W3Schools.com

 

---

 

내부여백은 Padding에 대한 자세한 내용은 아래 링크를 참고하세요.

https://www.w3schools.com/css/css_padding.asp

W3Schools.com

 

 

html05.zip

3.00MB

 

---

 

CSS는 이미지를 둥글게 표현한다.

아래 일정한 1:1비율 300px 포토샵파일을 새로 만들고, 각각이 이미지를  붙이면 같은 규격의 이미지 파일이 됩니다. 동일한 사이즈의 이미지파일이 됩니다.   형태가 구분되는 배경색, 테두리가 있는 경우에는 Border-Radius라는 CSS를 통해서 일정한 비율%, 일정한 크기의 모서리진 부분을 둥글게 깎아서 표현할 수 있습니다.  아래 포토샵파일과  pixels.com의 이미지를 활용해서 1:1비율의 jpg 이미지파일을 웹용이미지 내보내기로 저장해 주세요.

Bimg_00.psd

2.40MB

 

https://www.pexels.com/ko-kr/search/dance/

 

 

https://cheonanfestival.com/ko/02/02.php

천안흥타령춤축제 CWDF

 

 

 

 

 

https://www.w3schools.com/howto/howto_css_rounded_images.asp

W3Schools.com