이미지 태그
<img src=" ">
크기 조절 width px / %로 가능
Ex
<img src ="example.jpeg" width=500px>
<img src="example.jpeg" width=100%>
CLASS와 ID
Html에 이름을 주는 법 : class / ID
Class
ex)
html
<p class="big-green-text">test</p>
css
<style>
.big-green-text {
font-size:100px;
color:green;
}
ID
html
<p id="big-blue-text">test2</p>
css
#big-blue-text {
font-size:100px;
color:blue'
}
= 같은 클래스 이름을 여러 요소가 공유 가능하지만 같은 아이디를 여러 요소가 공유할 수 없다.
한 요소가 여러 클래스를 가질 수 있으나 여러 아이디를 가질 수 없다.
div 태그
<div> 구획 나누기
css 태그를 사용하는 3가지 방법
1. <style> 태그
<style>
h1 {
color: green;
text-align:center'
}
p {
font-size: 20px;
}
</style>
<h1>test</h1>
<p> css testing </p>
2. style 속성
<h1 style="color: green; text-align:cetner;>hello world<h1>
<p style="font-size: 20px;> test</p>
3. 외부 css 파일 + <link> 태그
css/style.css
h1 {
font-size : 30px;
color: lime;
}
p {
text-align:right;
}
index.html
<link href="css/style.css" rel="stylesheet">
<h1>hello world</h1>
<p>test</p>
= 일반적으로 3번 방법으로 사용하지만 테스트 등 간편함을 위해 <style> 태그를 사용하기도 한다.
코멘트
html 코멘트
<!-내용->
css 코멘트
/* 내용 */
맥 단축키(sublim text) : com + /
'프론트엔드 > HTML CSS' 카테고리의 다른 글
| 조코딩 웹개발 1주차 - HTML Deploy (0) | 2022.07.30 |
|---|---|
| HTML/CSS 기초 (0) | 2022.07.26 |
