1주차 강의

브라우저란?

• 정의: 인터넷을 통해 웹 페이지를 표시하고 탐색할 수 있는 소프트웨어
• 역할: 서버가 만들어 놓은 API 요청을 보내고, 요청의 답으로 받은 html 파일을 화면에 그려준다.

 

HTML

• 역할: 웹 브라우저에게 웹 페이지를 표시하는 방법을 알려준다.
• 구조
  • 일련의 태그(tag)로 구성되며, 태그는 각각의 의미와 목적을 가지고 있다. (즉, 뼈대)
  • head와 body로 구성된다.
    • head: 페이지의 속성 정보
    • body: 페이지의 내용
• 자주 사용하는 태그(tag)
  • div: 구역을 나누는 태그, 한 줄을 다 먹는다.
  • h\d+: 제목, 뒤의 숫자에 따라 크기가 달라진다. (숫자가 커질수록 글자는 작아짐)

 

css

• 역할: HTML을 통해 작성된 뼈대의 속성을 선택해 예쁘게 꾸며주는 코드

 

.html 파일 작성 순서

1. body에 명찰 달아주기
   
   1. <h1 class="클래스이름"> ... <h1>
2. head
   1. style 태그 생성 (<style></style>)
   2. 명찰 생성 (.클래스이름 {})

 

부트스트랩 (bootstrap)

• 예쁜 css 꾸러미

 

배포 방법

• 오늘 작업한 내용은 정적 웹페이지! 해당 페이지를 Github를 통해 배포해보는 방법을 배움.
  • 정적 웹페이지란?
    • 서버로부터 받은 내용이 고정되어 있어, 사용자에게 항상 동일한 콘텐츠를 제공하는 웹 페이지

• 주의 사항
  • Github에는 index.html 하나만 업로드할 수 있음
    • 이유는? Github 자체가 정적인 웹 페이지 호스팅 서비스를 제공하기 위해 설계되어 있기 때문!

 

정리

html: 뼈대
css: 꾸미기
javascript: 움직이기

 

참고

자주 사용하는 단축키

정렬 단축키: shift + option + F
주석 단축키: command + /

 

파일 분리 방법

1. 같은 폴더에 css 파일 만들기 (style.css)
2. head 태그에서 불러오기 (<link rel="stylesheet" type="text/css" href = "(css파일이름).css">)