* 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다.
1. 7월 6일 / 1주차
2. 알고 있는 내용
- HTML은 Hypertext Markup Language의 줄임말로, 웹사이트를 만드는 가장 기초가 되는 마크업 언어(프로그래밍 언어 X)다. 모든 웹 페이지는 HTML을 이용하여 그 구조가 결정된다.
- HTML을 구성하는 기본 단위는 태그이다. 여는 태그와 닫는 태그를 이용하여 만든 것들을 하나의 element(요소)라고 부른다. <html>, <head>, <body>는 HTML 문서의 전반적인 구조를 정의하기 위해 사용된다.
- 몇몇 HTML 태그는 attribute(속성)를 이용하여 추가적인 정보나 명령을 받을 수 있다. <img src=""> 태그는 src 속성을 통해 이미지가 위치한 곳에 대한 정보를 받을 수 있다. <a href=""> 태그는 href 속성을 이용하여 링크를 생성하고 웹사이트 내부의 다른 컨텐츠나 외부 자료료 연결할 때 사용할 수 있다. 문서와 문서를 연결시켜주는(링크) anchor 태그의 역할은 Hyper Text Markeup Language 에서 Hyper Text(서로 연결되어 있는 문서 혹은 텍스트)를 의미한다.
- HTML, CSS, JS 역할
- CSS 선택자:
1) Type: HTML 태그 종류
2) Class: 클래스 명 앞에 . 을 적어주어야 한다
3) Id: 아이디 명 앞에 # 을 적어주야 한다
4) 여러개의 선택자를 동시에 나열 가능하다(쉽표로 구분한다)
5) 특정요소의 하위를 선택 할 때 두 개의 선택자 사이에 공백을 한 칸 주면된다
6) #list > li와 같이 부등호 기호를 사용해서 지속 자식 요소를 선택할 수 있다
7) * 선택자는 페이지의 모든 요소를 선택한다
8) img[alt="hi"] 와 같이 특정 태그의 특정 속상값을 선택할 수 있다
- HTML 요소들은 크게 Block Elements, Inline Elements 로 구분한다. 블록 요소들은 사용 가능한 최대치의 폭을 차지하며, 넓이와 높이 값을 가질 수 있다. 인라인 요소들은 자기 컨텐츠만큼만 폭을 차지한다.
- CSS를 이용하여 컨텐츠의 위치를 조정할 수 있다. (dispaly: flex; display: inline-block; position: releative(or absolute);)
- 프로그래밍 언어(C, Java 등등)로 작성된 코드 > 운영체제의 로직에 따라 Compiler가 프로그래밍 코드로 작성된 코드를 Machine Language로 변환 > 컴퓨터는 Machine Langunage로 변환된 코드를 읽고 실행한다.
- User Interface(UI)란 사용자가 전자기기나 컴퓨터를 사용할때 어떻게 사용해야 하는지에 대해 설명할때 쓰인다. Command Line Interface(CLI)와 Graphical User Interface(GUI)는 두 가지 다른 종류의 UI로, CLI는 터미널이나 콘솔창을 통해 명령어를 입력하여 작업을 수행하게 되고, GUI는 시각적인 그래픽이나 이미지 혹은 아이콘 등을 이용하여 작업을 수행하게끔 도와준다
3. 알고 있다고 생각했지만 몰랐던 내용(또는 강조할 내용)
- HTML 만든 사람 팀 버너스 리(Tim Berners-Lee): 얼굴은 어떻게 생겼는지 몰랐음
- HTML 요소의 클래스명과 아이디명은 일반적으로 Kebab Case가 사용된다(ex. my-favorite-color): 카멜 케이스, 스네이크 케이스 등 혼용해서 쓰고 있었는데 앞으로 케밥 케이스로 통일시켜야겠다.
- 코드는 사람이 읽는다. 코드를 작성할 때 초보자가 가장 우선적으로 신경써야 할 부분은 읽기 좋은 코드, 이해하기 쉬운 코드이다. 코드 작성 스타일을 꼼꼼히 하자: 머리로는 알고 있었지만 그동안 실제로도 잘 지켰냐 하면..?
- 개발자도 결국 조직원, 투명하게 소통해야 하고, 사람들을 배려해야 하며, 본인의 맡은 일을 반드시 해내자: 여러번 강조해도 지나치지 않다. 어디에 있던지 간에 이와 같이 행동하는지 스스로에게 계속 묻자.
4. 몰랐던 내용
- Assembly Language란 컴퓨터 프로세서(CPU)를 다루기 위한 가장 기본적인 언어다. Assembly Language는 컴퓨터가 수행하는 모든 작업에 대해 1:1로 대응하는 수준으로 명령을 내리고 작업을 해야하므로 Low-level Language다.
- High-level Language는 크게 두 부류로 나눈다. 바로 Compiled Language와 Interpreted Language이다. Compiled Language는 프로그래머가 작성한 코드를 모두 다 특정 Machine Langue로 변환한 후에 프로그램을 실행한다. 운영체제 마다 또는 플랫폼마다 Machine Language가 다르기 때문에 다양한 곳에서 실행될 수 있는 프로그램을 만들고 싶다면 여러가지 버전으로 Compile해야만 한다. Interpreted Language는 프로그래머가 작성한 코드를 필요한 순간에 번역하여 컴퓨터에게 전달하고 명령을 내린다. Interpreter가 내장된 컴퓨터라면 실행할 수 있다. 그러나 프로그램이 실행됨과 거의 동시에 번역 작업이 이루어지기 때문에 성능 상의 약점이 있을 수 있다.
5. 추가 학습 자료
- 반드시 기억해야 하는 CSS 선택자 30개:
https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048
- 개발자 도구 사용법: https://www.youtube.com/watch?v=s0RI4IXKE_o
- CSS 레이아웃 학습: https://ko.learnlayout.com/toc.html
- 게임으로 배우는 CSS 레이아웃 학습: https://flexboxfroggy.com/#ko
'JavaScript > 스타터 키트' 카테고리의 다른 글
| [4주차] Step3(JavaScript Part3) (0) | 2022.08.02 |
|---|---|
| [3주차] Step2(JavaScript Part2) (0) | 2022.07.20 |
| [2주차] Step2(JavaScript Part1) (0) | 2022.07.13 |
