본문 바로가기

CSS14

CSS 배경 종류 ✔ CSS 배경 CSS 배경 background-color HTML 요소의 배경색을 설정 ✔ CSS 배경 코드 DOCTYPE html> CSS 배경 1 body {background-color: deepskyblue;} div {background-color: white;width: 60%;padding: 20px;border: 3px dotted red;} CSS 배경 1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse eligendi molestiae harum deserunt vel. Sequi illo illum maxime labore. Sapiente cupiditate explicabo perferendis arc.. 2022. 10. 31.
CSS 텍스트 종류 ✔ CSS 컬러 CSS의 컬러 1. 색상 이름으로 표현 deeppink, deepskyblue, red, blue.. 2. RGB 색상값으로 표현 rgb(0~255, 0~255, 0~255) - 0에 가까울수록 그 색상이 연하게 나온다고 생각 -> rgb(0, 0, 255) - 파랑 rgba(0~255, 0~255, 0~255, 0~1의 소수) - 투명,불투명 효과 추가할 3. 16진수 색상값으로 표현 #0000ff(파랑) #00 00 ff -> #00f R G B ✔ CSS 텍스트 CSS의 텍스트 color 텍스트의 색상을 설정, 기본색은 검정색 letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 안 녕 하 세 요 . 오 늘 은 화 요 일 화 가 나 네 요 . word-spacing 텍스.. 2022. 10. 27.
CSS 선택자(그룹, 자손, 자식, 일반 형제, 인접 형제, 속성, 가상) ✔ 그룹 선택자 1. 그룹 선택자 여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용 h2, p {text-align: center;} 제목 HTML 구조 안녕하세요 를 알아볼게요 HTML구조 ✔ 그룹 선택자 코드 DOCTYPE html> 그룹선택자 h2,p,h3,ul {text-align: center;} h2 {color: deepskyblue;font-size: 50px;} li {display: inline-block; margin-right: 30px; font-weight: bold; color: deeppink;} 그룹선택자 여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용 선택자의 종류 전체 요소 아이디 클래스 그룹 ✔ 그룹 선택자 결과 ✔ 자손 선택자 2. 자손 선택자 조상요.. 2022. 10. 27.
CSS (상속, 전체/ id /class 선택자) ✔ 상속 ✔ 상속 부모 요소의 속성값이 자식 요소에게 전달되는 것 과제. 본인의 홈페이지에 아래와 같이 적용 index.html : 대문 index.html 메뉴 [홈(index.html) 인터넷기사(news.html) 이력서(resume.html) 즐겨찾기(favorite) ] 즐겨찾기 본인이 자주가는 웹사이트 3개이사 소개하는 페이지(iframe 적용) ✔ 상속 코드 DOCTYPE html> 상속 div{ color: deeppink; border : 3px dotted gold; padding: 30px; } 상속 div 영역 상속이란 부모 요소의 속성값이 자식 요소에게 전달되는 속성 ✔ 상속 결과 ✔ 전체 선택자 선택자 1. 전체 선택자 스타일을 모든 요소에 적용 * { padding: 0; ma.. 2022. 10. 26.