🗂️ Day43 프로젝트: 개인 웹사이트3
개인 CV 웹사이트
🔍 유의 사항
- 🗂️ Day42 프로젝트: 개인 웹사이트 2의 업그레이드
- CSS 디자인 언어로 색상과 스타일 추가하기
❖ CSS
CSS(Cascading Style Sheets)
Style Sheets 또는 Style Language
- 자체적으로 아무것도 할 수 없다는 의미
- 유일한 용도는 마크업 언어(Day41 참조)를 꾸며주는 것
(html 등만 사용하여 레이아웃을 조작하면 발생하는 문제를 해결하기 위함)
❖ CSS 적용 방법
- 인라인 CSS, 내부 CSS, 외부 CSS 중 선택
- 웹 브라우저에 의해 default CSS가 적용된 요소도 있음 (CSS Default Values Reference)
- 사이즈 선택 방법
px: 언제나 같은 픽셀로 하드코딩됨%: viewport(웹사이트를 보는 화면) 크기 대비 비율로 계산
- CSS 파일에서 주석 달기
/*주석*/- 주석 부분은 프로그램에서 무시됨
- 여러 줄에 걸쳐서 작성 가능
- 크롬 확장 프로그램 Pesticide for Chrome 추천
- 웹페이지의 존재하는 거의 모든 것들은 상자로 이루어짐 → 상자를 표시해 주는 프로그램
- CSS 코드 변경으로 상자의 속성 변경
◇ 인라인 CSS
- HTML 태그 안에 직접 지정하여 적용
- 직접 지정한 해당 요소에만 적용되므로, 특정 요소에만 적용되는 스타일 지정에 사용됨
- 코드가 복잡해지므로 꼭 필요한 경우만 사용
페이지 배경색 변경
<body style="background-color: #EDDFE0;">background-color 에 색상이름(named-color) 또는 #헥스코드 입력
수평선 색 변경
<hr style="border-style: none; border-top-style: dotted; border-color: #F5F5F7; border-width: 5px; width: 5%;">border-style 로 4면의 테두리 지정 (테두리를 none으로 제거하면 높이도 0이되어 면적이 사라짐)
border-top-style 로 윗면의 테두리만 따로 지정
border-color 로 선 색상 지정
(border-style)
width 로 너비 지정
◇ 내부 CSS
- HTML head 섹션 안에
<style>태그 추가- 스타일 태그 안에서 영향을 주려는 HTML 요소를 선택
- 한 웹페이지의 전체에 CSS 코드를 구현 가능
- 해당 HTML 문서에만 적용됨
🏗️ index.html
…
<head>
<meta …>
<meta …>
<title>…</title>
<style>
body {
background-color: #EDDFE0;
}
hr {
border-style: none;
border-top-style: dotted;
border-color: #F5F5F7;
border-width: 5px;
width: 5%;
}
</style>
</head>
…◇ 외부 CSS
- 웹사이트 전체의 스타일을 한 곳에서 모두 변경하는 방법
- 일반적으로는 모든 스타일을 외부 CSS에서 구현하는 것이 바람직함
- 프로젝트 파일 안의
📁 css폴더, 폴더 안의🎨 styles.css파일에서 작업 - 스타일을 적용하고 싶은 HTML 문서에 외부 스타일 시트를 연결하는 링크 넣기
🎨style.css
body {
background-color: #EDDFE0;
}
h1 {
color: #4f3f38;
}
h3 {
color: #705C53;
}
hr {
border-style: none;
border-top-style: dotted;
border-color: #F5F5F7;
border-width: 5px;
width: 5%;
}🏗️ index.html, hobbies.html, contact-me.html
…
<head>
<meta …>
<meta …>
<title>…</title>
# rel은 relationship의 약자
<link rel="stylesheet" href="css/styles.css">
</head>
…href 를 / 로 시작하면 웹사이트의 루트를 가리킴(나중에 JS 적용 시 / 넣기)
❖ CSS 코드 디버깅
Chrome 브라우저 → 보기 → 개발자 → 개발자 도구 활용
◇ 파일 경로 오류
스타일이 적용 안 된 부분 우클릭 → 검사 → 개발자 도구 하단의 Console 에서 문제 확인
파일 경로를 올바르게 수정
◇ 스타일 적용 오류
개발자 도구 의 <body> → Style 에서 해당 웹페이지에 적용되는 모든 CSS 확인
인라인 스타일이 가장 높은 우선순위로 적용되기 때문에 낮은 우선순위들에 취소선 그어짐
(체크박스를 적용/해제하여 변화를 확인 가능하나 로컬에서만 가능하므로 실제 코드는 변경되지 않음)
💡스타일 적용 우선순위 : 인라인 스타일 > 내부 스타일 > 외부 스타일 > 웹 브라우저 기본 스타일
❖ CSS 구문의 구조
selector { property: value; }
- selector(선택자) → WHO? : 어떤 것을 수정할 지
- { } → CSS 규칙들이 들어가는 곳
- property(속성) → WHAT? : 무엇을 바꿀 지
- : → 속성과 값 구분
- value(값) → HOW? : 어떻게 바꿀 지
- ; → 각 규칙의 마지막(마침표와 같음)
예) h1{color: red;}
💡 규칙 목록에서 원하는 것을 쉽게 찾기 위해 보통 알파벳 순으로 나열(CSS reference A-Z)
❖ CSS 선택자
태그 선택자와 클래스 선택자의 차이
태그(tag) 선택자
- 한 종류의 선택자에 적용한 스타일이 일괄적용됨
- 구체적인 스타일 적용에는 적합하지 않음
🎨style.css
h1 {…}
img {
background-color: red;
}
모든 이미지의 배경이 빨간색으로 변경
클래스(class) 선택자
- 웹사이트를 보다 구체적으로 변경하기 위해 사용하는 선택자
- 서로 다른 모든 HTML 요소를 구분
🏗️ index.html
…
<img class="bacon" src="이미지 주소" alt="bacon">
<img class="broccoli" scr="이미지 주소" alt="broccoli">
…각 태그에 클래스 속성으로 선택자 이름 지정
🎨style.css
h1 {…}
.bacon {
background-color: green;
}
.broccoli {
background-color: red;
}선택자 이름 앞에 . 입력 (스펠링 주의)
❖ 클래스 vs 아이디
클래스 선택자와 아이디 선택자 비교
공통점- 두 클래스 모두 태그 선택자를 오버라이드 한다
- 우선순위가 태그 선택자보다 높다는 의미
- CSS 파일에 태그 선택자와 같이 입력해도 태그 선택자는 무시됨
- 스타일 적용에 있어서는 클래스나 아이디나 상관 없음
- 두 클래스 모두 태그 선택자를 오버라이드 한다
차이점- class
- CSS 파일에서 .선택자 {} 로 사용
- 한 페이지에서 여러 요소에 같은 클래스 이름을 지정 가능
(유사한 동작 또는 스타일을 갖는 모든 관련 요소들을 그룹화할 수 있음) - 한 HTML 요소는 둘 이상의 클래스를 가질 수 있음
- id
- CSS 파일에서 #선택자 {} 로 사용
- 한 아이디 이름은 한 페이지에서 단 한 번만 사용 가능
- 한 HTML 요소는 오직 하나의 아이디만 가질 수 있음
- 상대적으로 드물게 사용되는 선택자
- class
🏗️ index.html
…
<h1 id="heading big">I love bacon</h1>
…
<img class="bacon" src="이미지 주소" alt="bacon">
<img class="broccoli circular" src="이미지 주소" alt="broccoli">
…🎨style.css
#heading {
color: blue;
}
#big {
font-size: 1000px;
}
.bacon {
background-color: green;
}
.broccoli {
background-color: red;
}
.circular {
border-radius: 100%;
}id : h1 제목에 글자색과 글자크기를 변경하는 아이디 두개를 동시에 지정
class : 브로콜리 이미지에 배경색과 테두리 모양을 변경하는 클래스를 두 개를 동시에 지정
id는 아무 것도 적용되지 않아 브라우저 기본 스타일로 돌아옴
class는 모두 정상적으로 적용됨
❖ 의사 클래스
pseudo-class
- HTML 요소의 다른 상태를 명시하기 위해 사용
예) 텍스트나 이미지 위로 마우스 커서를 놓으면 다른 상태로 변함 - 앞에 : 이 붙음
- 가장 많이 사용되는 것은
:hober의사 클래스
🎨style.css
…
img:hover {
background-color: gold;
}
.bacon {…}
.broccoli {…}
마우스를 올리면 배경색이 변함
