📁 CSS (cascading style sheet)
HTML과 함께 웹 표준의 기본 개념
HTML : 텍스트나 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는것 (구조담당)
CSS : 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당
💾 스타일 형식
css 스타일 적용 방식은 ' 속성 : 값 ' 으로 입력
html은 '속성=값' 으로 표현 (여러개 쓸 땐 띄어쓰기하고 입력)
p {text-align : center; } /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */p 부분을 '선택자(selector)' 라고 한다. 앞으로 만들 스타일 규칙을 어디에 적용할 것인지 나타낸다.
선택자 다음에 중괄호 { , } 가 오고 그 사이에 속성을 입력, 중괄호 안에 들어가는 속성과 속성 값은 콜론( : ) 으로 구분해
' 속성 : 속성값 ' 과 같은 형식으로 표시 한다.
' 속성 : 속성값 ' 다음에는 세미콜론 ( ; )으로 구분한다.
💾 주석처리
주석을 표시할 때는 /* 와 */ 사이에 내용을 입력한다.
주석을 한 줄만 입력하거나 여러 줄을 입력할 수 있다.
💾 스타일과 스타일 시트
스타일 적용 방법 3가지
| 태그 | 방식 | 설명 |
| 방법1 | 인라인 스타일 방식 | Body에 직접 적용 |
| 방법2 | 내장 CSS | <head> 요소 내에 <style> 요소를 사용하는 방식 id 스타일, class 스타일, tag 스타일 |
| 방법3 | 외장 CSS | 외부에 CSS 파일을 만들어 두고 내부로 불러 들여서 사용 |
스타일 시트
: 웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많은데, 이런 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것
- 인라인(inline)스타일
: 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다.
스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style 속성을 사용해 style = " 속성 : 속성 값; " 형태로 바꿀 수 있다.
<!DOCTYPE HTML>
<html>
<head>
<title> 블록 요소에 인라인 방식으로 CSS 적용하기 </title>
<meta charset="UTF-8" />
</head>
<body>
<h1 style="font-size:30px; color:cyan;">블록 요소에 인라인 방식으로 CSS 적용하기</h1>
<!-- 인라인 스타일로 p 요소에 CSS를 적용합니다. -->
<p style="font-size:15px; color:#FF0000; line-height:150%; background-color:green;">Vegetables fit for use are recognized by the small sprout.<br />
쓸모있는 야채는 어린 싹으로 알 수 있다. 될성 싶은 나무는 떡잎부터 알아본다.</p>
<p>Vegetables fit for use are recognized by the small sprout.<br />
쓸모있는 <span style="color:pink;">야채</span>>는 어린 싹으로 알 수 있다. 될성 싶은 나무는 <span style="background-color:gray">떡잎</span>부터 알아본다.</p>
</body>
</html>
<p> 태그 - 단락 만들기
: 텍스트를 표시할 때 가장 많이 사용하는 태그
<p> 태그로 표시하는 텍스트 단락은 </p> 태그를 만날 때까지 줄바꿈 없이 택스트를 한줄로 표시한다.
텍스트 줄이 길어질 경우 줄이 자동으로 바뀐다.
line-height : 여러 행으로 구성된 글 문단에서 행과 행 사이의 간격을 지정하는 속성
숫자와 함께 px, %, em 같은 단위로 사용한다.
<span> 태그 : 웹페이지의 일부분에 스타일을 적용시키기 위해 사용된다.
| 태그 | 속성 | 설명 |
| span | display | display 요소 변경 |
| width | 가로 크기 | |
| height | 세로 크기 | |
| background-color | 배경색 변경 | |
| color | 글자색 변경 | |
| font-style | 글자 형식 변경 | |
| margin | 외부 여백설정 | |
| padding | 내부 여백설정 | |
| border | 테두리 설정 |
- 내부 스타일 시트
웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 하기 때문에
모든 스타일 정보는 <head>태그와 </head> 태그 안에 정의해야 하고,
<style> 태그와 </style> 태그 사용하여 작성 한다.
태그이름 { 속성 : 값 ; 속성 : 값 ; }
<!DOCTYPE HTML>
<html>
<head>
<title> 문서 전체의 배경 색상, 글자 색상 적용하기 </title>
<meta charset="UTF-8" />
<style type="text/css">
p{
background-color:gray;
color:blue;
width:300px
}
</style>
</head>
<body>
<!-- 배경 색상 검정색, 글자 색상을 흰색으로 지정합니다. -->
<p >쉬워 보이는 일도 해보면 어렵다. 못할 것 같은 일도 시작해 놓으면 이루어진다. 쉽다고 얕볼 것이 아니고, 어렵다고 팔짱을 끼고 있을 것이 아니다. 쉬운 일도 신중히 하고 곤란한 일도 겁내지 말고 해보아야 한다.- 채근담 </p>
<p>많은 벗을 가진 사람은 한 사람의 진실한 벗을 가질 수 없다.- 아리스토텔레스</p>
</body>
</html>
내장 css 방식 : 묶음으로 한번에 스타일 지정
모든 <p> 태그에 같은 스타일을 지정하고 싶다.
<style type="text/css">
p{
background-color:gray;
color:blue;
width:300px
}
</style>
모든 <p>태그에 배경색, 글자색, 너비를 지정해준다.
- 블록요소(Block element)
모든 인라인 요소를 포함할 수 잇으며, 블록요소도 포함 할 수 있습니다.
기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다.
블록요소 다음에는 줄바꿈이 이루어진다.
(<h1> ~ <h6> , <p>, <ul>, <ol>, <div>, <blockquot>, <form>, <table>, <fieldset>, <figurcaption>, <figure>)
- 인라인 요소(inline element)
항상 블록 요소안에 포함되어 있으며 인라인요소 안에 다른 인라인 요소가 포함될 수 있습니다.
기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 된다.
그래서 임의로 width, height로 변형을 줄 수 없다.
line-height로 줄의 높낮이를 조절, text-align 으로 텍스트의 정렬을 할 수 있다.
인라인요소 다음에는 줄바꿈이 없고 우측으로 바로 이어져 표시된다.
(<a>, <span>, <img>, <object>, <br>, <sub>, <input>, <textarea>, <label>, <button>, <map>, <q>, <script>, <select>)
display : block - css명령어로 인라인요소를 블록요소의 속성으로 변경 할 수 있다.
inline-block - 인라인 요소와 블록요소의 속성을 모두 갖을 수 있다.
- 외부 스타일 시트
사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용
[ .css ] 라는 파일 확장자를 사용합니다. 필요할 때마다 페이지의 <HEAD> 부분에서 호출한다.
외장css방식 : 외부에 css파일을 만들어 두고 불러와서 사용한다.
<link rel="stylesheet" type="text/css" href="style.css">
스타일만 따로 지정한 css를 내부로 불러들여서 스타일을 적용, <head>태그 안에 적용
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
| 속성 | 내용 |
| rel | 현재 표시된 문서와 href 속성에 명시된 URL로 지정한 문서간의 계층적인 관계를 나타내는 속성 |
| href | 이동하려는 파일 또는 URL을 지정하는 속성 스타일 시트 파일의 URL |
| type | 이동하려는 파일 또는 URL의 문서의 종류 text/css(MIME 타입) |
<!DOCTYPE HTML>
<html>
<head>
<title> link 요소로 CSS 문서 연결하기 </title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> link 요소로 CSS 문서 연결하기 </h1>
</body>
</html>
<!--
외부에 만든것을 가져와서 사용한다.
외장css방식 : 외부에 css파일을 만들어두고 불러와서 사용한다.
만들어놓은 style.css 파일로 불러와본 예시
파일의 확장자를 .css로 하고, 필요할때마다 페이지의 <head>부분에서 호출하여 사용한다.
-->
@charset "EUC-KR";
h1{
font-size:50px;
color : white;
background-color : green;
}
외부에서 별도로 작성한 css 파일은 link 요소로 연결할 수 있다.
style.css → 따로 스타일을 지정
h1{
font-size:50px;
color : white;
background-color : green;
}
'FRONT END > CSS' 카테고리의 다른 글
| 1일(06.29) 여백 / 크기와 관련된 CSS 속성 -박스모델, display 속성 (0) | 2022.07.10 |
|---|---|
| 1일(06.29) 텍스트 관련 스타일 -텍스트 스타일 (0) | 2022.07.10 |
| 1일(06.29) 텍스트 관련 스타일 -글자 관련 스타일 (0) | 2022.07.10 |
| 1일(06.29) 선택자(selector) (0) | 2022.07.03 |