2024-10-16(수) 웹1 1일차(html, css 구조 파악)
# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 코드펜 | url |
| git-hub | url |
| 피그마 예제보기 | url |
# 수업 준비 사항
- 멘토님 통해서 교재 구입
- 3일 동안 교재로 수업x
# HTML, CSS, JS 기본 구조
HTML)
: HyperText Markup Language
- 공간만 제공 / 눈에 보이지 않는 구조, 뼈대
- 전체적인 구조
- 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 구조와 의미를 부요하요 정적 언어로 웹의 구조를 담당
CSS)
: Cascading Style Sheets
- html 디자인 하는 구조(벽)
- 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격
- 마크업 언어(HTML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠 구조를
꾸며주는 정적 언어로 웹의 시각적인 표현을 담당
JavaScript)
- 컨텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 담당
- 사용자랑 상호작용
태그)
- 브라우저가 알아들 수 있도록 해 줌
웹의 구성요소)
| HTML | 웹의 기본적인 내용과 의미를 담당 |
| CSS | 페이지의 외형을 담당 |
| JS | 페이지의 동적 동작을 담당 |
# GIT HUB
-실제 포토폴리오 작업할 때 많이들 사용, 실무에서도 협업할 때 사용
- 포스팅(고유의 아이디)
# 자주 사용하는 단축키
| 단축키 | 내용 |
| Ctrl | 띄어쓰기를 기준으로 이동 |
| Ctrl +T | 새탭 열기 |
| Ctrl + W | 탭 닫기 |
| Window + Shift +S | 캡처 |
| Window + S | 돋보기 열기 |
| Window + E | 파일탐색기 열기 |
| Ctrl + A | 전체 선택 하기 |
| Ctrl + K |
링크 걸기 |
| Ctrl + S | 저장하기 |
| Ctrl + X | 잘라내기 + 복사 |
| Ctrl + V | 붙여넣기 |
| Ctrl + Z | 되돌리기 |
| Ctrl + Shift + Z | 되돌리기를 다시 되돌리기 |
# 코드 구현할 때 유용한 단축키
| 단축키(코드) | 내용 | 기능 |
| Shift | 텍스트 선택 | |
| Shift + 방향키 | 한 칸 이동 | |
| Shift + Home | 문장 가장 앞쪽으로 이동 | |
| Shift + End | 문장 가장 뒷 쪽으로 이동 | |
| Shift + Ctrl | 단어나 띄어쓰기 기준으로 이동 | |
| Ctrl + Home | 문단 가장 앞쪽으로 이동 (최상단) |
|
| Ctrl + End | 단 가장 뒷 쪽으로 이동 (최하단) |
|
| Ctrl + /(슬래시) | 주석 | - 메모와 협업 - 코드 비활성화 |
★ Shift를 누르면서 커서를 이동시킬 경우 커서 위치대로 텍스트를 선택할 수 있다. ★
# codepen_코드펜
- git hub랑 연동해서 로그인
- 새코드펜 창 열기
- 주소 : https://codepen.io/pen
코드펜 기본 설정)
1) 코드펜 셋팅 창으로 들어가기 -프로필 선택 후 -Settinng 클릭 / [설정_탭 메뉴]
2) 테마 설정
3) 글씨 설정(글꼴, 폰트)
4) 옵션 설정 - Autocomete꼭 선택!!!(css 자동완성)
5) 코드펜-좌측으로 보기
6) html에 body입려가고 Tab 누르면 자동완성
7) 실제 화면 창으로 확인-디버그 모드 선택
※ 선택자(상위) > 태그 선택자(하위)
주석)
- 용도: 메모와 협업, 코드 비활성화
태그)
- <body> 여는 태그
- </body> 닫는 태그
- body를 기준으로 <div></div> 엘리먼트
* 엘리먼트 : 여는 태그와 닫는 태그 사이에 있는 요소
body 태그)
- 사용자 접속 기기 해상도 만큼 크기를 가지는 태그(반응형, 대응형 하는 태그)
- 문서의 몸통을 나타내는 태그
- html태그나 별명을 불러올 때 명칭을 선택자라고 부른다.
ㄴ 태그 선태자, 아이디 선택자, 클래스 선택자 등...
ㄴ 선택자 {
속성: 속성 값;
}
CSS 작성법)
- 선택자 {
속성: 속성값;
}
# 2교시
단축키와 주석 사용해보기
...
codepen.io
HTML태그와 body 태그
...
codepen.io
# 3교시
레이아웃을 구성하는 태그 - display: block;)
: 레이아웃을 구성하는 태그들은 특이한 특징을 가지고 있다.(한 번에 쭉 정리)
1) 너비가 상위태그 너비만큼 가지게 되었다.
2) 한줄에 무조건 하나씩 나온다.
3) 대표태그
: div(공간 분리), nav(메뉴), section(큰 구조 분리), ul(목록), li(리스트), aside(구조 외),
article(기사), header(상단), footer(하단), main(메인 구조)
| 태그 | 용도 |
| div | 공간 분리 |
| nav | 메뉴 |
| section | 큰 구조 분리 |
| ul | 목록 |
| li | 리스트 |
| aside | 구조 외 |
| article | 기사 |
| header | 상단 |
| footer | 하단 |
| main | 메인 구조 |
→ 전부 용도에 맞게 구현된 구조를 시멘틱 구조라고 부른다.
작은 요소를 구성하는 태그 - display:inline;)
: 작은 요소를 구성하는 태그들은 특이한 특징을 가지고 있다.
1) 너비가 하위태그 너비만큼 가지게 되었다.
2) 한줄에 같이 나오나, 공간이 협소하면 오른쪽 부터 한줄씩 줄바꿈 된다.
3) 대표 태그
ㄴ span(텍스트), a(링크 이동), img(이미지) ::before(가상공간), ::after(가상공간)
| 태그 | 용도 |
| span | 텍스트 |
| a | 링크 이동 |
| img | 이미지 |
| ::before | 가상공간 |
| ::after | 가상공간 |
★ 글자를 쓰는 태그는 block이 안됨(inline 이기에 한 줄에 같이 나옴)
ㄴspan...
# 배운 내용(복습 필수)
단축키와 주석 사용해보기
...
codepen.io
HTML태그와 body 태그
...
codepen.io
div태그와 display
...
codepen.io
span태그와 display
...
codepen.io