본문 바로가기

Frontend23

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.
CSS (기본, 인라인/내부/외부 스타일) ✔ CSS CSS(Cascading Style Sheets) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 ✔ 내부스타일 코드 DOCTYPE html> 내부 스타일 h2{font-size: 50px;} /* h2 요소의 사이즈를 50px로 설정*/ p{font-size: 25;} ul{list-style: none;} li{color: deeppink; font-weight: bold; display: inline-block; margin-right: 30px;} 내부 스타일 CSS를 사용하는 방법 인라인 스타일 내부 스타일 외부 스타일 ✔ 내부스타일 결과 ✔ 외부 스타일 3. 외부 스타일 웹 .. 2022. 10. 26.