HTML : 웹페이지의 내용
- index.html 로 확장자 파일 생성하기
- <head>태그 안에서 <style>태그의 속성으로 디자인을 입혀줄 수 있다.
- 선택자로 class , id 가 있다. ( id는 1번만 선언할 수 있다! )
- class 는 스페이스바로 여러개 지정 가능
CSS : 웹페이지의 디자인
- style.css 로 확장자 파일 생성하기
- {속성 : 값 ; } 로 마무리한다
- ctrl+e 로 class,id의 CSS속성으로 바로가기. ctrl 마우스 올리면 속성으로 바로 보임 (css peek 확장자)
(스타일 속성은 inline> id > class 순서로 입힌다.)
[예제1]
<title>Document</title>
<style>
p {
font-size: 36px;
color: pink;
font-weight: 900;
}
.title {
color: red;
}
#heading {
font-size: 50px;
color: blue;
}
</style>
</head>
<body>
<p>시작합니다</p>
<p id="heading">안녕하세요</p>
<p class="title">조이조 입니다!</p>
<p class="title" id="heading">아이디 우선</p>
<p style="color: #dfdfdf; class="title" id="heading">
인라인스타일이 이긴다.
</p>
</body>
</html>
보통 HTML과 CSS의 각각으 파일로 코딩함.
HTML에서 Link 태그로 CSS 파일 불러오기
<head>
<link rel="stylesheet" href="style.css" />
</head>
'제로베이스 프론트엔드 스쿨 23기 > [사전학습]' 카테고리의 다른 글
| (기초) CSS 레이아웃 ( div 태그, float 속성, display 속성 - inline, flex, grid) (0) | 2023.12.18 |
|---|---|
| (기초) HTML 기본태그의 특성 <p> <h1> (1) | 2023.12.18 |
| (입문)비주얼 스튜디오(Visual Studio)에서 HTML 선언하기( HTML실행) (0) | 2023.12.13 |
| (기초) HTML 이란? (구성과 특성) (0) | 2023.12.13 |
| (입문) 비주얼 스튜디오(Visual Studio) 기본 확장자( 확장팩 ) 설치 (0) | 2023.12.13 |
