[SEB FE] Section1 unit4 회고 | html 입문... 재미있다 근데 암기...
💡 html, css, javascript의 간단한 정의
- html : 구조
- css : 스타일
- javascript : 상호작용
💡 html의 기본구조
📌tag
: 부등호 <>로 감싸져 있음.
<tag></tag>의 형식으로 닫는 것이 일반적이지만 self-closing tag도 있다.
📌self-closing tag
: <tag/> 의 형식으로 태그 사이에 아무것도 들어가지 않을 때 사용한다.
img태그의 경우는 <img scr=""/>로 닫지 않아도 된다.
📌attribute (속성)
: 태그 뒤에 붙어 기능을 제한하는 용어
📌<div>와 <p>의 차이점
<div>: 구분할 때 사용하는 태그. margin 없음.
<p> : paragraph의 약자. 단락 구분할 때 사용되는 시멘틱요소. margin이 포함되어 있음.
📌<div>와 <span>의 차이점
<div> : block 속성으로 한 줄 차지.
<span> : inline 속성으로 content만큼의 width 차지.
💡 자주 사용되는 태그들
<ol> : ordered list, 순서가 있는 리스트
<ul> : unordered list, 순서가 없는 리스트
<li> : 위 부모태그 아래에 들어가는 자식태그
<input>
: 다양한 type 속성이 있어 checkbox나 typebox 등을 삽입할 수 있다.
닫는 요소가 없다.
<input type=""> 에 들어가는 속성들
- checkbox
- radio
- time
- date
- file
- number
- placeholder : 입력 값 힌트
<lable> : <input> 요소 아이디 지정 후 라벨에 for 속성 사용해서 연결
<input type="radio" id="test"/>
<lable for="test"> test1 </lable>
<select> : 드롭다운 박스
<boader>: 바깥 선을 만드는 태그
<form> :
<textarea.name="text" id="text_form" cols= rows= >
<button type ="button"> : 클릭
<button type ="button"> : 제출
<button type ="button"> : 리셋
<script>
: 자바스크립트 코드 사용할 수 있음, scr 속성 사용해서 이어주는 게 더 바람직함.
javascript 조금 맛을 보고 html로 넘어오게 되었다.
이번 유닛에서는 html, css, javascript의 정의가 무엇인지,
html 구성요소와 다양한 태그 그리고 semantic 요소에 대해 공부했다.
이번 유닛에서 어려웠던 부분은 html 구성요소, 태그, 시멘틱 요소들이었다.
갯수가 너무 많아서 자꾸 까먹기도 하고... 쓰려다가 다시 앞을 들여다보고를 반복했다.
어떤 게 시멘틱 요소였지 하고 자꾸만 까먹어서 이건 날을 잡고 한 번 외워야겠다.
오히려 좋아 이거 배우고 나니까 velog 쓰는 게 한결 편하다 ㅎㅎ
역시 암기랑 재미는 비례하는건가😖