css에 대해서 알아보겠다.
CSS: Cascading Style Sheet
- html 문서의 디자인 요소를 담당하는 부분 (디자인 및 배치의 역할)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
먼저, css의 기술방식부터 알아보자.
css 기술방식은 내부 css와 외부css로 나눌 수 있다.
내부css: 속성 스타일(inline style sheet) & 태그 기술 방식(Internal style sheet)
1. 속성 스타일 (inline style sheet)
<body>
<p>
<font color= "red" size="7">~~~~~~~~~~~~~<br/>~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~</font>
</p>
</body>
2. 태그 기술 방식(Internal style sheet)
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> css 지정방식 </title>
<style>
.de{color : #09F;}
외부 css: 외부 스타일 시트 (External style sheet)
3. 외부 스타일 시트 (External style sheet)
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> css지정방식</title>
<link rel = "stylesheet" href = "main.css">
</head>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
css 선언방법:
<head>
<style>
선택자 {속성: 값;}
</style>
</head>
h1{text-align:center;} = h1에 해당하는 모든 태그들의 글자 정렬 중심 배치
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
[css의 선택자]
{선택자 =스타일을 적용할 html요소를 선택}
| 전체 선택자 | * | 모든요소를 선택하는 선택자 |
| 태그 선택자 | h1, p , a | html내에 존재하는 특정태그를 선택하는 선택자 |
| 아이디 선택자 | #id | 특정한 이름 표현, 한번 사용가능한 선택자 |
| 클래스 선택자 | .class | 특정한 이름 표현, 여러번 사용가능한 선택자 |
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
본격적으로 css에 대해 알아보겠다.
먼저, <style>는 무조건 <head> 안에 존재해야 한다.
head 태그 안에 존재한는 style 태그
모든 태그들은 저마다의 마진값, 패딩값이 존재하기 때문에
위그림에서도 문장들 사이에 여백이 존재함을 알 수 있다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
*선택자
*선택자를 통해 모든 요소에 대해 패딩값과 마진값을 0으로 정하여 여백을 없앴다.
/*주석*/
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
body선택자
body태그에 있는 모든요소의 배경색을 노랑으로 정하였다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
body선택자
body태그에 있는 모든요소에 대해서 배경색은 노랑, 글자색은 빨강으로 정했다.
【 *태그 선택자는 모두, body선택자는 body태그만 지칭함을 주의해야 한다. 】
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
a선택자
<p>의 특정부분에 <a>를 걸어서 "편집 포트폴리오" 에 임시링크를 걸었다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<a>에 해당하는 부분을 글자꾸밈을 없애고, 색을 aqua로 정했다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
새로운 html문서를 작성해보겠다.
다음과 같이 body태그를 작성하고,
*선택자를 통해 모든 요소에 대해 여백을 없앴다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
#title 선택자
속성 id를 입력하고 #title 선택자를 통해 색을 빨강으로 정했다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
class 속성, .text선택자
class="text"로 속성을 부여하고 .text선택자로 글자크기는 20px, 글자굵기는 900으로 설정했다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
**【id 속성은 박스형태에서 큰 레이아웃을 잡을 때 사용하고,
그 안에서 작게 작게 수정하는 부분에서 class 속성을 사용한다.】
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
"스마트폰 시대에" 부분에 span태그와 class 속성을 입력하고 ,
.text2 선택자를 통해 색은 aquamarine, 글자크기는 15px로 정하였다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
이번엔 <style></stlyle> 에 들어있는 선택자들을 잘라내어 다른 파일에 옮겨보겠다.
css
옮긴 후 .css 꼴로 저장한다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<head> 부분에 css를 직접 작성하지 않고 다음처럼 <link> 로 연결할 수 있다.
잘 표현되었음을 알 수 있다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
이번엔 스타일의 상속과 우선순위에 대해 알아보겠다.
01. 인라인 스타일 (스타일에 직접부여)
02. 내/외부 스타일 (id> class)
03. 웹브라우저 기본 스타일
04. 가장마지막에 적용된 기준으로 표현
!important; = 적용되지 않거나 중요성이 강한 스타일에 적용 / 가장 우선순위!
아래처럼 같은 선택자가 두번연속 입력되면 아래선택자를 적용시킨다.
첫번째 .text2 선택자에 !important를 부여하여 첫번째 .text2 선택자가 적용되었다.
끝.
':: HTML 🚩' 카테고리의 다른 글
| #09-1 DIV 공간 분할 태그 (2) | 2021.02.15 |
|---|---|
| #08 -2 CSS의 이해 - 속성의 종류 (0) | 2021.02.15 |
| #07 HTML 태그의 이해 - 04. 하이퍼텍스트 링크 (0) | 2021.02.15 |
| #06 HTML 태그의 이해 - 3. 이미지 태그 (0) | 2021.02.15 |
| #05 HTML 태그의 이해 -2. table 태그 (0) | 2021.02.15 |
댓글