※ HTML과 CSS
| HTML | CSS |
| hyper text markup language | cascading style sheet |
※ CSS적용방식
| 적용방식 | 의미 |
| inline 방식 | html 태그 안에 적용 |
| 내부style 방식 | head 태그 안에 style태그를 작성해서 적용 |
| 외부style방식 | @import규칙, link태그에 외부문서를 연결해서 적용 |
※ CSS 개요 및 선택자
: 선택자란 html문서에서 가져오는 요소
| 선택자 종류 | 설명 |
| 태그(타입) 선택자 | 태그이름을 사용 |
| 클래스 선택자 | [.]을 붙이고, 요소에 중복적용 |
| 아이디 선택자 | [#]을 붙이고, 한번만 지명적용 |
| 전체 선택자 | *, 문서안의 모든요소에 적용 |
| 후손선택자 | 선택자 선택자(공백)으로 연결 |
| 자식선택자 | [>]으로 연결 |
| 반응선택자 | (pseudo) :active, :hover, :link, :visited a태그를 비롯해 모든 태그에 적용가능 |
| 인접선택자 | [+], 바로 뒤의 요소를 선택자로 사용 |
| 형제선택자 | [~], 형제관계에 있는 요소만 선택 |
| 그룹선택자 | [,] 선택자를 다중선택할때 사용 |
| 구조선택자 | [:first-child], [:last-child], [:nth-child(n)], [:nth-last-child(n)] nth-child() : ()안에 수열 first-child : 첫번째 요소를 선택자로 가져옴 last-child : 마지막 요소를 선택자로 가져옴 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 선택자</title>
<style>
/* 전체선택자 */
*{
margin:0;
padding:0;
line-height:1.75em;
}
/* 태그(type)선택자 */
p{
color: #f0f;
font-size: 24px;/*1.5배->150%->1.5em->1.5rem*/
}
/* 클래스선택자 */
.content{
font-size: 12px;/*0.75em*/
color: #333;
font-weight: bold;
}
/* 아이디선택자 */
#article{
text-shadow:3px 3px 5px #ff0;
color:#333;
font-style:italic;
}
/* 후손, 자식 선택자
.title{color:blue;}
#nav>h1{color:orange;}
#header h1{color:red;}
*/
/*반응선택자, 가상선택자, 수도우선택자*/
h1:hover{background:#ff0;color:#f00;}
h1:active{color:#00f;}
table tr:hover{background:#fdd;}
a{ font-size:3.0em;
font-weight: bold;
color:#333;
text-decoration: none;
}
a:visited{
color:orange;
}
a:hover{
color:green;
background: #eaeaea;
}
a:active{
color:purple;
}
/*인접선택자(바로 다음요소 선택)*/
a + div{
border:1px solid #333;
}
/*형제선택자(같은 위계를 가지고 있는 요소 선택)*/
a ~ div{
background: #fde;
}
/*그룹선택자(다중요소 선택)*/
a, .content{
background: #df0;
border:5px dotted #d9e;
margin:10px;
}
/*구조선택자 (..번째 요소 선택)*/
table tr:first-child{
background: #777;
color:#fff;
}
table tr:nth-child(2n){
background: #eee;
}
/* 가로배치 메뉴 - 꿈틀이 젤리모양 */
ul{
list-style:none;
}
li{
float:left;
width:150px;
padding:20px 0;
text-align: center;
background:#cdeccd;
}
li:nth-child(2n){
background:#eee;
}
</style>
</head>
<body>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
<li>menu6</li>
<li>menu7</li>
</ul>
<a href="#">링크문자</a>
<div id="header">
<h1 class="title">제목 : 헤더의 자식</h1>
<div id="nav">
<h1 class="title">메뉴 내용 : 헤더의 후손</h1>
</div>
</div>
<div>두번째 div 블록입니다.</div>
<table border="1" width="400">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td><div>3-div</div></td>
<td><div>4-div</div></td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
</tr>
</table>
<p>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="content">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="content">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p id="article">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</body>
</html>
※ 텍스트와 관련된 css
| 속성명 | 설명 | 값표현 |
| font-family | 서체 | '돋움', arial, san-serif; |
| font-size | 문자크기 | 12px;(0.75em, 0.75rem, 75%,vw, vh) |
| color | 문자색상 | rgb, rgba, hsl, lab, #hex, colorName |
| font-weight | 문자두께 | normal;(bold) |
| font-style | 문자스타일 | normal; (italic) |
| text-decoration | 밑줄장식 | none; (underline | line-through) |
| text-shadow | 글씨 그림자 | 3px 3px 3px #000; 글씨의그림자 |
| line-height | 행간격 | (1.6) 고정값, 배수 |
| font | (두께) 글씨크기/행간 서체 를 한꺼번에 적용 | bold 14px/1.75 sans-serif; |
| letter-spacing | 자간 | 5px |
| word-spacing | 단어간격 | 2em |
| @font-face규칙 | 글꼴연결 상대경로 : style태그에 선언부와 호출부 |
@font-face{ font-family : 'NG'; src:url('font/NanumGothic.ttf') format(''ttf); } |
| 글꼴연결 절대경로 : head자식으로 link태그로 연결 --------------------- style내부에 @import로 연결 |
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700&display=swap" rel="stylesheet"> --------------- @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700&display=swap'); |
※ 단위와 관련된 css
| 절대단위 | px, pt(16px=12pt) |
| 상대단위 | %, em - 상위요소를 기준으로 하는 상대값 |
| rem - 최상위요소를 기준으로 하는 상대값 | |
| vw, vh - 뷰포트를 기준으로 하는 상대값 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS - 문자관련 속성</title>
<style>
html,body{font-size:16px;}
ul{font-size:18px;}
li{font-size:1.5em;}
li.last{font-size:1.5rem;color:blue;}
/*
em 은 부모요소, 근접한 조상요소에 상대적으로 변한다.
: ul 12px->li 18px
: ul 18px->li 27px
rem 은 최상위요소, 즉 html, body값에 상대적으로 변한다.
: html 16px->li.last 24px
: html 30px->li.last 45px
*/
</style>
<body>
<ul>
<li>font-family : '돋움', arial, san-serif; 서체 </li>
<li>font-size : 12px;(0.75em, 0.75rem, 75%,vw, vh) 문자크기
<ul>
<li class="last">rem : r은 root 즉, 최상위요소를 말함</li>
<li class="last">rem은 최상위 요소에 대한 상대값이다. html, body의 고정크기가 변하면, rem도 같이 변한다. </li>
<li>vw : viewport width 뷰포트의 너비값 즉, 가로폭 1/100</li>
<li>vh : viewport height 뷰포트의 높이값 즉, 세로폭 1/100</li>
</ul>
</li>
</ul>
</body>
</html>
※ 뷰포트 사이즈 참조 :
Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
Vendor detail view type Apple iPhone 8 Plus iOS 5.5 13.9 1080 1920 1080 401 100% MDPI 16 : 9 100 Vendor object 0 Phone Apple iPhone 7 Plus iOS 5.5 14.0 1080 1920 1080 401 100% MDPI 9 : 16 100 Vendor object 0 Phone Apple iPhone XR iOS 6.1 15.5 828 1792 828
screensiz.es
What is my viewport
Your viewport size is: impossible to determine because you have JavaScript disabled or blocked! × DPR: Screen Size: ×
whatismyviewport.com
※ 글꼴 참조 : fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
※ 참고해서 아이콘 가져다 쓰기 연습
https://www.w3schools.com/icons/fontawesome5_intro.asp
Font Awesome 5 Intro
Font Awesome 5 Introduction Font Awesome 5 Font Awesome 5 has a PRO edition with 7842 icons, and a FREE edition with 1588 icons. This tutorial will concentrate on the FREE edition. To use the Free Font Awesome 5 icons, you can choose to download the Font A
www.w3schools.com
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| background 속성 1 - 기본 (0) | 2021.01.25 |
|---|---|
| display 속성 2, 가시속성 (0) | 2021.01.25 |
| display 속성 (0) | 2021.01.22 |
| 문단과 관련된 속성 (0) | 2021.01.22 |
| 웹접근성을 위한 :focus (0) | 2020.08.25 |
