블록요소, 인라인요소

 

 

1 - 블록요소 -> 수직배치 -> 형태가 있어서 한 칸을 다 잡아 먹어서 밑으로 내려갈 수 밖에 없음 -> 

2 - 인라인요소 -> 수평배치 -> 형태가 없어서 -> 따라서 width와 height를 지정할 수 없음

 

 

---

 

 

<h1>이것은 제목입니다 (h1 - 블록 요소)</h1>

<p>이것은 단락입니다 (p - 블록 요소)</p>

<p>

인라인 요소와 텍스트요소를 포함할 수 있는 <strong>블록요소</strong>이지만,<br/>

또 다른 <em>블록요소</em>를 포함할 수는 없다.

</p>

h1, p는 블록 요소이다. 때문에 다른 블록 요소를 담지 않은 것을 볼 수 있다. 하지만 블록 태그 안에서 <strong>등의 인라인 요소를 담아서 강조효과를 할 수 있다. 

 

실행결과 1

 

 

 

 

---

2. 이미지 요소

 

<h1>이미지 요소</h1>

<p>이미지요소는 이미지를 웹페이지에 표현할 때 사용한다.</p>

<p>사이즈 조절을 할 때 해상도를 고려해야 한다.</p>

<p>

<img alt="개사진" src="https://image.utoimage.com/preview/cp872722/2022/12/202212008462_500.jpg"/>

<a target = "_blank" href = "https://blog.kakaocdn.net/dn/GSWaD/btr0gB0teLR/1W4YO2IXCHoDVcpca9HHGK/img.jpg">

<img alt="강아지 사진입니다." src="img/gae.jpg"

width = "100px" height = "100px"/> </a>

 

</p>

 

 

이미지를 삽입하는 방법이다. 실행결과를 먼저 보자. 

 

 

외부 서버에서 이미지를 불러온다 . 두번 째 강아지는 사진을 임의로 조절했다. 그런 다음 <a>태그를 활용해서 하이퍼링크로 클릭 시 새로운 하이퍼링크로 연결되게 하였다. 사진 클릭시 밑 처럼 다른  개 화면이 표시된다.

 

 

 

 

---

 

2. 이미지 맵 사용하기 

 

메뉴판 같은 사진을 서버 상에 등록시키는 걸 생각해보자. 많은 사진을 서버에 등록해야 하니 한 장과는 다르게 서버에 과부하를 유도할 수 있다. 때문에 이미지 맵 기술을 활용해 볼 수 있다. 

 

 

메뉴판 사진

구글에서 퍼왔다. 이 사진을 그림판에서 불러오면 왼쪽 하단에 좌표 값이 나온다. 이것을 활용해야 한다.

 

 

<h1>이미지 맵 사용하기</h1>

<img usemap = "#menu" src = 'img/menu.jpg' alt = "메뉴 사진임" />

<map name = "menu">

 

<area alt = "삼겹살이예요."

href = "https://namu.wiki/w/%EC%82%BC%EA%B2%B9%EC%82%B4"

shape = "rect"

coords = "60,124,133,234"

target = "_blank"

 

/>

 

<area alt = "대패삼겹살이예요."

href = "https://namu.wiki/w/%EC%82%BC%EA%B2%B9%EC%82%B4%20%EA%B5%AC%EC%9D%B4?from=%EB%8C%80%ED%8C%A8%EC%82%BC%EA%B2%B9%EC%82%B4#s-3.1"

shape = "rect"

coords = "138,117,212,206"

target = "_blank"

 

/>

 

</map>

다음과 같이 coords에 좌표(왼쪽 상단, 우측 하단)를 넣어주면 온라인 메뉴판이 만들어진다. 온라인 메뉴판이 잘 생각나지 않는다면 온라인 쇼핑몰 같은 것을 떠올려도 좋다.

 

 

---

3. 목록 요소

 

 

순차적, 비순차적 요소 출력 결과

이렇게 번호가 달리지 않은 것, 번호가 달린 것을 구별해서 표시할 수 있다. <ul>을 활용하면 비순차적 목록으로 출력이되고 <ol>을 활용하면 순차적요소로 출력이 된다.