HTML, CSS, JavaScript/CSS (15) 썸네일형 리스트형 글꼴 폰트 관련 스타일 ▶ 글꼴 폰트 관련 스타일font-size- 글꼴의 크기를 지정하는 속성- px : 픽셀(화면 해상도) / pt : 포인트(1pt = 0.72인치) / % : 상위 요소 크기에 대한 백분율 / em : 1em = 100% 픽셀(px) 포인트(pt) 퍼센트(%) em #size-test>li:nth-child(1){font-size: 15px;}#size-test>li:nth-child(2){font-size: 25pt;}#size-test>li:nth-child(3){font-size: 130%;}#size-test>li:nth-child(4){font-size: 2em;}/* 크롬 브라우저 기준 기본 글꼴 크기 : 16px */f.. 글자 관련 스타일 ▶ 글자 관련 스타일color - 글자 색을 지정하는 속성- 선택자{ color : 색상명(영문) | 16진수 숫자 | rgb | rgba | hsl | hsla}※ rgba에서 a는 투명도(0: 투명, 1: 불투명) / hsl(색조, 채도, 밝기) / 6개의 색상 지정 방법은 색과 관련된 모든 CSS 속성에서 사용 가능 색상명으로 지정 16진수 rgb로 지정 rgb로 지정 rgba로 지정 hsl로 지정 hsla로 지정 /* color 속성 */#color-ul>li{ font-size: 24px; font-weight: bold;}#color-ul>li:first-child{color: red;}#c.. flex 스타일 3 item 전용 속성- order : item의 순서를 지정하는 속성 item1 item2 item3 item4 item5.flex-container{ height: 400px; background-color: #ddd; display: flex;}/* ************** *//* order *//* ************** *//* flex-container 내부 item의 순서를 지정하는 속성 (기본값 0, 정수, 양수/음수 가능)*/.order1{order: 5}.order2{order: 3}.order3{order: 4}.order4{order: 2}.order5{order: 1}flex-gr.. flex 스타일 2 flex-wrap: wrap | wrap-reverse; 배치 방법flex 실습을 위한 CSS 스타일 설정.flex-container{ height: 75vh; /* 현재 화면의 75%만큼의 비율 */ /* vh : Viewport Height (현재 화면 높이) Viewport : 브라우저 또는 기기 화면 */ background-color: #eee; display: flex; flex-wrap : wrap;flex-wrap : wrap | wrap-reverse; 배치 방법 (div.item.item${item$}*9)*2 --> item1 item2 item3 item4 item5.. flex 스타일 1 flex 실습을 위한 기본 CSS Style 설정div{ border: 1px solid black; box-sizing: border-box; /* content + padding + border 합으로 width/height 지정 */}.item{ width: 75px; height: 75px;}.item1{ background-color: red; }.item2{ background-color: orangered; }.item3{ background-color: orange; }.item4{ background-color: yellow; }.item5{ background-color: yellowgreen; }.item6{ background-color: green; }... 레이아웃 스타일4 배치 관련 스타일- position은 요소의 위치를 지정하는 속성- position: relative;: 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성: 내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성을 사용할 수 있음- position: absolute;: 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함- position: fixed;: 항상 고정된 위치에 요소를 배치함. (화면 움직임에 상관없이 항상 같은 위치) div{ border: 1px solid black; box-sizing: border-box; /* width / height 값이 content + pad.. 레이아웃 스타일 3 ▶ 요소 정렬 스타일요소 정렬 스타일1) float : 요소를 띄워서 좌/우로 정렬하는 속성2) clear : float로 인해 띄워져 있는 상태를 해제하는 속성 ( float 사용 시 겹침 문제가 발생하는데 이를 해결할 수 있음)기본 형태 1 2 3 4 Hello World 5 float : left; 1 2 3 4 Hello World 5 6 test 7 float-right 1 2 .. 레이아웃 스타일2 ▶ 요소의 영역(여백) 관련 속성HTML 요소는 총 4가지 영역으로 구성되어 있음content 영역- 요소의 내용이 작성되어지는 영역 : 시작태그와 종료태그 사이에 작성되는 내용padding 영역- content 영역과 border 영역 사이border 영역- 요소의 테두리가 지정되는 영역- content 보다 바깥쪽에서 content를 감싸고 있음margin 영역- 다른 요소와의 간격을 나타내는 영역기준내용border 영역내용content 영역내용padding 영역내용margin 영역내용내용.box{ width: 100px; height: 100px; background-color: lightcoral;}/* content 영역 */.content{ width: 150px; .. 이전 1 2 다음