본문 바로가기


Web 02. HTML Style, Color, List, Table

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

 

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

html.zip
0.10MB

 

 

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

 

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

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

 


 

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

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

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

 

HTML Colors

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

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

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

 

 

 

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

 

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

 

HTML Color Picker

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 


 

 

목록 태그 UL, OL

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

 

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

 

 

 

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

 

HTML Lists

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

 


 

표 태그 table, tr, td

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

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

 

HTML Tables

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

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

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

 

HTML Table Styling

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

위 링크에서 호버러블 태이블의 스타일을 아래 요약해서 정리 해보았으니 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