어제 HTML에 이어서 오늘은 CSS에 대해 알아보았습니다.
일단 어제 주셨던 과제는 오름캠프 홈페이지를 HTML 속성을 표시하기였습니다.
왼쪽은 미숙한 제가.. 진행한 것이고 오른쪽은 강사님 파일입니다.
여기까지만 알아보도록 하겠습니다.
ㅋㅋㅋㅋ
CSS (Cascading Style Sheets, 낙하)
스타일이 적용될 때는 우선순위를 가지고 적용됨
= 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양 (Cascade라는 단어가 생김)
작성한 HTML의 스타일이나 레이아웃 등을 꾸미는 역할
CSS를 한 번 작성해 여러 HTML에 재사용할 수 있음 (반복 작업 감소)
선택자(Selector) 요소에
{ 스타일 적용을 시작
속성(Property) - 이 속성에
: 대응 값은
속성값(Property Value) 이 값으로 지정
세미콜론(;) 해당 속성 선언(명령)을 끝
} 해당 요소에 대한 스타일 적용을 마침
/* 주석 사용은 한 줄, 여러 줄 모두 (/* */)로 작성 */
CSS 적용
1. 인라인 스타일
태그 자체에 style 속성으로 스타일을 주는 방식
일부 스타일 적용에 제한이 있음 (:hover, ::before, ::after와 같은 가상요소에는 사용불가)
<p style="color:yellow; background-color:black;">Hello wold</p>
2. 내부 스타일
head 태그 안 style 태그를 사용하여 스타일을 주는 방식
코드가 길어질수록 HTML 파일 길이가 길어지기 때문에 비효율적임
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>내부 스타일</title>
<style>
p {
color:yellow;
background-color:black;
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
3. 외부 스타일
link
현재 문서와 외부 리소스의 관계를 명시
빈 태그로 속성만을 포함
head 요소 내부에만 위치할 수 있음
rel (relations 관계), 대상 파일의 속성을 나타냄 (CSS 파일은 stylesheet)
href (hyper-references 경로), 연결 시 참조할 파일의 위치를 나타냄
<!-- HTML -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>외부 스타일</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello world</p>
</body>
</html>
/* CSS */
p {
color:yellow;
background-color:black;
}
= 해당 방법을 권장, HTML과 CSS를 분리 시 코드의 가독성과 효율성이 모두 높아짐
CSS 상속
ex)
<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</div>
1. 개별로 인라인 스타일 적용
<div>
<h1 style="color:red;">Hello</h1>
<h2 style="color:red;">Hello</h2>
<p style="color:red;">Hello</p>
</div>
2. 태그 선택자 적용
h1 {color:red;}
h2 {color:red;}
p {color:red;}
3. 그룹 선택자(,) 적용
h1,
h2,
p {color:red;}
4. 상속 적용
div {
color:red;
}
+ 상속 (Inheritance)
CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있음
앞에 본 div의 color 속성은 자식인 h1, h2, p에게 상속됨
= width, height, margin, padding, border와 같은 것은 상속되지 않음
div {
color: red;
border: 5px solid pink;
}
inherit : 선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 함
initial : 브라우저 기본 스타일 속성을 따름
+ button , input 요소처럼 form 관련 태그들은 상속받지 않기도 함 (브라우저별 적용 스타일이 있기 때문)
CSS 선택자
1. 전체 선택자 (universal selector) : html을 포함한 HTML 문서 내의 모든 요소 선택, (*) 사용
2. 타입 선택자 (type selector 태그, 요소 선택자) : 특정 태그를 선택
3. 아이디 선택자 (id selector) : HTML 안에서 한 번만 사용되기 때문에 재사용성 낮음, 아이디 속성은 JavaScript or 해시 링크와 함께 사용되는 경우가 많음, 주의할 점으론 HTML 페이지 내 id는 유일해야 함, (#) 사용
4. 클래스 선택자 (class selector) : 아이디 선택자와 다르게 한 페이지에 여러 개 존재 가능, 재사용성 높음, (.) 사용
+ id, class는 숫자로 시작하면 안 됨
= 하이픈(-)과 언더바(_) 문자로만 시작할 수 있음
5. 특성 선택자 : 주어진 특성을 가진 모든 요소를 선택, ([]) 사용
6. 그룹 선택자 : (,) 사용
7. 복합 선택자
7-1. 자손(하위) 선택자 : 자식과 자손 모두 선택 가능, 공백 (띄어쓰기)를 통해 구분함, ( ) 사용
7-2. 자식 선택자 : 직계자손만을 선택함, (>) 사용
7-3. 일반 형제 선택자 : 뒤에 나오는 형제만 선택, (~) 사용
7-4. 인접 형제 선택자 : 바로 뒤에 인접한 형제만 선택, (+) 사용
가상 클래스 선택자 (pseudo selectors)
선택자에 추가하는 키워드로 선택한 요소가 특별한 상태여야 만족할 수 있음
:link = 방문하지 않은 링크
:visited = 방문한 링크
:hover = 마우스 커서 올려놓았을 때
:active = 마우스로 클릭했을 때
:focus = 포커스 되었을 때
+ 구조적 가상 선택자
:first-child = 형제 요소 그룹 중 첫 번째 요소
:last-child = 형제 요소 그룹 중 마지막 요소
:nth-child = 형제 사이에서의 순서에 따라 요소를 선택할 수 있음
+ :not = 부정 선택자
/* 2번째 li */
li:nth-child(2) {
color: lime;
}
/* 홀수번째 li */
li:nth-child(odd) {
color: lime;
}
/* 짝수번째 li */
li:nth-child(even) {
color: lime;
}
/* 2n+1번째 li. (n은 0부터 1씩 증가)*/
li:nth-child(2n+1) {
color: lime;
}
/* li 중 첫 번째가 아닌 li */
li:not(:first-child) {
margin-top:20px;
}
CSS 선택자 우선순위 원칙
1. 후자우선의 원칙
동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따르게 됨
2. 구체성의 원칙 (Specificity 명시도)
어떤 선택자가 더 구체적인지
2-1 가중치
1. inline 스타일 속성
2. id (#)
3. class (.), 가상 클래스, 속성선택자
4. type (tag), 가상 요소 선택자
위 순서대로 가중치가 높음
2-2 우선순위 계산
inline-style == 1000점
id 선택자 (#) == 100점
class (.), 가상클래스, 속성선택자 == 10점
타입, 가상요소 선택자 == 1점
전체선택자 (*) == 0점
3. 중요성의 원칙
!important = 이 선언은 다른 CSS의 어떤 선언 보다도 우선함, 선택자 우선순위에 직접적인 영향을 줌
+ !important 사용은 좋지 못한 습관
= CSS의 자연스러운 상속을 깨트려서 오류나 버그 발생 시 수정을 어렵게 함
Display 속성
박스의 유형을 결정
박스의 유형을 지정하여 다른 박스들과 어떤 방식으로 배치할지 레이아웃을 설정
+ 주의할 점은 CSS 속성으로 시각적인 부분이 바뀌었을 뿐 태그 자체의 요소가 블록 레벨로 바뀐 것은 아님
block : 요소 전후에 줄 바꿈을 생성
inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성, 정상적인 흐름에서 공간이 있으면 다음 요소는 같은 줄에 있음
inline-block : inline 줄 바꿈 없이 한 줄에 놓이지만 block처럼 box-model의 width, height, margin, padding 값을 모두 설정할 수 있음
flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정
grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해(2차원적) 설정
none : 해당 속성은 접근성 트리에서 해당 요소가 제거, 해당 요소 및 해당 하위 요소가 사라지고 스크린리더에도 읽히지 않음
Box Model
HTML 요소를 감싸는 상자 (웹페이지는 수많은 상자가 모여 있는 것)
요소, 패딩, 테두리, 마진으로 구성
요소 : 텍스트, 사진 등 보여줄 대상
패딩 : 요소 주변 영역을 감쌈
테두리 : 요소와 패딩을 감싸는 테두리
마진 : 테두리 밖의 영역을 감쌈
= CSS box model은 블록박스에 적용
인라인 박스는 박스 모델에 정의된 일부 동작만 사용
inline 요소는 width, height, 상하 margin 값이 적용되지 않음
1. width
요소의 너비를 설정
기본값은 콘텐츠 영역의 너비이지만 box-sizing 속성을 사용하여 테두리 영역의 너비를 설정
auto : 기본값, 브라우저가 계산하여 지정 (요소의 부모 크기 기준으로 가득 채우기)
2. height
요소의 높이를 설정
auto : 기본값, 브라우저가 계산하여 지정 (요소의 자식 기준으로 조절)
3. padding
단축 속성
padding-top / padding-right / padding-bottom / padding-left 순으로 작성
p {
padding: 10px; /* top, right, bottom, left 모두 10px */
padding: 10px 20px; /* top, bottom :10px, left, right:20px */
padding: 10px 20px 30px; /* top:10px, left,right:20px, bottom:30px */
padding: 10px 20px 30px 40px;
}
4. margin
단축 속성
margin-top / margin-right / margin-bottom / margin-left 순으로 작성
/* 가운데 배치 */
p {
width: 400px;
margin: auto;
}
/* 오른쪽 배치 */
p {
width: 400px;
margin: auto 0 auto auto;
}
+ margin auto는 수평 정렬을 할 수 있지만, 세로 정렬을 적용할 수는 없음
마진병합 현상(Margin Collapsing)
1. 요소와 요소의 사이에 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상
2. 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상
마진병합 현상 해결방법
1. 부모 요소에 overflow 속성 값을 적용
2. 부모 요소에 display: inline-block 값을 적용
3. 부모 요소에 border 값을 적용
4. 부모 요소에 display:flow-root을 사용 (IE 지원 불가)
Q. 마진 병합 현상은 왜 일어나는 것일까?
A. 왜 발생하는지에 대한 정확한 내용은 mdn과 w3c 공식 문서에서도 서술된 바가 없음
가장 유력한 가설은 요소들의 수직 마진을 이용한 레이아웃을 쉽게 설정하기 위해서
5. border
테두리를 지정
테두리는 요소가 차지하는 전체 너비, 높이의 일부
단축 속성
선의 두께, 스타일, 색상을 지정할 수 있음
border-width / border-style / border-color
6. box-sizing
content-box : 기본값. width, height에 border, padding 포함하지 않음
border-box : width, height에 border, padding 포함
(width = 콘텐츠 너비 + border + padding)
7. overflow, overflow-x, overflow-y
박스보다 콘텐츠가 더 커 콘텐츠가 넘칠 경우 어떻게 처리할지를 지정
visible : 기본값. 박스를 넘는 콘텐츠를 자르지 않음
hidden : 요소의 크기만큼 맞추기 위해 잘라냄, 스크롤바 미제공
scroll : 요소의 크기만큼 잘라내고, 스크롤을 제공
auto : 자동으로 콘텐츠가 넘칠 경우 스크롤바를 노출
8. border-radius
상자의 모서리를 둥글게 처리
단축 속성
border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius
9. opacity
불투명도를 설정
0-1 사이의 숫자를 지정 (0: 투명 - 1: 불투명)
관련 파일은 아래 GitHub에서 확인해 주세요 :)
https://github.com/soohyun020812/ormcamp
GitHub - soohyun020812/ormcamp: 오름캠프 교육에서 활용한 실습 내용들 정리
오름캠프 교육에서 활용한 실습 내용들 정리. Contribute to soohyun020812/ormcamp development by creating an account on GitHub.
github.com