Chapter 1. 컴퓨터와 프로그래밍
컴파일(Compile) : 프로그래밍 언어로 작성된 소스 코드를 컴퓨터가 이해할 수 있는 기계어 코드로 번역하는 과정
빌드(Build) : 작성한 소스 코드를 실행할 수 있는 산출물로 변환시키는 과정을 의미하며 그 과정 중에 컴파일이 포함된다.
통합개발환경(Integrated Development Environment, IDE) : 코드를 작성할 때 사용하는 프로그램으로 프로그래밍에 필요한 모든 작업을 하나의 프로그램 안에서 처리할 수 있도록 만들어진 프로그램. 대표적으로 Visual Studio, Eclipse 등이 있다.
Chapter 2. 웹
💡 학습 목표
- 웹 클라이언트와 웹 서버가 무엇인지 설명할 수 있다.
- 웹 프론트엔드에서 활용하는 핵심 기술인 HTML, CSS, JS가 무엇이고 어떤 역할을 하는지 설명할 수 있다. </aside>
Client Server Architecture(2-Tier Architecture) : 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것이다. 리소스를 사용하는 앱이 “클라이언트”, 리소스를 제공하는 곳은 “서버”라고 명칭한다.
웹 프론트엔드
HTML : Structure(구조)
CSS : Presentation(스타일) JS : Interaction(상호작용)
Chapter 3. HTML(HyperText Markup Language)
💡 학습 목표
- HTML이 “구조를 표현하는 언어”라는 것을 이해한다.
- HTML의 기본적인 구조를 이해한다.
- 자주 사용되는 HTML 요소(Element)를 설명할 수 있다. <div>, <span>, <ul>, <ol>, <li>, <input> 등 </aside>
Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소
트리 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
자주 사용하는 요소들
- <div><span> : div태그는 한 줄 차지/ span 태그는 컨텐츠 크기만큼 공간 차지
- <img> : 이미지 삽입 <img src=”https://i.imgur.com/JVAj4t0.jpg”>
- <a> : 링크 삽입 <a href=”https://codestates.com” target=”_blank”>코드스테이츠</a>
- <ul><li> : 리스트
- <input><textarea> : 입력 폼 <input type=”text” placeholder=”type here”> <input type=”radio” name=”option1”>
- <button> : 버튼
Chpater 4. CSS
💡 학습 목표
- CSS의 사용 목적을 이해하고, 기본적인 문법과 구조를 설명할 수 있다.
- HTML에 CSS를 적용하는 방법에 대해 이해할 수 있다.
- HTML 파일 내에 CSS를 정의하는 것을 권장하지 않는 이유를 설명할 수 있다.
- CSS를 이용해 텍스트를 꾸밀 수 있다.
- 기본적인 CSS 박스 모델을 이해하고 설명할 수 있다. </aside>
CSS: 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이며 HTML 없이 독립적으로 기능하지 않는다.
사용자 인터페이스(UI; User Interface): 컴퓨터와 교류하기 위한 연결고리
HTML 파일 내에 CSS를 정의하는 것은 관심사 분리(HTML은 웹 페이지의 구조와 내용만, CSS는 디자인만 담당하여 역할을 분리하는 것) 측면에서 권장되지 않는다.
id / class
id는 #으로 선택, 한 문서에 1개만 적용 가능
class는 .으로 선택, 여러개 적용 가능
자주 사용하는 속성
- 색상 : color, background-color, border-color
- 글꼴 : font-family
- 크기 : font-size 절대 단위 : px, pt 등/ 상대 단위: %, em, rem, ch, vw, vh 등 **px(픽셀)**은 글꼴의 크기를 고정하는 단위이기 때문에 브라우저 사이즈 등 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우에 사용한다. 일반적인 경우 사용자가 설정한 기본 글꼴 크기를 따르므로 접근성에 유리한 rem을 추천한다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되어 계산이 어렵다)
- 굵기 : font-weight
- 밑줄 : text-decoration
- 자간 : letter-spacing
- 행간 : line-height
- 정렬 : text-align (left, right, center, justify)
박스 : 웹 페이지 내의 콘텐츠 고유의 영역
<h1><p>와 같이 줄바꿈이 되는 태그는 block 박스이며 <span>과 같이 줄바꿈이 되지 않는 태그는 inline 박스이다.
박스의 크기 디자인 시 박스에 적용할 여백까지 고려해야 한다
'CodeStates_BE_44 > TIL' 카테고리의 다른 글
| Day 6. [Java] 연산자, 콘솔 입출력, 조건문 (0) | 2023.02.20 |
|---|---|
| Day 5. [Java] 변수와 타입, 문자열 (0) | 2023.02.20 |
| Day 4. Git (0) | 2023.02.20 |
| Day 3. Linux (0) | 2023.02.20 |
| 코드스테이츠 백엔드 44기(정부지원 6회차) 1일차 (0) | 2023.02.13 |
