2024. 07. 17(목) UIUX 웹 1일차
[1,2 교시]
* 김혜지 강사 010-4372-1301
ㄴ전화는 수업중 일때가 많아서 못 받을 수 있음
ㄴ 급하면 카톡으로 남겨주면 확인 후 바로 전화드림
- 교재 아직 안나와서 기다려야 함
- 웹디자인 개발사(2025년도 자격증 명칭 바뀜 / 1년에 4번 시험)
- 피그마+코딩(비쥬얼 스튜디오 코드_피그마)
- httml/css 의미 정도는 알고있어야 함
- 디자인(편집, 웹, uiux 다 배움), 개념
- 대전(공공기관), 기업 이미지 디자인(서울권 취업)
- 기획+퍼블리셔 = 초봉 높음 / 편지디자인+퍼블리셔 = 초봉 높음
=> 최근에 두 가지를 접목시켜서 채용율이 많아지는 추세
*능력단위 평가
- 단어 의미 잘 알아두기
- 예제주고 실습하기
- 이론, 개념을 알아야 함(능력단위평가)
*포토폴리오
- 회사가 원하는 포토폴리오를 만들어야 함(채용, 직무, 적성, 흥미 찾는 것이 젤 중요)
- 면접관이 좋아하는 포폴을 만들어야 함
- 아이디어(기획 1:1 피드백)
- 기획이 오래걸려도 상관x(같이 조정해 나가면 됨)
*1:1 안성맞춤
1) UIUX 앱 브랜딩 디자인
2) 웹 디자인 + 편집디자인(포토폴리오 재구성) / 디자인 설계까지만
3) 개인브랜딩 사이트(리디자인x_포폴 활용도 떨어짐)
4)
*사람인 6개월 동안 자주 봐야함
- 채용공고 업무내용 자주 바뀌기 때문
* 만들어보고 싶은 앱(어플리케이션)
- 복지사각지대
* 티스토리(블로그/복습을 위한 메모장)
- 앞으로 여기에 메모
- 개인브랜딩 포폴에 상단 링크로 띄어놓을 거임
* 웹디자인 대행사
=> 웹디자인 + 편집디자인 + 시각디자인
- 실력 1년 안에 급 상승, 업무강도 좀 높음
*단축키
- ctrl+t 새탭열기
- ctrl +s 자동저장
- F12
- ctrl + enter 다음 줄에 바로 써짐
* 숙제
- 구글 ID, PW 알아오기
[3교시]
김영원 강사님_uiux 디자인 쪽
- ncs 교재 따로 나옴
* 코드펜(언어로 할 때 눈에 바로보이는 앱)
- 구글 연동
- 회원가입
* visual studio code설치
ㄴ+ 파일열기
ㄴ+ 파일생성 > 파일명 "a.html"
ㄴ + !+Enter: html 기본값 자동생성
ㄴ 왼쪽 하단 5 번째 아이콘 누르고 검색창 kor 치면 언어 한국어로 변환 가능
- <head> 여는 태그
</head> 닫는 태그
▶ 단축키
- Tab: 들여쓰기
- Shift+Tab: 들여쓰기 취소(이전으로 이동)
- Tab : 오른쪽으로 이동
- Alt+Shift+방향키: 복제
- Ctrl+Enter: 다음 줄 생성
ㄴ 커서가 어디에 있든 다음 줄을 생성한다.
- Ctrl+Shift+L: 동일 구역 한 번에 선택
* HTML
- Hyper Text Markup Language
- 하이퍼링크(참조)를 통해서 문서에서 다른문서로 접근
- 코드를 해석해 브라우저 내에 보여주는 것 .a
* Markup
- 표시
* Language
- 언어
* Web browse_웹 브라우저
- 구글, 크롬(대표적, 일반적)
* rendering_ 렌더링
- 코드를 웹브라우저를 통해 해석, 표현되는 과정
- VScode, Brackets ...
* code_코드
- 코드를 해석해서 브라우저 내에 화면에 보여주는 것(구현한다)
- 코드를 해석, 구현하는 것을 렌더링이라 함
- 메모장으로도 코드 구현 가능
* body 태그
ㄴ <body> 실제 구현되는 부분
ㄴ </bdoy>
* 태그( <> )
- 정보를 정의하는 형태
ㄴ<> 홀화살괄호
ㄴ <태그명> 또는(내용) </태그명>
* 단일태그
- 단일태그, 콘텐츠를 감쌀 필요가 없다.
- 엘리먼트를 구분하지 않음
- 끝을 구분하지 않음
ㄴ <태그명> or <태그명/>
* 속성
- 각각의 태그에는 속성이 존재
- 속성 : 태그들의 부가적 기능을 정의해주는 것
- 정의해주는 개수는 제한이 없
ㄴ <태그명 속성명 = "속성값">
ㄴ 큰 따옴표, 작은 따옴표 모두 가능(구별x)
무엇을 넣든지 공백, Enter 1칸
* 코딩 저장
ㄴ Ctrl + s
ㄴ 저장 위에 파일 탭 누르고 자동 저장 선택
* 주석
- 사람들 간에 공유를 위한 메모/ 나 스스로 메모하는 것
- CSS, JS, HTML 다 다르다
- ctrl + / 누르면 주석으로 변함
- 드래그 하고 ctrl + / 누르면 주석 해제
* 태그
- !DOCTYPE html: 문서 첫부분 문서유형을 지정하는 단일태그 / <!--내용-->
- html : 실제 문서
- head : 웹 브라우저 가 알아야 할 정보
- Meta : 데이터에 관한 구조화된 데이터(전체 데이터를 설명해주는 것) / 문자세트, 페이지 설명 키워드 / Head 안에서 사용
- Document : 타이틀 제목
- p : 문단(Paragraph) : 박스를 감싼다
- h : 제목(Headine) : 제목요소를 나타낸다. /각각의 크기를 가지고 있다.
- hr : 수평선
-   : 띄어쓰기(no breaking space)
- br : 줄바꿈
- div : 속성이 block인 컨테이너 태그
<!-- 내용 -->
- 범위 주석은 범위 잡고
ctrl + /
- 내부에 작성을 할 때는 tab으로 떼라
- 복제 art+ shift + 방향키
* ctrl + enter 다음 줄에 바로 써짐
▶ 태그 구분★★★
- block(블록) : 자기가 있는 모든 너비를 차지
- inline(인라인) : 자기가 필요한 공간만 차지
ㄴ 줄 똑같은 걸로 뛰어도
▶ 컨테이너 태그
- 콘첸츠 레이아웃에 영향없이 묶어서 관리해주는 역할
- <div></div>
- div : 속성이 block인 컨테이너 태그
▶ 전역 속성
- 모든 HML 태그 공통으로 사용할 수 있는 속성(누구나 가지고 있음)
- 대표적 많이 사용하는 속성
ㄴ ex. id, classs, stlye...
* id : #이름
- 고유한 이름을 부여하는 것
- 두 개의 태그가 동일한 id를 갖지 않도록 주의
* class : .이름
- 유형별 분류할 때 사용
- 다중, 중복 사용 가능
* style
- 요소에 적용할 css를 선언
* contents
- 클래스를 가진 div 태그 3개
- 각각 내용 콘텐츠 1~3
- 무엇을 넣든지 공백과 Enter는 1칸을 차지
- vscode body 내에서 Enter를 해도 브라우저 상에서 줄바꿈이 되지 않는다.
- 줄바꿈 코드는 <br>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
UIUX 1일 차
이름 : 장주연
전공 : 사회복지학과
웹 : 0개월
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
ㄴstrong 태그는 inline
ㄴ 13-17번 / 다음과 마지막은 문단에 속해있는가
----------------------------------------------------------------------------------------------------------------------------------------------------------------
ㄴ "contents"라는 class를 가진 div 3개를 만들어라. / 각각의 내용은 콘텐츠 1~3
----------------------------------------------------------------------------------------------------------------------------------------------------------------
* css(Cascading Style Sheets)
- 계단에서 흐르는 양식, 판
- 계단식으로 스타일을 정의하는 시트
* style 시트에서
- class를 선택할 때
ㄴ .class명{}
- id를 선택할 때
ㄴ #id명{}
- 태그를 선택할 때
ㄴ 태그명{}
- 전체를 선택할 때 (전체선택자)
ㄴ * {}
* { }중괄호는 선언블록
----------------------------------------------------------------------------------------------------------------------------------------------------------------
ㄴ - contents(첫 번째 contents에 속성 입력)
ㄴ width : 속성명(너비) / 300px 속성값 / widht: 300px;
ㄴ - "ct"로 그룹핑하여 값이 동일한 border값을 한 번에 설정
----------------------------------------------------------------------------------------------------------------------------------------------------------------
* 세미콜론, 콜론 구분, contents트도 주의/세미콜론 잘 못 찍으면 안됌, 중괄호도 주의, 중괄호 위치는 상관 없음
* F12 탭 누르고 실수하면 안되는 것을 명심
* ;선언의 끝
* crtl+shift+l 깜빡이 한 번에 드래그(문서 안에서 동일한 수식만)
* 복제 alt+shift
* backgroundcolor
ㄴ a1 클래스 red
ㄴ a2 클래스 blue
<웹 2일차>
[4교시]
h200px
밑보다 ID가 더 우선이다.
a3, b2 색
a4 아이디
높이 300
기본 우선순위는
아이디 > 클래스 > 태그
동일한 형태 일때는 아래가 우선적용
[5교시]
px 절대크기
em 상위 태그의 상태크기
기본값 16px
text-align 블록내부에서 텍스트 정렬
text-align: center:
컬러
색상 정의를 해준다
#FFFF
rgb 수준 16진수
퍼센트로 잡을 때 퍼센트지만 입력
display
none : 보이지 않음
block : 블럭
inline : 인라인
inline-block : 인라인블럭
인라인 요소
위치 같은 라인, 이전요소
바로 뒤에서 시작
크기 콘텐츠(내부에 있는 것)
너비를 차지
너비와 높이를 지정할 수 없다.
여백 상하 불가, 좌우만 가능
블록요소
전체의 너비를 차지함
다음요소는 새줄 배치
크기는 부모요소의 전체너비 ★★★
높이는 설정가능
모든 방향의 여백 적용
인라인 - 블록
인라인 같은 줄 나란히 배치
블록처럼 너비 지정 가능
span 인라인 요소
인라인에다가 너비는 x(너비 지정 안됨)
속성을 바꿔주는 것이 display