Web 02. HTML Style, Color, List, Table

일반문서에서도 쪽 여백과 관련된 문서의 스타일들이 있습니다.  웹문서에도 필요한 여백과 서체(웹폰트 포함), 배경색상과 글씨색상 등 Head문에 삽입외는 <style>태그내의 주요 태그별 스타일규정을 배워보고며, 목록, 표 태그에 대해서 알아봅니다.

 

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

html.zip

0.10MB

 

 

■ 웹폰트의 사용 - 눈누서체 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

웹문서에도 필요한 경우 글과 숫자등의 데이터를 표에 수록해서 표현 할 수 있습니다.

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;}

table_01.html

0.00MB