CSS 속성

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

CSS 속성 본문

Front-End (웹)/CSS

CSS 속성

친절한개발초보자 2021. 7. 19. 23:12

728x90

CSS

캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어
html 태그를 꾸며주는 속성

스타일시트 적용방법

내부 직접 스타일시트
: style을 적용시킨 태그에만 적용
- 적용방법
<태그명 style="속성:속성 값;">

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>내부직접스타일시트</title>
</head>
<body>
    <h1 style="color:#9ff5ef">내부직접스타일시트</h1>
    <h2 style="font-size:40px; color:orange">태그에 직접 css속성 작성</h2>
    
    <a href="../2/index.html">2번파일</a>
    
    <!--a태그에는 웹사이트 주소만 입력할 수 있는게 아닌 다른 html파일명을 적어서 이동하는것도 가능하다-->
    
    <a href="../3/index.html">3번파일</a><br>
    
    <img src="1.jpg" style="width:800px" alt="">
    
    <p style="font-size:30px;color:pink;font-weight:bold;font-style:italic">1번파일 1번파일 1번파일</p>
    <p style="text-align:center;word-spacing:30px">1번파일 1번파일 1번파일</p>
    <p style="letter-spacing:30px">1번파일 1번파일 1번파일</p>
</body>
</html>
© 2021

내부 스타일시트
: <head>... </head> 안에 적용
- 적용방법

<style>
    선택자{속성:속성자;}
</style>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>내부스타일시트</title>
    <style>
        h1{color:green}
        p{font-size:25px;}
    </style>
</head>
<body>
    <h1>내부스타일시트</h1>
    <h2>css속성을 따로 작성</h2>
    
    <a href="../1/index.html">1번파일</a>
    <a href="../3/index.html">3번파일</a><br>
    
    <img src="2.png" alt="">
    
    <p>2번파일 2번파일 2번파일</p>
    <p>2번파일 2번파일 2번파일</p>
    <p>2번파일 2번파일 2번파일</p>
</body>
</html>

외부 스타일시트
: 하나의 스타일로 여러 개의 html페이지에 적용하여 사용할 때 편리하며 유지, 보수에 유리하다.
- 적용방법
```
<head>
    ...
    <link href="경로" rel="stylesheet" type="text/css">
    ...
</head>
```
- 사용방법
: 선택자{속성:속성 값;}
- 생성부터 연동까지 방법
1. ctrl + n 눌러서 새 파일 만들기 진행
2. ctrl + s 눌러서 저장하기(파일명 layout.css)
→ html은 파일명을 index.html으로 무조건 저장해야 하는데 css는 크게 상관없다.
3. 자신이 만든 css파일에 아무거나 css속성을 작성 (대신 자기가 연동할 html 파일에 있는 태그와 관련된 것)
4. title 밑에 <link href="경로" rel="srylesheet" type="text/css"> 연동 구문 작성
```
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>외부스타일시트</title>
    <link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
    <h1>외부스타일시트</h1>
    <h2>css파일을 만들어서 연동하는 개념</h2>
    
    <a href="../1/index.html">1번파일</a>
    <a href="../2/index.html">2번파일</a><br>
    
    <img src="2.png" alt="">
    
    <p>3번파일 3번파일 3번파일</p>
    <p>3번파일 3번파일 3번파일</p>
    <p>3번파일 3번파일 3번파일</p>
</body>
</html>
```
```
#css 파일
h1{color:aqua}
```
★★ 실전에서는 무조건 외부 스타일시트를 이용하여 작성한다.
(앞으로의 코드를 보면 공부용이므로 내부 스타일시트를 이용한다)

기본 선택자

전체 요소에 스타일을 적용하는 전체 선택자
```
* { 속성 : 값;... }
```
특정 요소에 스타일을 적용하는 타입 선택자
```
태그명 { 스타일 규칙 }
```
특정 부분에 스타일 적용하는 클래스 선택자
```
.클래스명 { 스타일 규칙 }
```
특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자
```
#아이디명 { 스타일 규칙 }
```
같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자
```
선택자1, 선택자2 { 스타일 규칙 }
```

