CSS 1.Basic
CSS
- Cascading Style Sheets
html5 vs CSS vs Javascript
- HTML5 : 내용
- CSS3 : 스타일
- Javascript : 동작
Cascading?
- 연속적인, 계속되는이라는 뜻
- 연속되는 작은 폭포들처럼 위에서 아래로 순차적용
- 하나의 요소에 여러개의 CSS가 충동할 경우 우선순위(가중치)가 계산되고 계산결과에
따라 CSS충돌이 처리된다
- 가중치 : 인라인CSS > STYLE에 정의된 CSS > 외부 CSS파일
장점
- 한번에 여러페이지의 레이아웃을 제어할 수 있음
- 별도의 css파일로 생성 가능 외부 스타일 시트
- 개발 시간 단축 및 공유 가능
- 거대하고 복잡한 사이트를 관리할 때 필요
기능
selectors : 디자인을 어디에 넣을지
- element :
body{color: green;}
- id(#)
.#target{color: red;} <p id="target">블라블라</p>
- 속성 : 그룹 h1,h2,h3 {color:red;}
- Class(.)
<p class="target">블라블라</p> .target{color: red;}
- 자손, 자식 선택자
- 선택자 : s1, s2
- s1 요소에 포함된 s2요소를 선택한다 (후손 관계)
body em{color:red;} : body안의 em요소
- 선택자: s1 > s2
- s1요소의 직계 자식 요소인 s2를 선택한다. (자식 관계)
body > h1 {color:blue;} : body안의 h1요소
- 의사 클래스(pseudo) : 클래스가 정의된 것처럼 간주, 상태나 구조에 의해서 선택이 이루어짐
a:link{color:blue;}a:visited{color:green;} : 링크 한번 눌러서 다녀온 후a:hover{color:red;} : 커서 올렸을 때- td:nth-child(2n) => 0 2 4 6 8
- td:nth-child(2n+1) => 1 3 5 7 9
- td:nth-child(2n+2) => 2 4 6 8
삽입
External Style Sheet
<link type="text/css rel="stylesheet" href="mystyle.css">- 스타일 시트를 외부에 파일로 저장하는 것
- 많은 페이지에 동일한 스타일을 적용하려고 할 때
- 외부 스타일 시트를 변경하려면 모든 HTML 문서가 영향을 받음
Internal Style Sheet
<head>
<style>
h1 { color: red; }
p { color: pink; }
</style>
</head>
Inline Style Sheet
<body>
<h1 style="color: red">This is a head line.</h1>
<p style="color: yellow">This is a paragraph.</p>
</body>
- 각각의 HTML 요소마다 스타일을 지정하는 것
- 2개 이상의 선언이 있다면 반드시 끝에 ;을 적어준다
다중 스타일 시트
- 하나의 요소에 대하여 외부, 내부, 인라인 스타일이 서로 다르게 지정하고 있다면 어떤 스타일이 사용될까?
- 인라인 스타일 시트
- head 섹션에 저장된 외부스타일 시트와 내부 스타일 시트
- 웹 브라우저의 디폴트 값
- HTML에 헤드 섹션에 외부 CSS, 내부 CSS가 둘 다 기재되어 있는 경우
뒤에 선언된 CSS로 적용됨
- 공통적으로 사용되는 스타일은 body요소의 스타일에 정의하는 것이 편리하다
CSS의 속성들
color
- 이름 : red
- 16진수 : #FF0000(rr/gg/bb)
- 10진수 : rgb(255,0,0)
- 퍼센트 : rgb(100%,0%,0%)
- 10진수, 투명도 :rgba(255,0,0,0.5)(퍼센트 가능)
font
- font: 한줄에서 모든 폰트 속성을 설정할 때 사용
- font-family : 패밀리 설정, 브라우저에서 글꼴을 지원하지 않을 경우를 대비해 대체 글꼴을 지정
- font-size : 폰트 크기
- font-style: 스타일 설정, 기울임꼴(normal, italic, oblique)
- font-weight: 볼드체(normal, bold)
font-family
- serif : 우아하고 전통(Times New Roman, Georgia, Garamond)
- san-serif: 깔끔, 가독성(Arial, Veranda, Trebuchet MS)
- monospace: 타자기서체(Courier New, Lucida Console)
- cursive, fantasy : 장난스러우며, 스타일리쉬
- font-family : 폰트의 종류 속성
- "Times New Roman" : 가장 선호하는 폰트 (폰트 띄어쓰기 있으면 "" 묶어줘야함)
- serif : 마지막에는 항상 일반적인 폰트를 지정해야 한다.
font-size
- pt:포인트
- px:픽셀
- %:퍼센트
- em:배수(scale factor)
- 키워드: xx-small, x-small, small, medium, large, x-large, xx-large
텍스트
텍스트 스타일
- color
- direction : 입력태그에서 작성방향 지정 (rtl: 오>>왼, ltr:왼>>오)
- letter-spacing: 글자간 간격
- line-height: 텍스트 줄의 높이
- text-align : 텍스트의 수평 정렬 (center, right, justify(양쪽정렬),...)
- text-decoration:텍스트 장식 (overline, line-through, underline)
- text-indent: 들여쓰기
- text-shadow : 그림자효과
- text-transfrom: 대소문자 변환(upper, lower, capit)
Word Wrapping
따라 CSS충돌이 처리된다
- 가중치 : 인라인CSS > STYLE에 정의된 CSS > 외부 CSS파일
body{color: green;}.#target{color: red;} <p id="target">블라블라</p><p class="target">블라블라</p> .target{color: red;}- 선택자 : s1, s2
- s1 요소에 포함된 s2요소를 선택한다 (후손 관계)
body em{color:red;}: body안의 em요소
- s1요소의 직계 자식 요소인 s2를 선택한다. (자식 관계)
body > h1 {color:blue;}: body안의 h1요소
a:link{color:blue;}a:visited{color:green;}: 링크 한번 눌러서 다녀온 후a:hover{color:red;}: 커서 올렸을 때- td:nth-child(2n) => 0 2 4 6 8
- td:nth-child(2n+1) => 1 3 5 7 9
- td:nth-child(2n+2) => 2 4 6 8
<link type="text/css rel="stylesheet" href="mystyle.css"><head>
<style>
h1 { color: red; }
p { color: pink; }
</style>
</head><body>
<h1 style="color: red">This is a head line.</h1>
<p style="color: yellow">This is a paragraph.</p>
</body>- 인라인 스타일 시트
- head 섹션에 저장된 외부스타일 시트와 내부 스타일 시트
- 웹 브라우저의 디폴트 값
- HTML에 헤드 섹션에 외부 CSS, 내부 CSS가 둘 다 기재되어 있는 경우
뒤에 선언된 CSS로 적용됨
다중컬럼
Author And Source
이 문제에 관하여(CSS 1.Basic), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zhyun1220/CSS-1.Basic저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
