2023.4.11.
*수업 정보
프론트엔드(2주)
-입력하면 결과 나옴
-HTML5/CSS3
-오전 : 이론, 오후 : 실습
1일차 : 기본태그/레이아웃 설정
프론트엔드 : 시각적인 설계(몸)-> 웹페이지에서 보이는 화면 설계
백엔드 : 데이터베이스 관리(정신)->클릭 후의 설계
*프론트엔드 - 크기, 위치 등 조정 및 반응형 작업을 개발함
UI (User Interface) : 시각화되는 작업(사용하기 편하게, 아름답게) ex.로그인 비디오
UX (User Experience) : 사용자 경험(정보제공, 만족감)
사용자와 상호작용 처리 : 입력 받은 데이터 처리, 이벤트
UI/UX 디자인 : 굿디자인(7개) ex)의자
1. 합목적성(기능성) - 편안,튼튼,아름다움 등
2. 심미성
3. 창조성
등등
●웹사이트 제작 방법(목적)
: 재미있고(흥미) 유용하게(정보)
사용자를 끌어와야 함
●웹표준이란?
월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 용어
●UI디자인 콘셉트
1콘셉트 키워드 도출
2디자인 콘샙트 정의
3감성적 표현
4인지적 니즈
●디자인 콘셉트의 시각화 요소
-시각 디자인 요소
1타이포그래피
2색채
3레이아웃
●GUI스타일 가이드 작성 시 고려사항
정보저달목적, 키워드, 편안한 화면, 사용자 경험 만족도, 아이콘 사용(3개 이상), 일관성유지(정렬 등), 심미성, 단순성
●html5 이란 ?
웹페이지를 만드는 언어(데이터 표시)
●css3 란?
웹페이지를 디자인 해 주는 언어(데이터 디자인)
•프론트엔드를 개발하기 위해 필요한 vsc 설치 및 환경설정
**에디터Edit 설치 / 크롬 기준
●vsc(Visual Studio Code)검색
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
윈도우 or mac os 다운로드 클릭
동의합니다 - 설치
실행 화면애서 웰컴창은 무시한다(닫기)
●설정 방법
•왼쪽 하단 네모 4개(Extensions) 클릭 후 live / auto / elm 검색해서 다운로드 하기
Live Server : 결과 미리보기
Auto Rename Tag: 앞뒤 태그를 같게 해줌
Elm Emmet : 빠르게
•왼쪽 하단 설정의 세팅 들어가서(단축키 등)
zoom 검색 : Editor: Mouse Wheel Zoom 체크
-> 마우스 휠로 화면 크기 조정
tab 검색 : Editor: Tab Completion을 on으로 변경, 4칸으로 설정
●vsc 작동 및 실행 방법(html)
내 컴퓨터 - 폴더새로만들기(html)
하위 폴더에 css , img 만들기
왼쪽 상단 파일 오픈폴더 - 파일 가져오기(html)
상단 흰색 동그라미는 저장이 안되었다는 표시 -> 파일-오토세이브 체크 (자동 저장 버튼)
가지고 온 폴더에 웹파일 생성
웹파일의 확장자는 반드시 html 으로 ex) ~~.html
*주의! 파일 생성 시 폴더 몸통을 눌러서 새로 만들기 해야함 아니면 폴더 하단의 폴더로 생성 됨
Tag(태그) : Element(요소)
속성 : 태그 안에 쓰는 옵션
●생성된 파일 페이지에 "!" 작성하고 엔터 누르면 자동으로 하단의 구조가 작성 됨
<!DOCTYPE html> // 웹표준 htmls 문서임을 알려줌
<html lang="en"> // html 시작을 알림
<head> // 이 문서의 정보를 알려주는 태그
<meta charset="UTF-8"> //(제작코드)유니코드-전 시계 언어를 모두 표현(한글, 한문, 아랍어, 영어 등)
<meta http-equiv="X-UA-Compatible" content="IE=edge"> // 지워도 됨
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // 반응형 디바이스 설정
<title>Document</title> // 문서의 제목
</head>
<body> // 본문 시작
<div>준비</div> // 바디 사이에 출력을 원하는 내용 작성 후 오른쪽 버튼을 눌러 오픈위드라이브서버 클릭하면 웹페이지 생성
</body>
</html> //html 끝을 알림
●단축키
ctrl + /- 동시에 누르면 화면 크게 /작게
shift alt 마우스커서 아래로 드래그 : 원하는 부분 동시에 타이핑 가능
shift alt ↓ : 소스코드 복사
태그 * 3 : 태그 3개 생성
●주석(주석 안에 또다른 주석 사용 불가!!)
html : <!-- ~~ -->
css : /* ~~ */
●기본태그
<br> : 줄바꿈
<p></p> : 문장 태그(자동 줄바꿈-2줄), 그림도 가능, p태그 안에 p/div 사용 불가
<img src="경로"> : 그림 태그
<img src="./img1.jpeg" alt=""> //alt 웹접근성에 도움 - 이미지를 보여줄 수 없을 때 대체할 텍스트를 명시
<img src="./img2.jpeg" alt=""title="한잔할까요?"> //title 마우스를 그림에 올려 놓으면 보이는 글씨
<span> : 글자태그(글자 만큼 크기가 설정 됨)
<div> : 항목 구분 태그(=공간 구분 태그) - 항목을 구분해줌, div 태그 안에 p/div 사용 가능
<h1~6> : 제목 태그, 숫자가 작을 수록 글자가 큼, 자동 줄바꿈 기능, 진하게 나온다(h4가 기본)
, : 다중 선택자
●인라인스타일 : 태그 안에 스타일을 지정
내부스타일 : <head>와 </head> 사이에 스타일을 지정
외부스타일 : 독립적인 파일에 스타일 지정 - css 폴더에서 생성하기 ex 폰트사이즈, 그림크기, 글자색 등
우선순위 : 인라인 > 내부 > 외부
vsc 작동 및 실행 방법(css)
●탐색기-Explorer (왼쪽 상단)
css폴더에 index.css 파일 만들기
css에 작성한 디자인을 웹페이지에 표현하기 위해서는 html 파일과 연결되어야 함
head 사이에 link 를 입력하여 두 개의 파일 연결
ex) <link rel="stylesheet" href="css/자기소개서.css">
●디자인 요소 작성하는 공간(스타일을 설정함)
border(테두리): 1px solid blue; (선너비,선모양,선색상)
tip. #ccc 등 #을 통해 색 지정이 가능하고 색이 보이는 네모 상자를 눌러 원하는 색상 선택 가능
● 기본 태그
font-size(글자 크기): 40px;
width(상자 길이): 500px;
height(상자 높이): 100px;
●display 속성
-block 요소 : 한 줄에 하나의 태그만 올 수 있다. 세로 배열(p,div 등) - 크기 변경 가능
-inline 요소 : 한 줄에 여러 개의 태그가 올 수 있다. 가로 배열 (img, span 등) - 크기 변경 불가
->display 를 통해 요소 변경 가능 /* 블럭요소로 변경해서 크기 조정 가능 */
ex) display: inline-block;
inline-block 인라인(외부적) 구조에 블록(내부적) 특성을 가짐 - 크기 조정이 가능한 특성
●선택자 : Tag, Class, Id, Name, *
태그를 하나로 묶어서 관리, 몇 개의 태그만 골라쓰고 싶을 때 활용 가능하다.
Class : .(점)으로 표시, 중복 사용 가능
* : 전체 선택자
●상자 속성
background-color : 색상
background : 색상, 그림
text-align : 정렬(가로세로중간)-글자, 그림 등
line-height : 글자 위치 조절(높낮이)
.main div{
float(정렬): left;(왼쪽부터 배치) right; (오른쪽 부터 배치)
-부모 태그 안에 있는 자식태그들을 정렬 시킬 때 사용
width: 300px;
height: 100%; (부모와 같은 높이=inherit)
border: 1px solid red;
}
● * : 모든 기본 태그 설정 가능(공통 설정)
부모태그 : 위에 있는 태그
자식태그 : 부모태그 안에 있는 태그
●css 파일에서 스타일 설정 할 때 .(점)클래스명 : 클래스를 호출하여 디자인 요소 작성
●여백 설정
border : 1px solid black 에서 테두리도 크기에 포함된다 (1200px : 1198px 사용 가능)
-> border 가 아닌 outline을 사용하면 테두리가 가상의 선(밖)으로 계산 되는 느낌으로 1200px 전부 사용 가능
-margin : 바깥쪽 여백
margin: 0 auto;
^ ^
(상하) (좌우)
-padding : 안쪽 여백
padding을 주면 padding 만큼 크기가 커진다.
-box-sizing : border-box; 박스 사이즈에 맞게 조정
●기능
cursor: pointer; 클릭 창(커서 만듦)
text-indent: 10px; 들여쓰기 (숫자가 양수 일 때) / 음수면 내어쓰기
*수업이 끝나고 무려 5시간동안 끙끙 거리며 만든 엉망진창 과제 ,,
첫 수업 후기
-수업이 너무 빠르다고 느꼈다
-인터넷 후기에서 본 것 처럼 코드를 따라치다가 수업 내용을 놓치기도 했다
-오전에 입단식 진행하느라 한시간 삼십분 늦게 수업을 시작해서 많은 내용을 짧은 시간에 넣으려고 하니까 힘들었다
-vsc에서 파일 생성 시 폴더 몸통을 눌러서 새로 만들기 해야하는 것을 몰라서 폴더 하단의 폴더로 생성 되어 오류가 나기도 했고
-주석안에 주석을 작성해서 오류가 나기도 했고
-뭐라고 적혀있는지 잘 안보여서 오타가 나서 오류가 발생 했다
-레이아웃에 대한 이해가 전혀 안되었다
-집가서 복습하면서 모르는 부분을 인터넷으로 검색해서 봤는데 필기본을 보니 수업해서 언급했던 내용이었다^^,,
-짧은 시간 많은 내용을 학습하려다 보니 개념을 정말 간단하게 언급만 하고 지나가서 바로 이해하기 어려우니 복습은 정말 필수인 것 같다
어쨋든 앞으로 화이팅,,
배우는 단계에 있는 사람이 적은 글 입니다,,
잘 못된 정보가 있을 수 있으니,,지적 또는 참고 할 내용 공유해주시면 감사하겠습니다:)
