TIL] html 기초 및 css

html 기초

웹브라우저의 개발자 도구에 들어가 바꾸고 싶은 부분을

내가 원하는 문구로 바꾸게 되면 내가 원하는 문구로 수정된 것을 볼 수 있다.

• 1.  전세계의 사람들이 문구가 수정된 것을 보는 것이 아닌 내가 보고 있는 페이지만 바뀐다.
• 2. 내가 보고있는 페이지는 사실 인터넷과 관련이 없다.
• 3. 새로고침을 한다면 원상 복귀한다. 

새로고침을 하면 원상복귀되는 이유:

새로고침 버튼을 누르면 서버로부터 새로운 정보를 요청하고 받아오기 때문이다.

 

브라우저의 역할:

1. 서버에게 요청 - > 결과물을 받아서 그려주는 개념

 

웹사이트에서 보여지는 요소는 크게 세 가지이다.

1. html : 밑그림(뼈대)

2. css : 물감(보기 좋게 꾸며주는 것)

3. 자바스크립트 : 움직이는 것 반응에 대한 대응

---

html 많이 쓰이는 태그

html은 문서 형태를 기반으로 두고 있다.

html의 기본적인 형태들을 살펴보자!

title 태그 사용법 :
<title> 사용 </title>

div 태그 사용법 :
<div>구역을 나눈다</div>

p태그 사용법:
<p>문단</p>

h태그 사용법:
<h1>제목</h1>

img태그 사용법:
<img src="주소값"/>

input태그 사용법:
<input type = "text"/>

button태그 사용법:
<button>버튼</button>

---

부모 태그

<div>

    <div>

        <button> 나는 버튼 1 </button>

    </div>

    <div>

        <button> 나는 버튼 2 </button>

    </div>

</div>

 

초록색 div는 버튼 1의 부모 태그다

소라색 div는 버튼2의 부모태그다.

---

class

class는 쉽게 말해 지칭해주는 것이다.

해당 태그에 이름을 정하여 지칭해주는 것이다.

이름을 굳이 붙여주는 이유는

css로 꾸미기 위해 이름이 필요하기 때문이다.

---

backgorund-image

• background-image
• background-size
• background-position

위의 세 가지는 항상 같이 다닌다고 보면 된다.

---

html과 css 기본적인 것들을 공부했다.

파이썬을 공부하다가 html과 css를 공부하다 보니

조금 생소하기도 하고 어렵기도 하지만

열심히 하면 실력은 오르기 마련이니 열심히 해야겠다!

파이팅!