· What?
HTML 기초
· 오늘 배운것
배운것을 기록은 했으나 틀릴 가능성이 매우 높고 수정할 내용이 대다수입니다.
HTML
- 문서의 구조나 내용을 다루는 언어
웹페이지의 틀을 만드는 언어
웹페이지나 어플이 HTML로 구성
- How to use HTML?
HTML은 tag들의 집합 - Tag 부등호(<>)로 묶인 HTML의 기본 구성 요소
- html 확장자 사용
<html> : 이 문서가 HTML 문서임을 명시
<head> : html 시작 태그로, 문서 전체의 틀을 구성
<title> : 문서의 제목, 브라우저의 탭에 보여짐
</head> : </태그이름>은 해당 태그가 끝났음을 의미
<body> : body 태그는 문서의 내용을 담는 곳
<h1> : heading을 의미하며, 크기에 따라 h1~h6까지 있음
<div> : content division을 의미하며, 줄바꿈됨
<span> : 줄바꿈이 없는 컨테이너- Self-closing Tag
닫는 태그가 존재하지 않는 태그도 있다.
태그 내부에 내용이 없다면, (와 같이 표현되는 경우) 와 같이 표현 가능
<img src="codestates-logo.png"></img>
<img src="codestates-logo.png" />HTML에서 자주 사용하는 태그
<div> Division <span> Span <img> Image <a> Link <ul>&<li> Unordered List & List Item <input> Input(Text, Radio, Checkbox) <textarea> Multi-line Text Input <button> Button
-
div VS span
div 태그는 한줄을 차지합니다.
division2
span 태그는 컨텐츠 크기만큼 공간을 차지합니다 span2 span3
division3 -
링크 삽입
<a href="https://codestates.com" target="_blank">코드스테이츠</a> //target="_blank"는 새탭으로 키는것 -
ul & li : 리스트
ul의 경우 숫자 리스트를 만드는 것이 아닌 동일한 리스트를 만들어줌
ol의 경우 숫자 리스트를 만드는 것
<ul>
<li></li>
<li></li>
<li></li>
</ul>- input, textarea: 다양한 입력 폼
<input type="text" placeholder="type here"> //텍스트 박스
<input type="password"> //패스워드 박스
<div>
<input type="radio" name="choice" value="a">a
<input type="radio" name="choice" value="b">b // 라디오 버튼처럼 한버튼이 눌리면 다른 버튼은 안눌림
</div>
<textarea></textarea> //여는태그와 닫는태그를 꼭 넣어야함 multiLine이 됨(줄바꿈)
<div>
<input type="checkbox" checked> checked
<input type="checkbox"> unchecked
</div>
<div>
<button>로그인</button>
</div>
//라디오박스는 그룹이 가능하고(이름을 같게하면 그룹화) 체크박스는 박스별로 체크반복문 문제풀이
str[]문자열[] 대괄호 안에 들어간 숫자는 n번째 str의 char가 나온다. str<num의 경우 undefined가 나온다.function countCharacter(str, letter) { let counter = 0; for (let i = 0; i < str.length; i++) { if (str[i] === letter) { counter = counter + 1; } } return counter; }
11번 내 풀이 MDN의 String.prototype.indexOf()를 참고하여 풀었다.
function countCharacter(str, letter) { let count = 0; let lett = str.indexOf(letter); for(i = lett; lett !== -1; lett = str.indexOf(letter, lett + 1)) { count++; } return count; }
- 문자열 내의 숫자 중 가장 큰 숫자를 문자열로 리턴하는 문제
function getMaxNumberFromString(str) { let maxNum = 0; for (let i = 0; i < str.length; i++) { if (parseInt(str[i]) > maxNum) { maxNum = parseInt(str[i]); } //parseInt() 괄호안의 문자열을 실수화 한다. } return String(maxNum); }
12번 내 풀이
쓸모없는 코딩이 너무 많다.let gmm = '';같은 문장을 쓰지말고String(num1);을 하는게 더욱 깔끔해 보인다.function getMaxNumberFromString(str) { let gmm = ''; num1 = 0; for (i = 0; i < str.length; i++) { let num2 = Number(str[i]); if (num1 < num2) { num1 = num2 } } return gmm + num1; }
- 문자열을 다른 문자열로 바꾸기
function replaceAll(str, from, to) { let result = ''; for (i = 0; i < str.length; i++) { if (str[i] === from) { result = result + to; } else { result = result + str[i]; } } return result; }// 풀이 === 내답
구글링 과정 중str.replace(a, b)를 봤다. str의 a를 b로 바꾸는 것인데 여러개를 바꿀 수 없고 처음 나온 a 만을 b로 바꿀 수 있다. 그리고str.replaceAll(a, b)를 이용하면 모든 a를 b로 바꿀 수 있다
기타
배열은 이름이 중복되면 마지막에 표기된것이 나온다.
let d = {
'height':180,
'weight':78,
'weight':84,
'temperature':36,
'eyesight':1
};
console.log(d['weight']); // 84가 나온다.마지막으로...
HTML과 CSS는 유튜브를 본적이 있어서 js보다 조금은 더 익숙한 것 같다. 해봤던 거라고 풀어지지 말고 더욱 열심히 공부하자
취업생각은 나중으로 미뤄놓고 지금 배우고 있는것부터 완벽하게 마스터하자
열심히 공부하자