728x90
728x90
css 파일 만들고 넣는 법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body style="background-image:url('backgroundsea.jpeg');">
<img src = "Myselfie.jpeg" style="width:100px; display:block; margin-left:auto;
margin-right:auto;">
<h1 style="letter-spacing:2px; text-align :center;">future fullstack developer</h1>
<h3 style="color:blue; margin right: auto; margin left: auto;
text-align: center;"><strong>nsidepixce</strong></h3>
<p style="text-align: center; color:white;"><strong>우리의 찬란한 일기(본문)</strong><a href = "https://insidepixce.tistory.com/">이동하기</a></p>
<p style="text-align: center;"><strong>동서대학교 정보보안학과 1학년<br> 코딩을 정복하고 말테야!"</strong></p>
</body>
</html>
이렇게 길게 적으면 더럽게 보인다. 너무 길면 더러우니 css파일을 만들면 된다.
.css로 끝나면 css파일이다.
- 스타일을 css파일로 다 몰아넣자!
<link href= "css/main.css" rel= "stylesheet">
먼저 html 파일에 css를 넣어주자
.profile {
width: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}
.title {
text-align: center;
letter-spacing:2px;
}
.ido {
color:blue;
margin-right:auto;
margin-left:auto;
text-align:center;
}
.texty {
text-align:center;
color:white;
}
이렇게 css 파일을 몰아넣어준다.
<h3 class="ido">오늘따라 뭔가 행복한 느낌<h3>
이런식으로 쓸 수 있다.
```css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body style="background-image:url('source/backgroundsea.jpeg');">
<img src="source/Myselfie.jpeg" class="profile">
<h1 class="title">future fullstack developer</h1>
<h3 class="ido"> insidepixce</h3>
<p class="texty">우리의 찬란한 일기(본문)<a href="https://insidepixce.tistory.com/">이동하기</a></p>
<p class="title"><strong>동서대학교 정보보안학과 1학년<br>코딩을 정복하고 말테야!</strong></p>
</body>
</html>
```이렇게 전부 수정해보았다
똑같이 이렇게 잘 뜨는 걸 확인할 수 있다.
class의 특징
- 점찍고 작명할것
- 이름 중복은 피하자 (유니크하게 작명할것)
- 비슷하게 쓸수 있는게 있는데, 클래스 명을 안 쓰고 p로 쓸 수도 있다.
p {
text-allign: center;
}
이런식으로 둘수 도 있다.
- id속성에도 둘 수 있다
#special {
text-align:center;
color:blue;
}
(잘 안 쓴다) - 자바스크립트가 우선이기 때문에.
- 우리는 이 css파일을 셀렉터라고 한다
- 만일 Id와 클래스 둘 다 넣는다면?
- -id가 제일 우선, 그다음 class → tag 순 (style속성이 가장 우선이긴 함)
728x90
300x250
'2023 공부한것들' 카테고리의 다른 글
| [01-1] 프로그래밍이란? (0) | 2023.06.26 |
|---|---|
| [TIL] 20230625 (0) | 2023.06.25 |
| [코딩애플 html/css] 3강 : 기본적인 웹페이지 스타일링 (0) | 2023.06.25 |
| [코딩애플 html/css] 2강 HTML 기본 태그로 글 작성해보기 (0) | 2023.06.25 |
| [코딩애플 html/css] 1강 : html 기초와 개발환경 셋팅 (0) | 2023.06.25 |