css 란?
CSS 는 (Cascading Style Sheets)
HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다.
여기서 Cascading 캐스캐이딩이란 사전적 의미로는 작은 폭포를 뜻하는데
CSS 에서 사용하는 의미는 다르다.
하나의 문서가 이미 내장하고 있는 스타일 정보가
우선순위가 가장 큰 스타일시트를 적용할 수 있도록 하는데 이것을 캐스캐이딩이라고 한다.
스타일 규칙이 요소에 적용되는 방식을 정의
1. 우선순위
!important: !important 키워드가 적용된 스타일이 가장 높은 우선 순위를 갖습니다.
Inline 스타일: 요소에 직접 적용된 인라인 스타일이 그 다음 우선 순위를 갖습니다.
ID 선택자: ID 선택자로 지정된 스타일이 인라인 스타일보다 우선합니다.
클래스 선택자, 속성 선택자, 가상 클래스 선택자: ID 선택자보다는 우선합니다.
요소 선택자, 가상 요소 선택자: 클래스 선택자보다는 우선합니다.
전체 선택자: 가장 낮은 우선 순위를 갖습니다.
2. 상속
스타일 규칙이 요소에 적용되면, 해당 요소의 자식 요소들은 부모 요소로부터 스타일을 상속받습니다. 상속되는 속성은 폰트 스타일이나 텍스트 색상과 같은 일부 속성에 한정되며, 모든 속성이 상속되는 것은 아닙니다. 자식 요소에서 명시적으로 스타일을 지정하면 상속된 스타일이 덮어씌워집니다.
Cascading은 CSS의 강력한 기능 중 하나로, 스타일 규칙을 유연하게 조합하고 조작할 수 있도록 합니다. 올바른 우선 순위와 상속을 이해하고 사용함으로써 원하는 스타일을 적용하고 요소 간의 일관성을 유지할 수 있습니다. 그러나 복잡한 스타일 규칙이나 우선 순위 충돌은 예기치 않은 결과를 초래할 수 있으므로 주의가 필요합니다.라고 하는데... 글만 봤을 때는 아직 잘 모르겠다. ^-^
아무튼, 스타일 규칙의 우선 순위 및 상속에 따라 스타일이 결정되는 방식을 의미! 한다 정도로 알아두자.
오늘 공부한 내용은 HTML 에 CSS 연결하기!
HTML 에 CSS 연결하기
<link rel="stylesheet" href="styles.css" >html에 css 를 사용할 때 부분에서 Link 를 사용해 파일을 연결한다.
링크는 스타일 시트를 연결할 때 가장 많이 사용하는데
이 때, link 만 사용하는 것이 아니라 rel, href 를 사용한다.
rel = relation 관계
파일을 연결할 때 이 파일과 현재 파일의 관계를 정의함.
그래서 = 다음에 불러올 파일을 현파일과 어떠 관계로 정의할 것인가.
rel stylesheet 즉 style.css 가 스타일을 담당함.
href = hyper reference 하이퍼 참조
하이퍼는 하이퍼링크를 떠올리면 된다.
그래서 = 다음에는 참조할 파일명을 쓴다.
style.css 파일을 연결해 사용할 것임.
CSS 적용하기
저번에 만든 HTML 에 색상, 폰트, 링크삭제, 볼드처리를 적용해 보자.
먼저 배경색과 전체 폰트 지정하기.
body에 {} 열어
background-color
font-family 를 지정해 준다.
헤드라인 제목 색상을 지정해 준다.
h1 {
color:
}
하이퍼링크 밑줄 제거하기
a{
text-decoration-line: none;
}
등등 CSS 명령어들을 작성하여 적용하면 된다.
vscode에 작성하면 자동적으로 검색이 되기도 하고,
색상 및 활용법은 아래 링크를 참고하자!
주요 스타일 속성
주요 스타일 속성
color: 텍스트 색상 지정background-color: 배경색 지정font-family: 글꼴 지정font-size: 글자 크기 지정margin,padding: 요소 주위의 여백 및 안쪽 여백 지정border: 테두리 지정width,height: 요소의 너비와 높이 지정display: 요소의 표시 방식 지정 (예:block,inline,flex등)
내가 적용한 CSS
/* css */
body{
background-color: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color:#3498db;
}
a{
text-decoration-line: none;
}
ul {
font-size: 18px;
margin: 10px;
}
/* 모든 단락과 목록 항목을 녹색으로 만들려면 ,쉼표로 선택자를 구분하기.*/
p,
li {
color: #6495ED;
} 
- 일부 적용한 이미지
- css 공부 이어서 계속!
#오즈캠프 #베이스캠프
