스타일 형식
태그와 비슷하게 생겼지만 조금다릅니다.
p { text-align: center; } //텍스트 단락을 중앙에 정렬하는 스타일 규칙- 여기서
p:선택자,text-align: 스타일 속성,center:속성 값 - 선택자 다음에는 중괄호가오고 그 사이에 속성을 입력하는데 중괄호 안에 들어가는 속성과 속성값은 콜론(:)으로 구분해 '속성 : 속성 값'과 같은 형식으로 표시하며 속성과 속성 값쌍 다음에는 세미클론(;)으로 구분합니다. 그래서 속성 두개를 적용한다면 다음과 같이 쓸 수 있습니다.
p { color: blue; font-size: 16fx }//텍스트 단락의 글자 색:파란색, 글자 크기: 16px<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 적용해 보기</title>
<style>
/* h2 제목과
텍스트 단락의
스타일을 조절해 보자
*/
h2{
font-size:20px; /* 글자 크기 20픽셀 */
color:orange; /* 글자색 오렌지 */
}
p {
color:blue; /* 글자색 파랑 */
}
</style>
</head>
<body>
<h1>CSS</h1>
<h2>웹 문서의 디자인과 내용을 분리합니다</h2>
<p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.</p>
<p>내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.</p>
</body>
</html>
스타일과 스타일 시트
스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓는 것을 '스타일 시트'라고 합니다.
스타일 시트는 문서 안에서 사용할 스타일 규칙들을 정의한 '내부 스타일 시트'와 별도의 스타일 파일을 만들어 연결해 사용하는 '외부 스타일 시트'로 나뉩니다.
내부 스타일 시트
- 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다.
- 스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 하기 때문에 모든 스타일 정보는
<head>태그와</head>태그 안에서 정의해야하고<style>태그와</style>태그 사이에 작성합니다.
내부 스타일 시트의 예로서
<section>태그 안에 있는 텍스트 주위에 테두리를 그리는 스타일을 문서안에 삽입 하는 예제
외부 스타일 시트
- 웹사이트를 만들때 하나의 웹 문ㅁ서로 끝나는 경우는 없습니다.대부분의 경우, 디자인으 ㅣ일관성을 위해 같은 스타일을 여러 웹문서에서 사용하죠.(java의 interface라고 추상클래스라고 생각)
- 그 때마다 각 웹 문서마다 똑같은 내부 스타일 시트를 만든다고 한다면 서버 공간은 물론 문서를 다운로드하는 시간까지 낭비됩니다.
- 따라서 사이트를 제작할 때는 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것이 일반적이다.
- 이렇게 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 하고, 'css.'라는 확장자를 사용합니다.
<!doctype html>
<html lang="ko">
<head>
<title>온라인 프로필</title>
<meta charset="utf-8">
<style>
section {
width:500px; /* 너비 */
padding:15px; /* 테두리와 내용 사이의 여백 */
border:5px solid gray; /* 테두리 스타일 */
}
</style>
</head>
<body>
<div id="container">
<!-- 자기 소개 -->
<section>
<h2>Who am I?</h2>
<p>프런트엔드 웹 기술(Front-end Web Tech.)에 관심이 많습니다.<br>
현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
</section>
</div>
</body>
</html>
style.css라는 외부 스타일 시트 파일을 링크한 것으로 이파일은 제목 글자의 색과 본문 글자크기,줄간격에 대한 정보를 담고있습니다.
<!doctype html>
<html lang="ko">
<head>
<title>온라인 프로필</title>
<meta charset="utf-8">
<style>
section {
width:500px; /* 너비 */
padding:15px; /* 테두리와 내용 사이의 여백 */
border:5px solid gray; /* 테두리 스타일 */
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<!-- 자기 소개 -->
<section>
<h2>Who am I?</h2>
<p>프런트엔드 웹 기술(Front-end Web Tech.)에 관심이 많습니다.<br>
현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
</section>
</div>
</body>
</html>여기서 href = "css/style.css"는 외부 스타일 파일의 경로입니다.
h2 { //파일명 style.css
color:blue; /* 글자 색 */
}
p {
font-size:0.9em; /* 글자 크기 */
line-height: 2.0; /* 줄간격 */
}
인라인 스타일
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다.
- 스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style 속성을 사용해 style="속성 : 속성값;" 형태로 스타일을 바꿀 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 스타일 사용하기</title>
</head>
<body>
<h1>블루베리와 향산효 효능</h1>
<p style="color:blue;">블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 함유하고 있습니다.</p>
<p>메사츄세츠 보스톤에</p>
</body>
</html>
블로그 이전합니다! https://jyyoun1022.tistory.com/