데굴데굴

[생활코딩] WEB1 - HTML & Internet, Day 3 본문

Programming/HTML

[생활코딩] WEB1 - HTML & Internet, Day 3

aemaaeng 2022. 6. 12. 08:27

Day 3: ~최후의 문법 속성과 img까지

Q. 줄바꿈은 어떻게 할까? Google 'html new line tag' 검색
- To add a line break to your HTML code, you use the <br> tag. The <br> tag does not have an end tag. You can also add additional lines between paragraphs by using the <br> tags.

무언가를 설명하지 않는 태그들은 감싸야하는 컨텐츠가 없기 때문에 태그를 닫지 않음.
ex) img, input, br, hr, meta

단락표현태그 p
- The <p> tag defines a paragraph. Browsers automatically add a single blank line before and after each <p> element.
Tip: Use CSS to style paragraphs.

앞서 br은 입력하는대로 줄바꿈이 실행됐다면, p 태그는 자동으로 태그가 적용된 곳 앞뒤에 줄바꿈을 넣어준다.

p 태그의 단점: 단락과 단락의 간격이 고정되어 시각적 자유도가 떨어짐.
CSS를 활용하면 p 태그의 한계를 극복할 수 있음.
두 번째 단락 p 오픈태그에 <p style="margin-top:45px;"> 추가하기

의미에 맞는 태그로 웹페이지 만들기
검색엔진에서도 태그를 분석하여 탐색

속성(attribute): 태그의 심화된 문법
<img src="이미지링크">
같은 프로젝트 폴더 안의 이미지를 불러올 때는 파일의 이름만 적어주면 됨.
<img src="guitar.jpg" width="70%">
크기 조정은 %나 숫자로 표현가능
style 속성을 이용하여 width, height를 픽셀로 세밀하게 조정할 수도 있다.

Comments