HTML / CSS 기본 태그 사용법

'기본기, 기초가 중요하다'는 말은 너무 익히 들어 누구나 아는 말 일터.

하지만, 막상 '중요한 것= 어려운 것' 이란 착각 또는 오해를 자주 하다, 

최근에 먼 길을 돌아서야 기초와 기본을 다시 제대로 해야겠다는 결심과 함께 기본기부터 공부 하고 있어 정리해본다.

 

그런 차원에서,

HTML과 CSS의 기본 태그들의 중요성은 두말하면 입 아픈 이야기들!

HTML / CSS 기초 태그 사용법

---

웹(Web)이 동작하는데 있어서 각각의 특징에 익숙해져야 한다.

그 중에서 가장 많이 만나는 3대장!

HTML, CSS,  JavaScript!

HTML - 뼈대, CSS -꾸미기, JavaScript - 움직이는 부분

 

HTML / CSS 기초 태그 사용하기

 

HTML 

- div (division): 구역을 묶어주는 친구 <div>

- P (paragraph) : 문단 <p>

 

- H1 : 제목 글씨(가장 큰 친구) <h1>

:: 페이지마다 하나씩 꼭 써주는 게 좋다. 검색 엔진에서 검색이 잘 된다.

<h1>제목을 나타내는 태그</h1>

 

- span : 특정 글자만 꾸며주고 싶을 때 <span>

특정 <span style="color:yellow">글자</span>만 꾸며주고 싶을 때

 

- a : 하이퍼링크 태그 <a> 

<a href="https://jjungslife.tistory.com/"><a/>

 

- img 태그 <img>

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>

 

- input 태그 <input>

input 태그 텍스트 형태 : <input type="text"/>
input 태그 비밀번호 형태 : <input type="password"/>

 

- button 태그 <button>

<button> 버튼 눌러요 </button>

 

-hr태그 : 줄 삽입 <hr>

---

 

CSS

HTML로 뼈대를 만들어 준 이후에, 색을 넣거나 크기 또는 위치를 조정하는 듯 CSS로 꾸며줄 수 있다. 

 

<style>태그 안에  입력하거나 stylesheet으로 별도 파일로 작성할 수 있다.

 

<style>

	*{
	font-family: 'Do Hyeon', sans-serif;
      }
     
  .mybtn{
      width: 300px;
      height :200px;
	  color: white;
      text-align: center;
      margin: auto;
      display: block;
      }
      
</style>

- *{ } : '모든 스타일에 적용한다' 의미

 

- HTML에는 글 속성 & 박스 속성이 있는데, 박스 속성일 경우 가로, 세로 개념이 있다.

반대로 글 속성일 경우 가로, 세로 개념이 적용되지 않기에 disply: block; 사용한다.

 

- HTML에서 구역을 나누어주는 div 태그의 범위 확인을 위해 background-color: green(yellow 등); 을 주어

범위를 확인할 수 있다. (div는 눈에 보이지 않기 때문에)

 

 

---

참고 : [스파르타코딩클럽] 웹개발종합반_1주차 중 HTML /CSS 익히기