섹션6 CSS
CSS : cascading style sheets.
연속되는 스타일시트
언어와 같지만 프로그래밍 언어는 아니고 문서는 시각적으로 표현하기 위해 사용하는 언어.
css는 방대하다.
css 룰이 필요하다. 대부분 이렇다.
selector {
property: value;
}다음과 같이 쓴다.
h1 {
color: purple;
}img {
width: 100px;
height: 200px;
}css 방대하다.
borderline 관련된것만 50개. 전부 외울필요는 없다.
많이 사용하는 것은 자연스럽게 외워진다.
잘 모르는 건 구글링하면 나온다. mdn같은데 잘 나온다.
css예시를 보여주는 사이트도 많다.
css는 어디에 작성할까?
- html요소에 인라인으로 같이 쓰는 것 → 비추천. 매번 같은 내용 또 쳐야함.
<style>엘리먼트로 쓰는 것 → 비추천. 다른 페이지에 같이 쓸수 없음.- 외부 스타일 시트에서 스타일 작성 → 추천. 별개의 새 파일을 만든다. .css 파일.
<link> 를 이용해 css 파일을 연결해준다.
link + tab 을 누르면
<link rel="stylesheet" href="styles/app.css">식으로 된다. 만든 css파일 주소를 넣어준다.
<link> 태그는 항상 <head>에 넣는다.
색상 시스템
이름이 있는 색상은 140개 → 모든 브라우저에서 같은 색
- RGB
red, green, blue로 나누어 표현. 0-255까지 각각 값을 준다.
rgb(255,0,0)
rgb(0,0,255)이런식으로 색을 표현한다.
색상 팔레트 color picker 같은데서 선택해서 쓴다.
- Hex
rgb와 비슷. 0-255, 근데 16진법으로 표현
0-9 + A,B,C,D,E,F F는 15다.
#ffff00#뒤 여섯글자중 두개씩 red, green, blue
00에서부터 ff 까지. ff는 255를 의미한다.
#는 해시기호. 옥토토르프라고 부르기도 하고 파운드기호라고 부르기도함
같은 숫자로만 이루어지면 3개의 16진수만 써도됨. #cc55ee → #c5e 로 줄여도 된다
세미콜론
p {
color: olive;
}olive뒤에 세미콜론 ; 은 필수사항.
특성 선언을 마치고 다음 특성으로 넘어간다는 뜻.
뭔가 안 돌아가면 세미콜론이 빠지지 않았는지 확인.
텍스트 속성
text properties
텍스트 정렬 : text-align
굵기: font-weight; 모든 폰트가 굵기 조절이 가능하지는 않다
밑줄: text-decoration: underline;
윗줄: text-decoration: overline;
취소선: text-decoration: line-through;
blue underline; 이라고 하면 파란색 밑줄도 가능.
점선, 물결선, 실선도 가능.
text-decoration: none; 으로 하면 링크에 밑줄 뺄수있다.
줄간격: line-height;
line-height: 2.5; 그냥 숫자만 넣으면 폰트 크기의 2.5배
자간(글자간 간격): letter-spacing
font-family
요소의 폰트를 바꿀때 사용한다.
sans-serif 폰트 패밀리 안에 여러 폰트가 있음.
브라우저에 빌트인 된 폰트가 아닌 사용자 지정 폰트를 사용하려면 설치 또는 삽입해야. 그전까지는 브라우저 폰트나 웹 안전 폰트를 써야한다.
font-family: Arial;font stack: 사용하려는 폰트를 순서대로 적은 목록
font-family: Segoe UI, Futura;Segoe UI가 없으면 Futura로 적용된다. sans-serif로 적으면 sans-serif 안에 있는 폰트중 가능한거 아무거나.
내가 만든 페이지의 폰트가 사용자에게 없는 경우 차선으로 뜨게 만들수 있음. 보통 1-2 정도 백업을 넣는다. 제네릭 대체 폰트로 타입을 지정해 백업을 넣는게 좋다.
단위
px: 픽셀. 가장 흔히 쓰이는 절대단위. 절대단위란 어디에 넣어도 최종 결과 크기가 같다는 뜻.
픽셀은 디스플레이 크기에 따라 다를수 있다. 반응형 웹사이트엔 추천하지 않는다.
