728x90
반응형
p태그
|
1
2
3
4
5
6
7
8
|
<html>
<body>
하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는
웹 페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만
아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고
대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다.
</body>
</html>
|
cs |
이런식으로 코딩한다면
전혀 단락구분이 되지 않는다.
|
1
2
3
4
5
6
7
8
9
10
|
<html>
<body>
<p>하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는
웹 페이지를 위한 지배적인 마크업 언어다. </p>
<p> 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만
아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고
대화형 양식을 생성하는 데 사용될 수 있다. </p>
<p> HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다.</p>
</body>
</html>
|
cs |
하지만 이렇게 p 태그를 이용해준다면
단락구분이 되는 것을 확인할 수 있다.
p태그 보다 더 떨어뜨리고 싶거나 덜 떨어뜨리고 싶다면 css를 사용해서 수정해줄 수 있다!
br태그
내용이 없는 태그라 열리는 태그 하나만 있으면된다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body>
하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는
웹 페이지를 위한 지배적인 마크업 언어다. <br>
또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만
아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. <br>
그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. <br>
HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다.<br>
</body>
</html>
|
cs |
<br>태그를 사용하여 한문장씩 줄바꿈 해주었다.
<p> 태그와의 차이점은 <p> 태그는 줄바꿈을 두번 해준 것이다. 만약 <br> 태그를 통해 단락 구분을 하고 싶다면
<br>태그를 두번 넣으면 된다.
img 태그
이미지 태그는 닫을 필요가 없다.
픽사베이에서 파도와 관련된 그림을 가져왔다.
이런식으로 그림이 나오게 하려면
|
1
2
3
4
5
|
<html>
<body>
<img src="waves.jpg" width="600" height="600" alt="파도 이미지" title="파도 이미지">
</body>
</html>
|
cs |
src= "그림의 이름.확장자" 설정을 해주고, width와 height 를 통해 그림의 크기를 설정해준다.
src 속성은 이미지 태그의 url을 명시해준다.
alt 속성(alternative text)을 써주는 것이 좋다. 이건 그림이 깨졌을 때 유용하다.
그림이 깨져도 이 이미지가 파도 이미지라는 것을 알려준다.
그리고 이렇게 그림에 마우스를 가져다 댔을 때 "파도 이미지"라는 것을 알려준다!
728x90
반응형
'HTML > 생활코딩' 카테고리의 다른 글
| [HTML기초] 입력양식 - form (0) | 2021.11.05 |
|---|---|
| [HTML 기초] table (0) | 2021.11.03 |
| [HTML기초] 웹사이트 만들기 (0) | 2021.10.11 |
| [HTML 개념] 태그의 중첩과 목록 ,문서의 구조,DOCTYPE (0) | 2021.10.06 |
| [HTML 기초] 태그/ 하이퍼텍스트와 속성 (0) | 2021.09.26 |
댓글