마봉아빠의 개발자를 위한 CSS 초급 (2주차)
마봉 아빠님 소개
안녕하세요. 이번에 CSS 강의를 진행하는 마봉아빠 입니다.^^
현재 테이블코딩이라는 구시대적인 코딩부터 시작해서 프론트엔드 개발자까지 12년차 퍼블리셔 입니다.
산전수전 다 겪으면서, 흘러오다 보니 국내 왠만한 대기업 및 다양한 직군의 분들과 함께 업무를 진행했습니다.
이번 한큐님의 추천으로 함께 하게 되었는데,
웹퍼블리셔 이고, 프론트엔드 개발자인 저로서는 개발자에게 필요한 사이드스킬에 대해 접근하고,
개발자분들의 마음을 잘 이해하기에 그리고 저 스스로가 프리랜서 이기에, 여러분들이 잘팔리는 프리랜서가 되기 위해 노력하도록 하겠습니다.
강의 받으시는 분들에게 인증하는 이력서(?)
ㅡㅡㅡ
포트폴리오
SKT 비즈몰 템플릿 - 기본템플릿 구성 HTML 및 UI작성
LG G4 Global Promotion - UI 고도화
알리안츠생명 SFA - 태블릿 전용 보험정보 제공UI개발
수협중앙회 모바일웹 - 웹퍼블리싱 및 UI개발
우리투자증권TX 웹접근성 고도화 - 웹접근성 인증마크 획득
여행박사 반응형웹/웹접근성 - 반응형 UI적용 및 개발
한화호텔&리조트 8개 웹사이트 - 접근성 관련한 가이드 제공 및 퍼블리싱 개발
개발자분들과 함께 웃고 재미난 강의 만들어 갔으면 좋겠습니다.^^
강의소개
CSS의 레이아웃은 크게 3가지로 이루어 집니다.
실무에서 사용하는 레이아웃의 타입과 해당 레이아웃에 사용되는 속성을 이해하도록 합니다.
특히나 요즘에 트랜드가 되는 플랙스(Flex) 레이아웃을 이해하면 앞으로의 웹퍼블리싱의 수정에 더 큰 도움이 됩니다.
그냥...
- 퍼블리셔가 폼잡을려고 레이아웃 어렵게 했지만 수정해야 될때,
- CSS가 1~2년 전까지만 해도 만만했는데 요즘애는 모르겠을때
- 수정은 해야되는데, 퍼블리셔가 저 멀리에 있을때
- 어제 함께 과음했는데 퍼블리셔만 저 멀리서 자고있는데 때릴 기운이 없을때
레이아웃
#### 미디어와 레이아웃종류
- 미디어의 종류(Media)
- 레이아웃 방법(Layout Type)
#### 플로트 레이아웃
- 플로트(float)
- 클리어(clear)
- 해즈레이아웃(haslayout)
#### 포지션 레이아웃
- 포지션(position)
- 포지션 위치값(position direction)
- 제트인덱스(z-index)
#### 플랙스 레이아웃
- 플랙스(display:flex;)
- 플랙스 위치값(flex-direction)
- 플랙스 줄바꿈방법(flex-wrap)
- 플랙스 아이템 상하정렬(align-items)
- 플랙스 영역 상하정렬(align-content)
- 플랙스 영역 배치방법(justify-content)
- 플랙스아이템 상하정렬(align-self)
- 플랙스아이템 가로비율(flex-grow)
- 플랙스아이템 역가로비율(flex-shrink)
- 플랙스아이템 선언(flex)
- 플랙스아이템 배치(order)
반응형 레이아웃
#### 미디어 쿼리(미디어쿼리)
- 작성법(Syntax)
- 미디어 피처(Media Features)
#### 반응형 플로트(float) 레이아웃
#### 반응형 포지션(position) 레이아웃
#### 반응형 플랙스(float) 레이아웃
날짜 : 03.04
시간 : 오후 13시 ~ 17시 4시간
장소 : 신촌 아트레온 토즈
준비물 : 노트북
가격 : 4만원
신청방법 : 댓글로 신청 후 reefree 로 카톡주세요