cf) 태그와 요소의 차이점
- 태그
: 태그 자체를 의미
- 요소
: 태그를 적용한 것
- <p>....<p>
→ p 요소에 적용한 스타일

타이포그래피 속성 (글자와 관련된 css속성)

★ css 속성을 2가지 이상 적어줄 때에는 하나의 css속성이 끝나는 지정에 세미콜론(;)을 넣어줘야 한다.

color
: 글자의 색상을 바꿔주는 css속성
1-1. 색상을 영어단어로 입력하면 된다.
1-2. 색상 hex코드를 #과 함께 사용하면 변경 가능
→ color picker(구글) 검색해서 사용해도 가능
https://www.google.com/search?q=color+picker&sxsrf=ALeKk01hZQ1F_2tcLmmKKuHRxEpoForb_w%3A1626686394005&ei=uUP1YM3jPMaVr7wP_umuIA&oq=color+picker&gs_lcp=Cgdnd3Mtd2l6EAMyBwgAEEcQsANKBAhBGABQAFgAYMfs9AdoAXACeACAAZMBiAGTAZIBAzAuMZgBAKoBB2d3cy13aXrIAQHAAQE&sclient=gws-wiz&ved=0ahUKEwiNpLOF5-7xAhXGyosBHf60CwQQ4dUDCA4&uact=5
font-size
: 글자의 크기를 조절해주는 css속성
(단위는 px단위를 사용)
font-weight:bold;
: 글자를 굴게 만들어주는 css 속성
text-align:left / center / right
: 글자 왼쪽 중앙 오른쪽 정렬시켜주는 css속성
(기본값이 left이므로 굳이 적을 필요 없다)
letter-spacing / word-spacing
: 글자 간격 / 단어 간격을 조절해주는 css 속성
font-style:italic
: 글자를 약간 옆으로 기울여주는 css속성
(이탈릭체)

<img> 태그 css속성

width
: 가로 값
height
: 세로 값
→ 내가 선택한 태그의 가로와 세로 값을 조절해주는 css속성
→ img태그의 가로세로 값을 조절하는데 많이 사용한다.

★ img태그의 가로세로 값 변경 시 가로와 세로 둘 중 하나만 입력해주면 원본 이미지 비율을 그대로 유지하면서 크기 변경이 가능하다.

캐스케이딩 스타일 시트

캐스케이딩의 의미
- 캐스케이딩 (cascading)
: 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미
- CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.
스타일 우선순위
- 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용
- 얼마나 중요한가?
1. 사용자 스타일
2. 제작자 스타일
3. 브라우저 기본 스타일
- 적용 범위는 어디까지인가?
1. !important
: 어떤 스타일보다 우선 적용하는 스타일
2. 인라인 스타일
: 태그 안에 style속성을 사용해 해당 태그만 스타일을 적용
3. id 스타일
: 지정한 부분에만 적용되는 스타일이지만 한 문서에 한 번만 적용할 수 있다.
4. 클래스 스타일
: 웹 문서에서 지정한 부분에만 적용되는 스타일로 한 문서에 여러 번 적용할 수 있다.
5. 타입 스타일
: 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용
- 소스 코드의 작성 순서는 어떠한가?
▷ 스타일 시트에서 중요도와 적용 범위가 같다면 그다음은 스타일을 정의한 소스 순서로 우선순위가 정해진다.
▷ 소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.
스타일 상속
- 웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있다. 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다.
- 스타일 시트에서는 자식 요소에 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달된다.

728x90

저작자표시

'Front-End (웹) > CSS' 카테고리의 다른 글

float 속성 (0)	2021.07.28
background 속성 (0)	2021.07.26
중앙정렬 (0)	2021.07.23
박스 모델과 CSS 속성 (0)	2021.07.22
display 속성 (0)	2021.07.21

'Front-End (웹)/CSS' Related Articles

Comments

EverGiver

CSS 속성 본문

CSS 속성

'Front-End (웹) > CSS' 카테고리의 다른 글

티스토리툴바