1일차(3) 이미지 삽입 및 css id, class 사용 예제
<HTML, CSS, Javascript 예제4>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img.html</title>
<style>
/* id 속성으로 선택할 때는 선택자를 # 으로 시작한다.*/
#one{
color:red;
}
#two{
color:powderblue;
}
#three{
color:greenyellow;
}
.my-class{
font-style: italic;
}
.han-img{
width: 200px; height: 200px;
}
</style>
</head>
<body>
<h1>이미지 입니다.</h1>
<!--
img 요소의 src 속성의 값으로는 로딩할 이미지가 위치한 경로를 적어놓으면
웹브라우저가 해당경로를 찾아서 이미지 데이터를 받아와서 화면상에 표시해 준다.
alt 속성의 값으로는 이미지의 자세한 설명을 적으면 된다.
img 요소는 인라인 요소이기 때문에 개행을 따로 해주지 않으면 한줄에 표기된다.
-->
<img src="images/aa.png">
<br><!-- 강제 개행 -->
<img src="http://pics.gmarket.co.kr/pc/single/kr/common/image__logo.png"
alt="Gmarket 로고">
<!--
id 속성은 특정 요소를 유일하게 식별하고자 할때 사용하는 속성이다.
-->
<p id="one">단락을 나타내는 p 요소</p>
<p>p2 입니다.</p>
<p>p3 입니다.</p>
<!--
class 속성은 특정 요소들을 같은 그룹으로 구성하고자 할때 사용하는 속성이다.
-->
<div id="two" class="my-class">문단을 나타내는 div 요소</div>
<h2 id="three" class="my-class">제목을 나타내는 hn 요소</h2>
<h1>이미지 요소의 크기 조절하기</h1>
<!-- 1번과 3번 이미지의 폭과 높이를 200px, 200px로 변경하기-->
<img src="images/1.jpg" class="han-img">
<img src="images/2.jpg">
<img src="images/3.jpg" class="han-img">
</body>
</html>
#id : id 속성은 특정 요소를 유일하게 식별하고자 할때 사용하는 속성
.class : class 속성은 특정 요소들을 같은 그룹으로 구성하고자 할때 사용하는 속성
- <style>안의 p 에 컬러를 지정하면 모든 p 요소의 서식을 한번에 바꿀 수 있다.
하지만! id로 지정한 한 개만 컬러를 바꾸고 싶다면! #id 로 표기하면 된다.
- <img src=""> 는 파일 시스템 내 / 인터넷의 어떤 주소에 있는 이미지를 모두 가져올 수 있다.
alt : 이미지의 대체텍스트 작성. 시각장애인도 편리하게 접근할 수 있는 설명
- 인라인 요소(inline element) : :button, a, img 등. 따로 개행하지 않으면 모두 한 줄에 표기됨
↔ 블록 요소(block element) : h1, p, div 등
>> 다음 예제에서 더 자세히 다룸
- <br>: 강제로 개행하고 싶은 경우 사용 (닫는 요소가 없는 않는 단독요소)
- 윈도우의 개행기호: \r\n
- visual studio는 기호 없이도 개행시켜주지만, 웹브라우저에서는 해석하지 않는다.
*참고. 프로그래밍에서 영문 단어를 조합하는 작성 방식
ex) 'My Box' 라는 단어를 사용하고 싶은 경우:
1) camel case/낙타 등 모양: myBox
2) snake case/뱀 모양: my_box
3) kebob case/케밥 모양(?): my-box
→ id는 카멜, 클래스는 케밥을 많이 쓴다.
'국비교육(22-23)' 카테고리의 다른 글
| 2일차(2)/HTML 기초 : table (0) | 2022.10.06 |
|---|---|
| 2일차(1)/HTML 기초 : ul, ol, dl (0) | 2022.10.06 |
| 1일차(4) CSS : Block, Inline 요소 예제 (0) | 2022.10.06 |
| 1일차(2)/HTML, CSS, Javascript 기초 (1) | 2022.10.05 |
| 1일차(1)/HTML, CSS기초 (1) | 2022.10.05 |