2024-10-28(월) 웹 5일차(css 기본 셋팅)

# 수업시간에 띄어놔야 할 창

사이트 이름	사이트 주소
수업페이지	url
코드펜	url
git-hub	url
피그마 예제보기	url

 

---

# 1교시

 ## 저번 수업 때 배운 내용 복습

vscode 사용)

- 폴더를 먼저 열어서 그 안에 파일을 만든다.

 1) 원하는 경로에 폴더 생성(ex. 다운로드) →  Window+E(파일 탐색기 열기) → 다운로드 경로에서 새폴더 만들기 

 2) 폴더 빈 공간에서 우클릭해서 code로 열기

 3) vscode 내에서 새 파일 생성 아이콘 클릭 후 파일을 생성(index.html, style.css 파일 생성)

 4) css 파일이 제대로 연결 되었는지 확인

실습

 

폴더와 파일 개념)

1) 파일 

: 어떤 파일 형식인지 식별 or 확장자가 붙어있는 것들을 파일이라고 칭함

 

2) 폴더 

: 파일을 깔끔하게 정리해주는 것

: 새폴더 만들 때 한글로 이름 지정하면 안 됨

→ html, css, js 전부 다 파일임

 

 

* 타이포그래피(Typography )디자인

- 참고 사이트

→  타이포그래피(Typography )디자인을 기반으로 함

 

 

DOM)

: 눈에 보이지 않는 어떤 특정한 모델(웹 문서의 구조화된 표현) / 가상의 구조를 만들어 줌

1) HTML태그에 있는 문서들을 객체로 생성해주는 것

2) 프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작한다.

3) 주로 자바스크립트에서 웹 페이지의 요소를 선택, 수정, 추가 또는 제거할 때 사용된다.

4) 트리 구조: DOM은 트리 구조로 표현되며, 각 노드는 웹 페이지의 다양한 부분 (예: 요소, 속성, 텍스트 등)을 나타낸다. 

→ 자바스크립트 배울 때 중요함(트리형 구조)

- 참고사이트

ㄴ 자바스크립트(제이쿼리) / 객체 -> 노드 

---

# 2교시

화면전환)

1. Alt를 꾹 누른다.(원하는 창이 선택될 때 까지 Alt를 놓지 않는다.)

2. tab키를 가볍게 토독 누른다.

3. tab키나 방향키로 원하는 화면을 선택한 상태에서 Alt키를 놓는다.

ㄴblock은 display: block;임

ㄴ inline은 button태그에 쓰임

---

# 2교시-3교시

## GS 에너지 구현

ㄴ 폴더 이름은 꼭 영문으로 사용!

 

body)

: 화면 해상도 크기 만큼

 

 

block 요소)

- 상위태그 크기만큼 상속받음

- 한 줄에 하나씩 나옴!!! / 바로 위의 태그 상속(무슨 일이 있어도)

 

 

노멀라이즈)

- 태그를 깨끗하게 커스텀

 1) Body → margin, padding : 0;

 2) a  → color: inherit(컬러 초기화) / text-decoration: none(텍스트 밑줄 x) 등... 예제를 직접 구현하면서 많이 적용해볼 것임

css 기본양식

 

스타일 가이드)

- 폰트 가이드

  1) 어떤 폰트를 사용했는지

  2) 어떤 두께를 사용했는지

  3) 어떤 사이즈를 사용했는지

→ 편리함

- 컬러 가이드

- 여백 가이드

  (4배수라는 규칙을 지켜서 디자인→스타일 가이드를 할 필요가 없음, 똑같은 거 복사해서 사용하면 되기 때문)

ㄴ 디자이너가 직접 만들어야 함(폰트랑 두께, 사이즈 등 정리해서 text-gide를 만들어놔라)

ㄴ 폰트 연결(눈누, 구글 폰트)

 

ㄴ 폰트 적용 잘 됐는지 확인(font-weight: 글꼴 두께)

ㄴ개발자 모드(F12) 창을 켜서 적용 잘 됬는지 확인 

ㄴ 노멀라이즈는 한 줄로 작성(가독성)

 

 

자간)

- 웹 브라우져 기본 폰트 16px

- 참고 사이트

- 참고 사이트

rem 단위 

각각의 폰트 사이즈 적용하려면 em단위로 사용해야 함(전체 선택자에 써야함)

 

→  반응형 사이트를 만드려면 rem, em 모두 사용해야함

 

 

ㄴ 신중하게 선택해야 하는 선택자 중 하나임

ㄴ 자간 적용하기 전 / 후

ㄴ 해상도

 

ㄴ모바일 버전

---

# 숙제(밑줄친 부분 위주로 읽고 실습하기)

 

- 교재(52p-60p) 읽어보기

- 53p 인라인 요소 : 텍스트처럼 내용을 수평으로 표시 / 대표적으로 <span> 태그 / 인라인 요소는 자신이 필요한 만큼만 크기를

  계산한다.

- 54p : 문장 내에서 특정 부분에만 강조 효과를 주기 위해

- 55p 블록요소

- 58p~59p 요소의 계층 구조

- 폰트 적용복습

- gs 에너지 혼자 상단바 구현해보기!!!

---

css 기본 셋팅_코드펜

https://tony4679.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EB%B3%B8%EB%AC%B8-%EA%B8%80%EC%83%81%EC%9E%90-%EB%A7%8C%EB%93%A4%EA%B8%B0

티스토리 본문 글상자 만들기