TIL 0323

오늘 목표

HTML&CSS ch.1 🙆‍♀️
Javascript ch.1 🙆‍♀️
자기소개 웹 페이지 제작 🙆‍♀️

오늘 공부한 것

HTML HyperText Markup Language
CSS Cascading Style Sheets

HTML elements

h1 - h6 = heading element로 h1이 제일 크고 h6가 제일 작다
p = paragraph 본문내용을 쓸 때 사용
a = anchor tag로 link를 연결할 때 사용 href 속성과 함께 쓴다

<a href="링크 주소">chick me!</a>

img = img 를 넣을 때 사용, src 속성과 함께 사용한다

<img src="파일명" />

video = video 를 넣을 때 사용 img 와는 다르게 closing tag 가 있고 자식 태그로 source 를 가지고 있다 width 와 height 를 설정 할 수 있고 controls 는 재생, 일시정지, 정지를 컨트롤 할 수 있는 속성이다.

<video width="300" height="200" controls>
	<source src="파일명" type="video/mp4">
</video>

unordered list = ul 로 순서가 없는 리스트를 만들 때 사용한다 ul 안에는 li 가 있어야 한다

<ul>
	<li>리스트1</li>
    <li>리스트2</li>
</ul>

div = 그룹을 만들어 영역을 나눌 때 사용한다

Javascript

Javascript 는 웹 사이트를 좀 더 역동적으로 움직이는 것을 도와준다
console.log() 는 콘솔에 메세지를 나타내거나 정보를 인쇄하는데 사용한다
한 줄 주석은 // 로 쓰고, 여러 줄 주석은 / 주석 / 으로 쓴다
javascript 에는 7가지 data type 이 있다
strings, numbers, booleans, null, undefined, symbol, object
Numbers 는 '' or "" 없이 그냥 쓰면 된다
Strings 는 문자이다 '' or "" 로 감싸서 쓰면 된다
기본으로 제공되는 산술 연산자는 +, -, *, /, % 이다
String.length 는 문자의 개수를 출력한다

console.log('Hello'.length);
//print 5

Math.random() 0 ~ 1 사이에 랜덤 수(소수 포함)를 출력

console.log(Math.random());
//print 0 - 0.9

Math.floor() 소수가 나오면 작거나 같은 최대 정수를 출력

let number = 11.11;
console.log(Math.floor(number));
// print 11

어려운 부분

HTML CSS 공부가 어느 정도 진행돼서 스터디 과제인 자기소개 웹 페이지 제작에 들어갔다. 디자인과였던 기억이 아직 남아서 그런지 몰라도 제작 들어가자마자 Pinterest에서 웹 디자인들을 리서치하기 시작했다. 디자인이 마음에 들어야 제작할 때 더 재밌지 않을까 하는 생각에 디자인에 좀 시간을 많이 쏟았다. 거기에 내가 구현할 수 있는 디자인으로 구상해야 해서 머리가 좀 아팠지만 나름 마음에 드는 디자인으로 만들었다.