HTML 핵심정리

haley·2021년 4월 15일
0

코딩의 기본

목록 보기
2/6

내 기준 가장 많이 쓰는 태그들을 정리했다.

a태그 : 경로를 보여주는 태그

<a href="링크 경로 [해당 페이지 내 경로 또는 웹사이트 경로를 적는다.]"> 화면에 표시 될 텍스트 </a>
**a태그를 쓰게 되면 밑줄이 생기는데 이게 싫다면 text-decoration =none;을 사용해주면된다.**

img태그 : 이미지를 보여주는 태그

<img src=이미지의 경로("./cat.jpg") alt="이미지가 나오지 않을경우 대체되는 텍스트" />

input 태그 : 사용자가 데이터를 입력하는 요소(태그)

<input type="text"/> // 사용자가 글을 입력할 수 있는 요소를 제공 
<input type="checkbox"/> // 사용자에게 체크여부를 입력받는다
<label>
<input type="radio" name="fruit[선택할그룹]"/>apple
</label>
<label>
<input type="radio" name="fruit[선택할그룹]"/>Banana
</label>

link 태그 : 외부문서를 가져와 연결할때 사용 (css파일 사용시)

<link rel="stylesheet[가져올 문서와의 관계]" href="./main.css[가져올 문서의 경로]"/>
<link rel="icon" href="./favicon.png">

script 태그 : 자바스크립트 파일을 가져오는 경우.

**자바스크립트를 html문서 내에서 작성하는 경우 
<script>
console.log('hello world!')
</script>

글자와 상자 ; 요소가 화면에 출력되는 특성, 크게 두가지로 구분된다.

인라인요소 : 글자를 만들기 위한 요소들
span 태그 : 대표적인 인라인요소, 본질적으로 아무것도 나타내지 않고, 콘텐츠 영역을 설정하는 용도이다. 이태그는 문서내에서 특정 글자의 스타일을 다르게하거나 바꿔줘야 할 때 사용됨
가로/세로 - 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
요소가 수평을 쌓인다.

<span>Hello</span>
<span>World</span>

-> Hello World 이런식

블록요소 : 상자(레이아웃)를 만들기 위한 요소들

  • div 태그 : 대표적인 블록요소, 본질적으로 아무것도 나타내지 않고, 콘텐츠 영역을 설정하는 용도.
    가로 - 부모요소의 크기만큼 자동으로 늘어난다.
    세로 - 포함한 콘텐츠 크기만큼 자동으로 줄어든다.

-h1~h6 태그 : 제목 태그

-p 태그 :문장을 의미하는 요소

-ul 태그 : 순서가 필용벗는 목록의 집합을 의미.(Unordered List)
-li 태그 : 목록 내 각 항목(List Item)

**주석 : <!-- 여기다가 쓴다 -->**
profile
앞만보고 가는 헤일리의 무작정 개발자 도전기

0개의 댓글