[HTML] h1, 공백, <p>,<b>,<div>,<span>,<ul,ol>

비타민규·2023년 8월 2일

[HTML]

목록 보기
1/25

favicon 에러는 무시해도 좋다!!!!
html언어

<h1> ~ <h6>로 제목을 정해준다.
<!-- 주석내용 --> 으로 주석을 넣어준다.
html에서는 엔터가 안 먹히니 <br></br>로 해준다.
그런데 br사이에 텍스트가 안 들어가면 <br/> 하나로 써줘도 가능하다.
그런데 또 <br>은 너무 자주 쓰이기에 <br> 하나만 써도 허용해준다.
행       분리 5 < 3

행&nbsp;&nbsp; &nbsp; &nbsp; 분리 5 &lt 3를 쓰면 위의 예시처럼 된다.

제목

문단 나누기

<p>문단 나누기</p>를 쓰면 위의 예시처럼 된다. 눈에 보이진 않지만 위아래로 한줄씩 차지함.



기본 태그 이해
글자를 굵게 표시하는태그
<hr> => 가로 줄을 추가해줌
<b>기본 </b>태그 이해 => 굵게 표시
<hr size="5" width="300"> => 벨로그에선 안 보이지만 가로선에 조건 달아줌
<b>글자를</b> 굵게 <strong><i>표시하는</i></strong>태그
  b와 strong의 차이는, 단순히 클라이언트의 눈에는 같지만 strong은 브라우저에
게 중요한 내용이라고 알려주는 역할을 한다.
아직 배우진 않았지만 '웹 접근성'의 관점에서는 차이가 있다고 한다.


써 놓은   대로
   결과가 
   				보인다 ~~~~
<pre> </pre>요소는 &nbsp;와 같은 기능을 써주지 않고도 코드입력창에 입력한 그대로 결과로 출력해주는 역할을 한다.


Tag : 출력형태에 따라 Block방식(p,h,div...), Inline 방식(b,i,span...)

연습

영역 확보 태그

연습영역 확보 태그

연습<div style="background-color: yellow;">영역 확보 태그</div>중
div는 한 줄 전체를 확보한다
  
연습<span style="background-color: red;">영역 확보 태그</span>중  
span은 지정된 영역부분만 확보하고 조건을 넣어준다.



목록 관련 태그
  • 1장
  • 2장
  • 3장
  1. 1장
  2. 2장
  3. 3장
  1. 1장
    • 기초
    • 중급
    • 고급
  2. 2장
  3. 3장
<ul>
	<li>1장</li>
	<li>2장</li>
	<li>3장</li>
</ul>
=> ul을 사용하게 되면 숫자가 표시되지 않는 목록태그이다.

<ol>
	<li>1장</li>
	<li>2장</li>
	<li>3장</li>
</ol>
=> ol은 숫자를 표기하는 목록태그이다.

<ol>
	<li>1장</li>
	<ul>
		<li>기초</li>
        => 이처럼 목록태그안에 또 하나의 목록을 넣어줄 수도 있다.

반응형 웹사이트란 사용자가 윈도우 창의 변화를 줌과 동시에 표시되는 창의 이미지나 반응이 실시간으로 변하는 사이트를 말한다.

profile
같이 일하고 싶은 개발자가 되어야지

0개의 댓글