CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술이다.
1. CSS 개요
- HTML과 함께 웹을 구성하는 기본 프로그래밍 요소로 HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면 CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당한다.
- 자바스크립트와 연계해 정적이 아닌 동적인 콘텐츠 표현이나 디자인 적용 가능
HTML만으로 설계
CSS 추가 설계
- 이처럼 웹 문서의 내용과 상관없이 디자인만 바꾸거나 디자인은 그대로 두고 웹 문서의 내용을 변경하는데 용이하다.
- 다양한 기기(PC,스마트폰,태블릿 등)에 맞게 탄력적으로 바뀌는 콘텐츠(반응형 디자인)제작 가능
- 동일한 문서구조를 가지고 서로 다른 디자인 적용 가능함에 있어 CSS를 사용한다.
2. CSS 기본문법
- 크게 선택자와 선언부로 구성이 된다.
선택자 : 스타일을 지정할 HTML 요소(태그,아이디 등)를 가리킨다.
선언부 : CSS 속성 이름과 값이 포함된다.
footer{
text-align: center;
background-color: #1e1e1e;
}
------
footer : 선택자
text-align : / background-color : 선언부- 이처럼 선택자는 디자인을 하고 싶은 HTML요소가 들어가고
- 선언부는 콜론(:)으로 구분 되어진 다수의 항목을 포함하며 각 선언은 항상 세미콜론(;)으로 끝나며 선언블록은 중괄호({})로 묶는다.
3. CSS 적용방법
- HTML 문서에 CSS를 적용하는 방법에는 내부 스타일시트, 외부 스타일시트, 인라인 스타일 등 총 3가지 방법이 있다.
1. 내부 스타일시트
- html 파일에 스타일을 기술하는 방법으로 태그 사이에 태그 부분에 작성한다. html 과 css 가 한 파일에 있으므로 작업이 쉽고 간편하지만 css의 재활용이 안되는 문제가 있어 다른 html페이지에서는 사용이 불가능하여 특별한 경우가 아니면 외부 스타일시트를 권장한다.
<html>
<head>
<style>
body {
background-color: red;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
...
</body>
</html>2. 외부 스타일시트
- css 를 작성하는 가장 기본적인 방법으로 별도의 파일에 CSS 문서를 작성하고 해당 CSS를 필요로 하는 html 문서에서 불러와 사용하는 형식이다.
<link rel="stylesheet" type="text/css" href="mystyle.css">- html 문서
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>김멋사의 이력서</title>
<link rel="stylesheet" href="codelion.css"> // css 문서를 호출하여 디자인 사용
</head>
<body>
<h1>김멋사</h1>
<p>HTML/CSS 개발자</p>
<footer>copyright CODE LION. All rights reserved.</footer>
</body>
</html>- css 문서
footer {
text-align: center;
background-color: #1e1e1e;
color: #919191;
font-size: 12px;
}3. 인라인 스타일
- html 태그에 필요한 디자인 속성을 직접 작성하는 형식 으로 그때그때 필요한 디자인으로 바로 적용할 수 있는 방식이지만 일관된 디자인 체계를 유지하는데 방해가 되고 코드자체가 가독성이 좋지 않아 꼭 필요한 경우가 아니라면 지양한다.
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>- 예제
<html>
<head>
<meta charset="UTF-8">
<title>김멋사의 이력서</title>
</head>
<body>
<div class="mainbox">
<h1 style="color:blue;">김멋사</h1>
<p style="color:green; margin-left:30px">HTML/CSS 개발자</p>
</div>
<footer>copyright CODE LION. All rights reserved.</footer>
</body>
</html>4. 우선순위
- 동일한 디자인 속성이 외부 스타일시트, 내부 스타일시트, 인라인 스타일시트에 적용 되어 있는 경우 우선순위는 가장 나중에 정의되는 스타일에 있다. 따라서 html안에서 요소와 함께 사용하는 인라인 스타일시트가 가장 높은 우선순위를 유지한다.
브라우저 디자인 정의 -> 외부 스타일시트 -> 내부 스타일시트 -> 인라인 스타일시트
4. CSS 용어
(1) 글자 설정
- font-size : 글자 크기 설정
- color : 글자 색 설정
p {
font-size : 15px; // 글자 크기 설정
background-color: black; // 배경색 설정
color: white; // 글자색 설정
}(2) 구역 박스 설정
- border(두께, 방식, 색깔) : 구역 박스 테두리 두께, 방식, 색깔 설정
- width : 구역 박스의 크기를 설정함
- text-align : 구역 박스내의 내용물이 정렬됨
- margin-left / margin-right : 구역 박스를 가운데 정렬하는 법
.mainbox {
border: 1px solid #ebebeb; // 테두리 1, 솔리드 형식, 회색
width: 610px; // 박스 크기 설정
text-align: center; // 박스 내 글자 정렬
margin-left: auto; // 박스 가운데 정렬
margin-right: auto; // 왼쪽과 오른쪽 정렬
}
(3) 박스 쪼개기
- content : 사용자가 작성하는 내용
- border : 박스 테두리
- padding : content와 border사이의 여백
- margin : border와 웹페이지 끝부분의 여백
.mainbox{
width:610px; // 박스 크기
margin-right: auto; // 박스 가운데 정렬
margin-left: auto;
border: 1px solid #ebebeb; // 박스 테두리 설정
text-align: center; // content 정렬
padding: 10px; // content와 border사이 10 여백
margin: 20px; // border와 웹페이지 사이 20 여백
}
- 갈색 부분이 content박스
- 초록색 선이 padding 값 10px
- 노란색 선이 border
- 빨간색 선이 margin 20px
※ 참고자료 : https://dinfree.com/lecture/frontend/122_css_1.html#m4
Web Developer