CSS 기본
h1 { color: red }h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 한다
- 선택자(selector) : 무엇을 꾸밀지 정한다. h1은 h1 요소를 꾸미겠다는 뜻
- 속성(property) : 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 뜻
- 값(value) : 어떻게 꾸밀지 정한다. red는 빨간색으로 만들겠다는 뜻
CSS 코드는 다음처럼 구성된다.
selector { property: value }이때 property와 value를 합쳐서 선언(declaration)이라고 한다.
여러 개의 선언
세미콜론(;)으로 구분하여 선언을 여러 개 넣을 수 있다. 예를 들어
h1 {
color: red;
font-size: 20px;
}h1 요소의 색을 빨간색으로 하고 글자 크기를 20px로 만들겠다는 뜻이다.
공백
여러 개의 연속한 공백이나 줄바꿈은 하나의 공백으로 인식한다.
selector {
property: value;
property: value;
}selector { property: value; property: value; }위의 예는 동일한 결과를 만든다.
주석
주석(Comment)은 /*과 */ 사이에 쓴다.
/* Comment *//*과 */ 사이에 줄바꿈이 있어도 모두 주석으로 인식한다.
/*
Comment 1
Comment 2
*/여러 줄의 주석은 다음처럼 꾸미기도 된다.
/*
* Comment
* Comment
* Comment
*/CSS를 HTML에 적용하기
HTML에 CSS를 적용시키는 방법은 세가지가 있다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택한다.
- Inline Style Sheet
HTML 태그의 style 속성에 CSS 코드를 넣는 방법.
- Internal Style Sheet
HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법.
- Linking Style Sheet
별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법.
inline Style Sheet
Inline Style Sheet는 HTML 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법이다.
<p style="color: blue">Lorem ipsum dolor.</p>해당 태그(위 코드에서는 p)가 선택자(selector)가 되고, CSS 코드에는 속성(property)과 값(value)만 들어간다. 따라서 꾸미는 데 한계가 있으며, 재사용이 불가능하다는 단점이 있다.
internal Style sheet
Internal Style Sheet은 HTML 문서 안에 스타일 코드를 넣는 방법이다. <style>과 </style> 안에 CSS 코드를 넣는다. 예를 들어 다음과 같은 코드를 HTML 문서에 넣으면, 문서 안의 모든 h1 요소의 글자가 파란색이 된다.
<style>
h1 {
color: blue;
}
</style><style> 태그는 보통 <head>와 </head> 사이에 넣으나, HTML 문서의 어디에 넣어도 잘 적용된다. 이 방법은 HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있다는 장점이 있으나, 또 다른 HTML 문서에는 적용할 수 없다는 단점이 있다.
Linking Style Sheet
Linking Style Sheet는 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법이다. 예를 들어 모든 h1 요소의 글자를 빨간색으로 하고 싶다면, 다음의 내용으로 style.css 파일을 만든다. (CSS 파일의 확장자는 '.css')
h1 {
color: red;
}적용을 원하는 HTML 문서에 다음의 코드를 추가
<link rel="stylesheet" href="style.css">위 코드는 HTML 파일과 CSS 파일이 같은 폴더에 있다고 가정했을 때의 코드로, 경로는 적절히 수정해야 한다. 예를 들어 HTML 문서가 있는 폴더에 css 폴더가 있고, 그 안에 style.css 파일이 있다면 다음과 같이 한다.
<link rel="stylesheet" href="css/style.css">이 방법의 장점은 여러 HTML 문서에 사용할 수 있다는 것이다. style.css를 적용시키고 싶은 문서에 <link> 태그로 연결만 해주면 된다.
!important
CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다.
property: value !important;p {
color: red !important;
}
p {
color: blue;
}위는 문단의 글자색을 빨간색을 유지한다.
다시 속성값을 재설정하고 싶으면 !important를 다시 붙인다. 다음 예를 보면 문단의 글자색을 녹색으로 만든다.
p {
color: red !important;
}
p {
color: blue;
}
p {
color: green !important;
}
[세상살이] - 온라인에서 무료로 이미지, 동영상 용량 줄이기
온라인에서 무료로 이미지, 동영상 용량 줄이기
온라인에서 무료로 이미지, 동영상 용량 줄이기 사진이나 동영상 업로드 시 용량 제한에 걸릴때가 있다. 화질 변화는 없이 용량을 줄이고 싶을 때, 사진이나 동영상을 전문 프로그램을 사용하지
smarti.tistory.com
[코딩공부] - CSS fixedNavigation1 예제 다운로드
CSS fixedNavigation1 예제 다운로드
FixedNavigation Tutorial 예제보기 다운로드 네비게이션에 필요한 목록 요소는 내부에 링크가 있는 간단한 순서없는 목록이다. 목록은 나중에 JavaScript에서 참조하기 위해 아이디를 가져온다. jQuery를
smarti.tistory.com
성공과 실패는 습관이 좌우한다
성공과 실패는 습관이 좌우한다! ＃실천하는 사람이 되라. 세상에는 말하고 생각하고 계획하고 꿈꾸는 사람과 그 모두를 행동으로 옮기는 사람이 있다. 실천하는 사람을 성공으로 이끌고, 꿈만
smarti.tistory.com
CSS 크기, 크기 단위
CSS 크기 (Dimension) CSS를 이용하면 HTML 요소의 크기를 마음대로 설정할 수 있다. CSS에서 크기 조절을 위해 사용할 수 있는 속성은 다음과 같다. 속성 설명 height 해당 HTML 요소의 높이를 설정함. width
smarti.tistory.com
[디자인공부] - WebP 웹을 위한 새로운 이미지 포맷
WebP 웹을 위한 새로운 이미지 포맷
구글(google)이 만든 이미지 포맷 WebP(웹피) WebP는 구글에서 만든 이미지 파일 포맷으로 웹피라고 한다. 웹사이트의 페이지를 보다 빠르고, 더 작고 풍부한 이미지를 만들 수 있다. WebP는 일반적으
smarti.tistory.com
'코딩공부' 카테고리의 다른 글
| CSS 색, 링크 (0) | 2020.10.13 |
|---|---|
| CSS 텍스트 (0) | 2020.10.13 |
| CSS 폰트 (0) | 2020.10.13 |
| CSS 선택자 (0) | 2020.10.12 |
| HTML5 API 2 (0) | 2020.10.06 |
| HTML5 API 1 (0) | 2020.10.06 |
| HTML5 그래픽 2 (0) | 2020.10.06 |
| HTML5 그래픽 1 (0) | 2020.10.05 |
댓글