CSS
CSS 기본
CSS 란?
레이아웃과 스타일을 정의할 때 사용한다. HTML에는 스타일을 제외한, 문서의 구조만이 명확히 나타나야 한다.
CSS 문법
/*
selector {
property: value;
}
*/
#bodytitle {
font-size: 14px;
font-weight: bold;
color: DarkSlateGrey;
}
CSS 사용법
- 내부 스타일 시트 (Internal Style Sheet) : head 안쪽, style 태그 내부에 작
- 인라인 스타일 시트 (Inline Style Sheet) : 요소의 style 속성에 정의, 내용과 스타일이 분리되지 않으므로 권장하지 않음.
- 외부 스타일 시트 (External Style sheet) : link 태그를 사용하여 외부 CSS 파일을 HTML 문서에 연결
<head>
<title>CSS 기본</title>
<!-- 내부 스타일 시트 -->
<style>
#internal-style {
font-size: 14px;
font-weight: bold;
color: red;
}
</style>
<!-- 외부 스타일 시트 -->
<link rel="stylesheet" href="css/css-basic.css">
</head>
<body>
<p id="internal-style">Internal style sheet</p>
<!-- 인라인 스타일 시트 -->
<p id="inline-style" style="font-size:14px; font-weight:bold; color:green">Inline style shee</p>
<p id="external-style">External style sheet</p>
</body>
개발자 도구 (크롬)
요소 (Elements)
요소 혹은 태그도 거의 같이 쓰인다. 구별하자면 태그로 만들어진 결과물을 요소라고 부른다.
- 검사기 :
cmd + alt + i - 요소 선택 :
cmd + shift + c - styles 탭 > element.style : Inline style sheet로 적용 됨
- styles 탭 > new style rule : 현재 요소를 특정하는 선택자를 자동으로 생성
콘솔 (Console)
링크로 불러오는 파일이 없는 경우, 이 곳에 에러 메시지가 표시된다. 또한, 브라우저에서 자바스크립트를 실행할 수 있다.
CSS 선택자
전체 선택자
* (Asterisk)
HTML 페이지 내부의 모든 요소에 같은 CSS 속성을 적용한다. 다만 문서의 모든 요소를 읽기 때문에 페이지 로딩시간이 길어질 수 있으니 자주 사용하지 않는다.
* {
padding: 0;
margin: 0;
}
태그 선택자
태그명
태그명에 해당하는 HTML 태그 요소를 지정한다.
/*태그 선택자*/
h1 {
color: red;
}
클래스 선택자
. (마침표 기호)
HTML에서 주어진 값을 class 속성 값으로 가진 요소를 선택한다. 마침표 앞에 태그를 붙여주면 지정한 태그 범위에 한한다.
.section {
color: #333;
margin-bottom: 40px;
}
p.section-title {
font-size: 18px;
}
ID 선택자
#
HTML에서 주어진 값을 id 속성 값으로 가진 요소를 선택한다. 클래스 선택자와 같이 태그를 입력할 수 있다. ID 선택자가 클래스 선택자보다 우선순위가 높으므로, 같은 속성에 서로 다른 값을 지정할 경우 ID 선택자의 값이 적용된다.
#index-title {
font-size: 18px;
}
p#index-description {
font-size: 12px;
color: #999;
}
그룹 선택자
, (쉼표)
여러 선택자에 같은 스타일을 적용하는 경우, 쉼표로 구분해 선택자를 나열한다.
#index-title, #index-description {
text-align: center;
}
복합 선택자 (Combinator Selector)
포함 관계를 가지는 태그들 사이에서 포함하는 요소는 부모요소, 포함되는 요소는 자식요소라고 한다.
- 하위 선택자(descendant selector) : ` ` (공백), 모든 하위 요소를 지정
- 자식 선택자(child selector) :
>, 바로 아래 자식 요소만 지정
/* 하위 선택자 */
section ul {
border: 1px solid black;
}
/* 자식 선택자 */
section > ul {
border: 1px solid green;
}
<!-- HTML Hierarchy -->
<section>
<p></p>
<ul>
<li>
<ul></ul>
</li>
<li>
</li>
</ul>
</section>
같은 부모 요소를 가지는 요소들을 형제관계라고 부른다. 이 때, 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생요소라고 한다. 두 선택자 모두 형 요소에는 적용되지 않는다.
- 인접 형제 선택자(adjacent sibling) :
+, 첫 번째 요소만 지정 - 일반 형제 선택자(general sibling) :
~, 모든 동생 요소를 지정
/* 인접 형제 선택자 */
h1 + ul {
background: azure;
color: darkblue;
}
/* 일반 형제 선택자 */
h1 ~ ul {
background: black;
color: white;
}
<!-- HTML Hierarchy -->
<section id="general-sibling">
<ul></ul>
<h1></h1>
<ul>형제</ul>
<ul>선택자</ul>
</section>
속성 선택자 (Attribute Selector)
/* href 속성이 포함된 모든 a 요소에 적용 */
#attr1 a[href]{
text-decoration: none;
}
/* type 속성 값이 italy인 a 요소에 적용 */
#attr2 a[type="italy"] {
background: green;
color: white;
}
/* type 속성 값에 red가 포함되거나 공백으로 분리된 red가 포함된 a 요소에 적용 */
#attr3 a[type~="red"]{
background: red;
color: white;
}
/* type 속성 값에 red가 포함되거나 red-로 시작하는 a 요소에 적용 */
#attr4 a[type|="red"] {
color: red;
}
/* type 속성 값에 club으로 시작하는 a 요소에 적용 (공백, - 포함) */
#attr5 a[type^="club"] {
background-color: blue;
color: white;
}
/* type 속성 값에 club으로 끝나는 a 요소에 적용 (공백, - 포함) */
#attr6 a[type$="club"] {
background-color: yellow;
}
/* type 속성 값에 club이 포함되는 a 요소에 적용 (공백, -, 위치 모두 포함) */
#attr7 a[type*="club"] {
background-color: black;
color: yellow;
}
가상 클래스 선택자(Pseudo-Classes Selector) & 가상 엘리먼트 선택자(Pseudo-Elements Selector)
HTML 소스에는 존재하지 않지만 필요에 의해 가상의 선택자를 지정
E:link: 방문하지 않은 링크 EE:visited: 방문한 링크 EE:active: E 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안E:hover: E 요소에 마우스가 올라가 있는 동안E:focus: E 요소에 포커스가 머물러 있는 동안E::first-line: E 요소의 첫 번째 라인E::first-letter: E 요소의 첫 번째 문자E::before: E 요소의 시작 지점에 생성된 요소E::after: E 요소의 끝 지점에 생성된 요소
CSS 우선순위
특정도(specify) 값이 높은 순서대로 적용된다.
| 스타일 | 특정도 |
|---|---|
| important | Absolute |
| Inline (인라인 스타일) | A |
| ID Selector (ID 선택자) | B |
| Class Selector (클래스 선택자) | C |
| Tag selector (태그 선택자) | D |
!important : 모든 우선순위를 무시하고 가장 우선 순위가 된다. 전체적 스타일을 방해하기 때문에 이용하지 않는 것이 좋다.
CSS 서체
- color : HEX 코드, rgb(), rgba( ), 색상명
- font-family : 앞에서부터 검색하여 일치하는 폰트 적용
- serif : 꺽쇠가 붙어있는 서체 (Georgia, Times New Roman, 바탕체, 궁서체, 명조체)
- sans-serif : serif가 없는 서체(Arial, Helvetica, 돋움, 굴림, 나눔 고딕)
- monospace : 고정 폭 서체, 주로 프로그래밍 코드에 사용
- cursive : 커브가 들어간 서체, 가독성이 떨어짐
- font-size : px, em(부모(body) 요소로부터의 비율)
- font-style : italic, oblique
- font-weight : bold, 700(숫자)
- line-height : 1.5(font-size에 곱한 값이 줄간격), 10px
- text-decoration : none, underline(밑줄), overline(윗줄), line-through(취소선)
- text-align : left, center, right, justify(양쪽정렬, 줄의 내부 간격이 뒤틀려 잘 사용하지 않음)
- text-indent : em, - 값일 경우에는 내어쓰기
- text-transform : capitalize(첫 글자만 대문자), uppercase(모두 대문자), lowercase(모두 소문자)
- letter-spacing : 글자간 간격
- word-spacing : 단어간의 간격
vertical-align
요소간 수직정렬 (박스 내에서 수직 정렬이 아닌, 나란히 오는 인라인 요소간의 정렬)
text-align
줄 바꿈 설정
p.item1 {
/* 줄 바꿈이 없음 */
white-space: nowrap;
}
p.item2 {
/* 줄 바꿈, 공백, 띄어쓰기 등 모든 것이 보여지며,
박스를 벗어나도 줄 바꿈이 일어나지 않음 */
white-space: pre;
}
p.item3 {
/* 줄 바꿈만 보여주며, 자동으로 줄 바꿈 */
white-space: pre-line;
}
p.item4 {
/* 줄 바꿈과 띄어쓰기 모두 보여주며, 자동으로 줄 바꿈 */
white-space: pre-wrap;
}
CSS 배경 스타일
- background-color : HEX 코드, rgb(), rgba(), 색상명
- background-image : url(‘../images/icon.png’)
- background-repeat : no-repeat(박복하지 않음), repeat(바둑판 형식으로 반복), repeat-x(가로 반복), repeat-y(세로 반복)
- background-position : x축, y축 두 개의 값을 받는다.
- 양의 값일 때, x축은 우측, y축은 하단으로 이동(음수일 경우 반대로 이동)
- % 값일 때, 이미지 사이즈 기준으로 이동
- center는 x,y축 모두 가능
- left, right는 x축에만 사용
- top, bottom은 y축에만 사용
- background-attachment : 배경 이미지 고정
- locale : 요소의 왼쪽 상단을 기준으로 이미지를 표현하며, 스크롤 시 이미지가 함께 움직임
- scroll : 요소의 왼쪽 상단을 기준으로 이미지를 표현하며, 스크롤 시 이미지 고정
- fixed : 웹 페이지 화면을 기준으로 이미지가 표시되며, 스크롤 시 이미지 고정
CSS 테두리 스타일
요소의 상하좌우 속성을 정의할 때, Top > Right > Bottom > Left 방향으로 값을 정한다.
- border-width : px
- border-style : solid, dotted, dashed
- border-color : HEX 코드, rgb(), rgba(), 색상명
CSS 박스 모델
Content < Padding < Border < Margin 4가지로 이루어 진다.
블록 요소와 인라인 요소의 차이
- 블록 요소는 가로, 세로 마진을 모두 가진다.
- 인라인 요소는 가로 마진만 가질 수 있다. (인라인 요소의 길이 높이는 내용에 자동으로 맞추어지며, 지정이 불가능)
마진 겹침
두 블록 요소의 마진이 서로 겹칠 경우, 마진 값이 합쳐지는 것이 아니라 둘 중 큰 값이 적용된다. 따라서 한쪽에만 마진 값을 몰아 주거나, padding을 활용하는 방식으로 해결해야 한다.
width, height
padding고 margin을 구분하는 쉬운 방법은 요소에 background-color 값을 지정한 후 개발자 모두에서 해당 요소가 차지하는 공간을 확인하는 것이다.
/* 요소의 총 가로 길이 */
/* 200px + (10px + 1px + 15px) * 2 = 252px */
div {
width: 200px;
height: 50px;
padding: 10px;
border: 1px solid black;
margin: 15px;
}
box-sizing
box-sizing에 border-box를 지정하면, 요소의 width값에 맞추어 padding, border값을 제외한 width가 새로 적용된다.
/* 요소의 총 가로 길이 */
/* content의 가로길이는 200px - (10px + 1px) * 2 = 178px */
div {
width: 200px;
height: 50px;
padding: 10px;
border: 1px solid black;
margin: 15px;
box-sizing: border-box;
}
CSS 리스트 스타일
리스트 bullet 타입 설정
ul {
list-style: disc;
list-style-type: circle;
list-style-type: square;
}
ol {
list-style-type: decimal;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
list-style-type: lower-roman;
list-style-type: upper-roman;
}
리스트 bullet에 이미지 지정
ul {
list-style-image: url(../images/icon.png);
}
리스트 bullet 위치 지정
ul {
list-style-position: outside;
list-style-position: inside;
}
CSS 테이블 스타일
- border-collapse : 테두리 합치기
- border-spacing : 셀 간격(border-collapse: collapse 일 때 적용되지 않음)
- empty-cells : 빈 셀 표시
- table-layout : auto(긴쪽이 늘어남), fixed(table width 속성이 설정되어있을 때, 길이가 일정하게 유지)
CSS 화면 표시 속성
display
- block : 블록 요소가 아니느 요소를 블록 속성을 갖도록 한다.
- inline : 인라인 요소가 아닌 요소를 인라인 속성을 갖도록 한다.
- inline-block : 인라인 요소에 높이, 상/하 패팅, 마진 값을 줄 때 사용한다.
- none : 해당 요소의 하위요소들도 전부 보이지 않게 되며, 공간도 차지하지 않는다.
visibility
- hidden : 화면에 차지하던 공간은 그대로인채 투명해진다.
- visible
overflow
- visible : 영역 밖으로 콘텐츠가 나간 모습이 보인다.
- hidden : 넘친 콘텐츠를 전부 숨긴다.
- auto : 콘텐츠가 넘칠 경우, 스크롤바가 생긴다.
- scroll : 콘텐츠가 넘치지 않아도 항상 스크롤바가 있다.