[front-end]/CSS 3

Semantic

웹에 자주 사용되는 요소 1. table 2. div>ul>li 3. semantic web = 의미있는 웹(사람이나 기계가 쉽게 이해할 수 있는 웹) div>ul>li를 활용해서 웹 페이지를 만드는 방법 여기는 헤드 부분(로고) 여기는 메뉴가 나오는 부분 여기는 내용이 나오는 부분 여기는 맨 아래 주소등이 나오는 부분 - float로 위치 정하기 - width %로 일정 비율로 고정 Semantic tag 구조 ---------------------------------- header ---------------------------------- nav section aside article article ---------------------------------- footer ------------..

[front-end]/CSS 2021.01.11

CSS 속성

font: bold 20pt serif,sans-serif; 굵기, 크기, 글꼴(첫번쨰 글꼴이 없으면 그 다음 글꼴 사용) 순 text-shadow: 3px 3px 5px #777777; 글씨 그림자 효과 1. x쪽으로 이동 2. y쪽으로 이동 3. 번짐(blur, 숫자가 클수록 더 번짐) 4. 그림자 색 box-shadow: 10px 10px 3px #0000FF; 박스 그림자 효과 위와 동일 border: 3px dotted blue; 경계선두께 경계선디자인 경계선색 경계선디자인은 dotted(점선) dashed(조금긴 점선) double(얇은선 두개) groove(굵은선) inset ridge outset(태극기처럼 대각선으로 나뉨) solid(그냥 선) 등이 있음 table과 table안에 있는 ..

[front-end]/CSS 2021.01.08

CSS

1) css 는 rgb로 색을 표현 - rgb: red green blue 빛 - 표현방법: 1. #ffff00 두개씩 나눔 (00~FF) 2. rgba(255,255,0,0.5) ,로 나눔 3. blue 이렇게 바로 해도 됨 rgba의 a(alpha)는 투명도, 0.0~1.0(투명~불투명) 0.0 fully transparent and 1.0 fully opaque 클래스1 클래스2 아이디1 2) border padding margin border는 테두리 크기 padding은 글씨와 테두리와의 간격 margin은 두 테이블 사이의 간격(둘다 겉의 테두리) padding:20px (상우하좌 4개 모두 20px) padding:20px 30px (상 우) (상하 20 좌우 30) padding:20px ..

[front-end]/CSS 2021.01.05