[HTML] Html기초

코드스테이즈 41기 교육 내용을 정리하고 있습니다.

틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 

---

프론트엔드를 시작하면 가장 먼저 만나는 언어가 있습니다.

Html Css Javascript

각각의 역할을 살펴 보겠습니다.

• Html : 구조를 만드는 마크업 언어입니다.
• Css : 스타일을 담당하는 언어입니다.
• Javascript :  사용자와 개발자간 상호작용하며, 각 요소에 명령을 부여합니다

Html 기본구조와 문법

html은 Tag들의 집합입니다.

여기서 말하는 tag는 <>부등호로 묶인 html의 기본 구성 요소입니다.

 

태그는 보통 두가지 꼴로 사용합니다.

• <태그></태그>
• <태그/>

태그에 특정한 속성을 부여하고 싶은 경우 <태그 속성/> or <태그 속성></태그> 이렇게 사용할 수 있습니다.

 

자주 사용하는 html요소

• div : 한줄을 차지하는 태그이다.
• span : 태그 크기만큼만 차지한다.
• img : 이미지를 보여준다.
• a : 링크의 기능을 한다.
• input : text, radio, checkbix 등의 기능을 제공하는 삽입 태그이다.
• textarea : 텍스트 공간을 제공하며 줄바꿈이 가능하다.
• button : 버튼

<div id="divTag">div태그입니다</div><br/>
<span id="spanTag">span태그입니다</span><br/>
<!--  div와 span의 영역을 확인하기 위해 색상을 넣었습니다  -->
<img src="이미지 주소"><br/>
<!--  보통 src와 같이 사용하며, 이미지의 주소를 넣어줍니다.  -->
<a href="https://www.naver.com" target="_blank">네이버입니둥</a><br>
<!--  target을 사용하면 새창에서 링크가 켜집니다  -->

<!--  input, textarea, button을 사용해 간단한 회원가입창 만들기  -->
<hr/>
ID : <input type="text" placeholder="아이디를 입력하세요"> <br>
<!--  placeholder로 힌트를 보여줄수 있습니다  -->
PW : <input type="password"> <br>
취미 : <input type="checkbox" name="ck" value="a">눕기
<input type="checkbox" name="ck" value="b">앉기<br>
<!--  check박스와 radio박스는 서로 영향을 주기 위해서 name으로 그룹화 시켜야합니다 -->
성별 : <input type="radio" name="성별" value="M"> 남자
<input type="radio" name="성별" value="W"> 여자 <br>
간단한 소개<br>
<textarea></textarea><br>
<!--  textarea는 닫힘과 한 세트입니다.  -->
<button>회원가입</button>

+ target

   - 요청한 파일이 나타날 곳을 지정한다 
   - _self

      초기에 설정 되어 있는 값으로, 기존 탭으로 이동한다.

   - _blank

      새로운 탭 생성

 

시맨틱 요소

의미를 가진 태그이다

div나 span태그로만 작성된 코드가 있다면 각각의 태그들이 무슨 역할인지 쉽게 알아낼수 없을 것이다,

그래서 태그명만 봐도 역할을 알수 있게 해주는 요소들이다,

• <article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
• <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
• <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
• <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
• <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에<ul>을 넣어 목록 형태로 사용합니다.
• <main> : 문서의 주된 콘텐츠를 표시합니다.