기초 2

이미지 태그 

<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 + /