width2 [WEB/CSS] 박스 모델 이해하기 box.html이라는 새로운 파일을 만들고 그 곳에 아래와 같은 코드를 입력하였다. 결과는 h1태그를 사용했기 때문에 CSS가 제목으로 나타났고 a태그를 사용했기때문에 링크가 걸린 것을 확인할 수 있다. 그렇다면 이런 궁금증이 생길 수 있다. h1태그는 왜 자동으로 줄바꿈이 이루어지는가? a태그는 왜 h1과 달리 줄바꿈이 이루어지지 않고 사용이 되는가? 이때 나타나는 개념이 박스 모델이다. h1과 같은 태그는 화면전체를 사용하는 태그로써 block level element이라고도 불린다. a와 같은 태그는 글자 자기구역만을 사용하는 태그로써 inline level element라고 불린다. 그렇다면 block level element와 inline level element을 확인해 보기 위해 영역을 눈에.. 2022. 7. 1. [WEB/HTML] 줄바꿈 태그(p, br), 이미지 넣기(img) 아래 코드를 보면 웹 페이지에서 단락을 구분하기위해 줄바꿈을 했는데 적용이 되지 않았다. 이런 문제를 해결하기 위해서는 줄바꿈 태그를 사용해야 한다. HTML에서 줄바꿈을 하고 싶을 때는 태그를 사용한다. 태그를 1번 사용했을 경우 태그를 2번 사용했을 경우 * 태그의 특징은 앞에서 본 태그들과는 달리 닫히는 태그가 필요 없다는 것이다. img, input, hr, meta 등도 닫지 않는 태그의 사례이다. 줄바꿈으로 단락을 구분할 수도 있지만 단락을 구분해주는 태그는 따로 있다. 바로 태그이다. p태그는 br 태그와 다르게 하나의 단락을 그룹핑할 수 있도록 열고, 닫는 태그가 존재한다. p태그 사용하기 전 p태그 사용 후 결과는 딱히 다를게 없어 보인다... 웹 페이지에 이미지를 넣을 수도 있는데 이때.. 2022. 6. 25. 이전 1 다음
