What I Learned Today

천리길도 한걸음부터 HTML, CSS 기초지식 쌓기

✅ HTML
구역과 텍스트를 나타내는 코드로 뼈대와 같은 역할을 한다. html 내에서 style 속성으로 꾸미기를 할 수도 있지만 안그래도 긴 코드 한페이지에서 보려면 너무 불편하여 css 파일이 탄생하게 되어 html 코드 내에서 css 파일을 불러와 적용한다.


HTML 은 크게 페이지의 속성 정보를 담는 head 와 페이지의 내용을 담는 body 로 구성된다.


HTML 부모- 자식 구조로 이루어져 있는데 가장 중요한 개념이라고 볼 수 있다.

ex.
빨간색 div 안에, 초록색/파란색 div가 들어있으면 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하며 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리이다. 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐다.

---

✅ css
잡은 구역을 꾸며준다 사람으로 치면 피부(?)와 같은 역할을 한다.

부트스트랩 사용하기

✅bootstrap이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다.)

가져다가 적시적소에 넣는 것도 센스요 능력이라고 한다.

Javascript 기초 문법 다지기

✅자바스크립트란?프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어

• 변수와 기본연산
  먼저 변수 대입의 의미는 오른쪽에 있는 것을 왼쪽에 넣는 것이며 사칙연산, 문자열 더하기가 기본적으로 가능하다.

let num = 10 

• 리스트:순서를 지켜서 가지고 있는 형태

let num = [0,1,2,3]

• 딕셔너리: 키key - 벨류value 값의 묶음

let num = { 
			'name':'멋쟁이토마토' ,
            'phone':'123-4567'
            }

• 함수

// 만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

• 조건문

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25)

• 반복문

for (let i = 0; i < 100; i++) {
	console.log(i);
}

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료

Challenges Experienced

소소하지만 vscode 에서 pyCham 으로 프로그램 바꿔 사용해보았다. vscode 만 사용했어서 익숙하지는 않았지만 단축키와 사용법이 유사하여 문제없이 사용했다.

글쓰기가 익숙하지 않아 개발일지 쓰는데 아직까지도 어색함이 있다. 어떻게 해야 좋은 개발일지를 쓸 수 있을까...지금으로써는 개발일지가 아닌 개발메모장 같은 느낌으로 다른 개발자의 일지도 좀 참고하면서 글을 써봐야겠다. 그리고 배운건 조금씩이라도 계속 정리해야겠다. 한꺼번에 몰아쓰기 너무 시간이 든다.