[HTML] 페이지 책갈피, HTML 요소(block, inline), iframe(inline frame)

1. 페이지 책갈피

- 현재 페이지에서 이동하고 싶은 부분으로 이동하는 법

- 요소에 id 속성을 이용해서 간단한 책갈피를 만들 수 있음

- 책갈피를 통해 가고 싶은 위치의 요소에 id 속성으로 특정한 문자열을 부여해주면 다른 <a> 태그에서 href에 가고 싶은 곳의 "#아이디명"으로 작성해 주며 클릭 시 그곳으로 이동함

2. HTML 요소

• 블록 레벨 요소
  - 웹 페이지 상에 블록을 만들어지는 요소
  - 코드상에 한 줄로 이어서 써도 앞뒤 요소 사이에 새로운 줄을 만들어주며 새로운 줄에서 요소가 시작됨
  - 면의 특징
  - display 속성 값이 block인 요소는 해당 라인 전체를 차지함
  - 스타일을 임의로 부여하면 이어서 표현 가능
  ex) p, h1 ~ h6, ol, ul, div ...
• 인라인 요소
  - 블록 레벨 요소 내에 포함되어 있음
  - 새로운 줄을 만들지 않고 작성한 그 단락 내에 표현됨
  - 글자의 특징
  - display 속성 값이 inline인 요소는 해당 라인 전체가 아닌 안에 담긴 콘텐츠만큼 차지
  - 스타일을 임의로 부여하면 다음 줄에서 시작하게 표현 가능
  ex) a, img, span ...
• 블록 레벨은 인라인처럼 한 줄로 쭉 놔둘 수 없고 인라인은 블록처럼 둘 수 없기 때문에 요소의 성격을 바꿔가면서 개발해야 함

3. div 예시

- div는 블록 요소 이기 때문에 블록이 만들어져서 이어서 다른 요소가 오면 자동으로 새로운 줄을 만들어 새로운 줄에 다른 요소가 나타나게 된다.
- 이때 인라인 요소처럼 이어서 나타내게 하고 싶으면 <style> 태그(CSS)를 이용해 float를 이용하면 된다.
- float는 지정된 요소를 띄워주는 역할을 한다. float는 left, right로 속성을 줄 수 있는데 말 그대로 왼쪽 오른쪽에 띄워 준다는 것이다.
- 이때 띄워줄 때 다른 요소들을 가리게 되면 안 되기 때문에 다른 요소의 지정된 크기를 피해 이어서 배치되게 된다.
- 위에서 div1은 float는 속성을 안 주었기 때문에 블록 요소로 첫 번째 줄을 다 차지하게 되는 것이고 div2, div3는 float를 left로 주었기 때문에 블록 요소처럼 새로운 줄이 생기는 것이 아니라 지정된 크기로 움직이게 되고 div3는 div2 옆에 들어갈 수 있으므로 div2 옆에 붙게 된다.

- 원래는 위처럼 아무런 스타일을 주지 않으면 사진 옆에 글이 바로 붙어서 나오지 않게 된다.
- 하지만 밑에 처럼 스타일로 float를 속성으로 주게 되면 사진은 띄워져서 옆으로 붙기 때문에 글자가 사진 옆으로 붙어서 나올 수 있게 된다.

- padding은 테두리로부터 안쪽에 있는 콘텐츠까지의 여백이고
- margin은 반대로 테두리부터 외부에 있는 다른 요소까지의 여백이다.

4. iframe(inline frame)

- 해당 웹 페이지 안에 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있음
- 단, 정보보호를 위해 iframe 제한을 둔 사이트들은 삽입할 수 없고 새 창으로만 접근 가능
- 크롤링(crawling) : 웹 페이지에 있는 모든 데이터를 긁어 오는 것
- iframe은 크롤링을 할 수 없기에 요즘 사라지는 추세이고 간단한 웹 페이지거나 누군가 크롤링을 할 필요가 없다면 사용하는 것이 좋다.
<iframe src="삽입할 페이지 주소"></iframe>

- iframe은 위처럼 내가 지정한 공간에 다른 웹 페이지를 띄워주는 역할을 한다. 하지만 naver처럼 정보보안 상 막아놓는 사이트들이 있다. 그런 사이트들은 위처럼 나오지 않고 새 창으로 접근해야만 한다.

- <a> 태그는 하이퍼링크 태그로 누르면 지정된 웹 페이지로 가게 해준다. 이때 target을 "_blank"로 하게 되면 새창으로 띄어준다. 그리고 target을 iframe의 name 속성으로 주고 <a> 태그를 누르게 되면 지정된 iframe에 그 웹 페이지가 뜨게 된다.
- <style> 태그로 테두리를 줄 수 있는데 "border : 테두리 크기 선 종류 색깔"로 나타낼 수 있다.
- 이때 선 종류로는 solid(실선), dashed(실선과 점선 사이), dotted(점선)으로 나뉜다.