사진은 파리 센느 강
본격적인 수업 첫날이었다. 프론트엔드는 여러번 반복해서 배워서 쉽게 넘어갈 수 있을 줄 알았는데 생각보다 자잘한 문법들에서 많이 막혀서 그때 그때 찾아보고 써야되겠더라.. HTML CSS 연습문제 남은거 시간날때마다 가볍게 계속 다 풀어보기!
컴퓨터와 프로그래밍의 이해
Computer
- 입력받은 데이터를 일정한 규칙대로 처리해서 결과를 저장하고 출력하는 전자 장치
- SW + HW
Software
- System Software : 응용 소프트웨어 실행 환경 + 하드웨어 관리
- Application Software : 시스템 소프트웨어 제외한 모든 SW
Hardware
- CPU : 제어장치 + 연산장치 + 레지스터
- 기억장치 : 보조기억장치, 주기억장치, 캐시 메모리
- 입력장치
- 출력장치
- 시스템 버스 : 데이터 버스, 주소 버스, 제어 버스
Programming
- 특정 목적을 달성하기 위해 설계된 알고리즘을 PL을 사용하여 코드로 작성하는 것
- 컴파일, 빌드
웹
Client Server Architecture (2 Tier Architecture)
- 리소스 사용하는 앱(Client)과 리소스 제공하는 곳(Server)이 분리
- 여기에 리소스 저장하는 DB 추가되면 3 Tier Architecture
웹 프론트엔드
- HTML : 마크업 언어
- CSS : 스타일시트 언어
- JS : 특정 조건에 상호작용 추가
HTML
-HyperText Markup Language
-웹페이지의 전체적인 구조 기술
기본 문법
- 트리 구조
- div, span, ul, ol, li, input
- 연습문제
+)
hr : horizontal rule
pre : preserve all spaces and linebreaks in display
strong, em : emphasize parial text
mark : highlight
CSS
-Cascading Style Sheets
-웹페이지의 스타일/레이아웃 정의
기본 문법
- sample code
.box {
color: #155724; /* 글자 색상 */
background-color: #d4edda; /* 배경 색상 */
border-color: #c3e6cb; /* 테두리 색상 */
font-family: "SF Pro KR", "MalgunGothic", "Verdana"; /*fallback */
font-size: 24px;
text-align: left /* right, center, justify */
/*font-weight, text-decoration, letter-spacing, line-height*/
}-
인라인 스타일, 내부 스타일 시트, 외부 스타일 시트
-
class 는 . id 는 # 로 선택자 사용
-
박스
-
CSS 적용 우선순위: ! >> id >> class >> element
-
파일 추가 코드
<link rel="stylesheet" href="index.css" />