1. 웹 문서에 디자인 삽입하기
Def) 스타일(style): HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법 등 결정짓는 것.
- HTML로는 문서의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다.
- HTML태그만을 이용하는 것보다 CSS 스타일을 적용해서 꾸미면 보기 좋게 만들 수 있다.
- 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.
Def) 반응형 웹 디자인: 사용자가 PC로 접속하든 모바일로 접속하든 웹 브라우저의 크기에 따라
- 화면의 레이아웃을 바꿔주는 것을 말한다.
- 2개의 웹 문서를 따로 만들지 않고 하나의 웹 문서에서 작동하도록 만드는 것이다.
2. 스타일과 스타일 시트
- 기본형: 선택자 {속성1: 속성값1; 속성2 : 속성값2 }
- 속성과 값이 하나로 이루어진 값을 스타일 규칙 이라고 한다. 세미콜론으로 구분한다.
- CSS를 사용하지 않은 웹 문서라 하더라고 웹 브라우저에 표시할 때는 기본 스타일을 사용한다.
-> 이를 "브라우저 기본 스타일"이라고 한다.
<hide/>
<h1>레드향</h1>
<p style="color:blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
Note) 실행 결과
Ex) 내부 스타일 시트 사용하기
- 내부 스타일 시트: 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 한다.
- 모든 스타일 정보는 <head>태그 안에서 정의하고 <style>과 <style>태그 사이에서 작성한다.
<hide/>
<style>
h1 {
padding:10px;
background-color:#222;
color:#fff;
}
</style>
</head>
<body>
<h1>레드향</h1>Note) 실행 결과
Ex) 스타일 정보를 따로 저장해 놓은 외부 스타일 시트
- 사이트를 제작할 때는 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할 때마다 가져와서 쓴다..
- 이렇게 따로 저장해놓은 정보를 외부 스타일 시트라고 한다.
- "*.css"라는 파일 확장자를 사용한다.
- 외부 스타일 시트를 연결할 때 사용하는 태그는 <link> 태그를 사용한다.
- <link rel = "stylesheet" href="css/style.css">
-> 외부 스타일 시트를 연결한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>
3. CSS 기본 선택자 알아보기
Def) 전체 선택자(usiversial selector): 스타일을 문서의 모든 요서에 적용할 때, 사용한다.
- 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용한다.
- 기본형: * {속성 : 값 ; ... }
- 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용한다.
- 웹 문서 내용을 브라우저 테두리 사이에 여백을 약간 두는 것을 마진과 패딩이라고 한다.
Ex) 마진과 패딩
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
* {
margin:0;
padding:0;
}
</style>
</head>
<body>
<img src="images/cat.jpg">
</body>
</html>Note)
- 적용 전
- 적용 후
Note) 요소와 태그의 차이점
- 태그는 말 그대로 태그 자체를 가리키지만 요소는 태그를 적용한 것을 가리킨다.
ex) <p>텍스트 단락 지정하기</p>
- <p>와 </p>는 태그 자체를 말하는 것이고
태그를 포함해 <p>태그를 적용한 "텍스트 단락 지정하기" 부분을 p요소라고 한다.
Note) 특정 요소에 스타일을 적용하는 타입 선택자
- 타입 선택자(type selecter)는 특정 태그를 사용한 모든 요서에 스타일을 적용한다.
- 기본형: 태그명{ 스타일 규칙 }
- 아래 예제에서 p선택자를 사용해서 웹 문서에 있는 모든 텍스트 단락의 글자를 이탤릭 체로 표시한다.
- p요소는 한 번 정의했으나 웹 문서의 <p> 태그를 쓴 요소 3개에 모두 적용이 되는 것을 볼 수 있다.
Ex)
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<div>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>
Note) 특정 부분에 스타일 적용하는 클래스 선택자(class selecter)
- 기본형: .클래스명{ 스타일 규칙 }
- 마침표를 꼭 붙인다.
- 예제를 보면 검은색 테두리를 그리는 ".accent"스타일을 만든 후,
- <span>태그를 사용해서 '레드향' 요소에 적용했다.
- 요소 하나에 클래스 스타일을 2개 이상 적용할 수도 있다.
-> 공백으로 구분하여 스타일 이름을 적는다.
- <h1>태그에 accent스타일과 bg스타일을 동시에 적용해서 회색배경과 검은 테두리가 함께 그려진다.
Ex)
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p {
font-style: italic; /* 이탤릭체 */
}
.accent {
border:1px solid #000; /* 테두리 */
padding:5px; /* 테두리와 내용 사이의 여백 */
}
.bg {
background-color:#ddd; /* 배경색 */
}
</style>
</head>
<body>
<div>
<h1 class="accent bg">레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>Note) 실행 결과
Note) 특정 부분에 스타일을 한 번만 적용할 수 있는 id선택자
- id 선택자(id selecter)는 "#"을 이용해서 스타일을 적용한다.
- 기본형: #아이디명 { 스타일 규칙}
- 클래스 선택자는 문서에서 여러 번 적용할 수 있는 반면, id선택자는 문서에서 한번만 적용할 수 있다.
- 주로 문서의 레이아웃에 이용되거나 웹 요소에 자바 스크립트 프로그램을 사용하면서 요소를 구별할 때 쓴다.
- 아래 코드를 보면 문서 내용이 화면 중앙에 배치되도록 <div id = "container">요소로 내용을 묶어 놓고
- 스타일 시트에서 #container를 사용해서 스타일을 정의한다.
- id선택자를 사용해서 문서를 중앙에 배치하고 테두리를 그릴 수 있다.
Ex)
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
#container {
width:500px; /* 너비 */
margin:10px auto; /* 바깥 여백 */
padding:10px; /* 테두리와 내용 사이 여백 */
border:1px solid #000; /* 테두리 */
}
</style>
</head>
<body>
<div id="container">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>Note) 실행 결과
Note) 같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자
- 기본형: 선택자1, 선택자2 { 스타일 규칙 }
- <h1>태그를 사용한 제목과 <p>태그를 사용한 텍스트 단락을 화면 중앙에 정렬하려면
- 아래와 같이 코드를 작성
<hide/>
h1, p{
text-align: center;
}
4. 캐스케이딩 스타일 시트 알아보기
Def) CSS(Cascading Style Sheet): 우선순위가 있는 스타일 시트
- 스타일 시트에서 우선순위가 위에서 아래로 계단식으로 적용된다는 의미이다.
- 웹 요소에 둘 이상의 스타일을 적용할 떄 우선순위에 따라 적용할 스타일을 결정한다.
- 스타일이 충돌하지 않게 하는 방법
1) 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위 결정,
그 순위에 따라 위에서 아래로 스타일 적용
2) 스타일 상속: 태그의 포함 관계에 따라 부모 요소의 스타일을 자식요소로, 위에서 아래로 전달
Note) 스타일 우선 순위
1) (가장 중요) 사용자 스타일
2) (웹 문서) 제작자 스타일
3) 브라우저 기본 스타일
Ex)
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p {
color:black;
}
h1 {
color: brown !important;
}
p {
color:blue;
}
</style>
</head>
<body>
<h1 style="color:green">레드향</h1>
<p style="color:red;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>Note) 실행 결과
Note) 스타일 상속
- 웹 문서의 여러 태그는 서로 포함 관계가 있다.
- 포함하는 태그를 부모 요소, 포함된 태그는 자식 요소라고 한다 .
- 스타일 시트에서는 자식 요소에서 별도의 스타일을 지정하지 않으면
-> 부모 요소의 스타일 속성이 자식요소로 전달되는데 이를 "스타일 상속"이라고 한다.
Ex) 마무리 문제 (1)
- 링크를 이용해서 외부 스타일 시트를 연결하라.
- <link>를 이용해서 mstyle.css 파일을 연결한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>웹 기술 - 기본</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript 기초</li>
</ul>
</body>
</html>
Ex) 마무리 문제 (2)
'FrontEnd' 카테고리의 다른 글
| Chapter 08. 레이아웃을 구성하는 CSS 박스 모델 (0) | 2022.04.23 |
|---|---|
| Chapter 07. 텍스트를 표현하는 다양한 스타일 (0) | 2022.04.20 |
| Chapter 05. 입력양식 작성하기 (0) | 2022.04.19 |
| Chapter 04. 웹 문서에 다양한 내용 입력하기 (0) | 2022.04.18 |
| Chapter 03. HTML기본 문서 만들기 (0) | 2022.04.18 |