youtube.com

[레이아웃02] 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습하기 | 포트폴리오가 실력이다 | 웹 퍼블리셔 | 프론트앤드 개발자

채널에 가입하여 혜택을 누려보세요.
https://www.youtube.com/channel/UCsvQSv7EeCMHyYb9ENKAJZw/join

이 강의는 유료 강의입니다.

[포트폴리오가 실력이다.]
안녕하세요! 웹스토리보이입니다.
사이트 만들기 프로젝트입니다.
디자인부터 코딩 및 개발까지 이루어지는 강의합니다.
디자인은 선택 영역입니다.
안하셔도 무방합니다.

이 강의 디자인부터 코딩, 개발까지 이루어지는 강의입니다.
디자인, 퍼블리싱, 리액트, 뷰 파트별로 되어 있어
원하는 부분만 보셔도 상관은 없습니다.

취업을 원하는 취준생,
퍼블리셔, 프론트앤드 개발자를 위한 가이드 강의입니다.
많은 도움이 되셨으면 합니다.

[이런 분들에게 추천해요!]
포트폴리오를 만들고 싶은 분들
HTML/CSS를 활용하여 사이트 만들고 싶은 분
코딩 기본 지식을 활용하여 사이트 제작 하고 싶은 분
디자인부터 코딩까지 사이트를 직접 만들고 싶은 분
웹 퍼블리셔로 취업하고 싶은 분
프론트앤드 개발자로 취업하고 싶은 분


[사이트 만들기1 - 디자인]
1. 헤더 유형01
2. 슬라이드 유형01
3. 이미지 유형01
4. 이미지/텍스트 유형01
5. 카드 유형01
6. 배너 유형01
7. 텍스트 유형01
8. 푸터 유형01
9. 완성

[사이트 만들기1 - 레이아웃]
1. 레이아웃 유형01
2. 레이아웃 유형02
3. 레이아웃 유형03
4. 레이아웃 유형04
5. 레이아웃 유형05

[사이트 만들기1 - 퍼블리싱]
1. 헤더 유형01
2. 슬라이드 유형01
3. 이미지 유형01
4. 이미지/텍스트 유형01
5. 카드 유형01
6. 배너 유형01
7. 텍스트 유형01
8. 푸터 유형01
9. 완성하기 : 기본 셋팅
10. 완성하기 : CSS 셋팅
11. 완성하기 : 유형별 셋팅

[사이트 만들기1 - 리액트]
준비중..

[사이트 만들기1 - 뷰]
준비중..

모든 자료는 여기서 확인 가능합니다.

소스 및 튜토리얼 확인하기
https://wtss.tistory.com/category/%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4%EA%B0%80%20%EC%8B%A4%EB%A0%A5%EC%9D%B4%EB%8B%A4/%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EB%A7%8C%EB%93%A4%EA%B8%B01

인스타 그램 확인하기
https://www.instagram.com/webstoryboy/

포트폴리오 스터디 & 강의 모집중
https://cafe.naver.com/crossbrowsing/10982

김새롬

youtube.com

[레이아웃01] 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습하기 | 포트폴리오가 실력이다 | 웹 퍼블리셔 | 프론트앤드 개발자

채널에 가입하여 혜택을 누려보세요.
https://www.youtube.com/channel/UCsvQSv7EeCMHyYb9ENKAJZw/join

이 강의는 유료 강의입니다.

[포트폴리오가 실력이다.]
안녕하세요! 웹스토리보이입니다.
사이트 만들기 프로젝트입니다.
디자인부터 코딩 및 개발까지 이루어지는 강의합니다.
디자인은 선택 영역입니다.
안하셔도 무방합니다.

이 강의 디자인부터 코딩, 개발까지 이루어지는 강의입니다.
디자인, 퍼블리싱, 리액트, 뷰 파트별로 되어 있어
원하는 부분만 보셔도 상관은 없습니다.

취업을 원하는 취준생,
퍼블리셔, 프론트앤드 개발자를 위한 가이드 강의입니다.
많은 도움이 되셨으면 합니다.

[이런 분들에게 추천해요!]
포트폴리오를 만들고 싶은 분들
HTML/CSS를 활용하여 사이트 만들고 싶은 분
코딩 기본 지식을 활용하여 사이트 제작 하고 싶은 분
디자인부터 코딩까지 사이트를 직접 만들고 싶은 분
웹 퍼블리셔로 취업하고 싶은 분
프론트앤드 개발자로 취업하고 싶은 분


[사이트 만들기1 - 디자인]
1. 헤더 유형01
2. 슬라이드 유형01
3. 이미지 유형01
4. 이미지/텍스트 유형01
5. 카드 유형01
6. 배너 유형01
7. 텍스트 유형01
8. 푸터 유형01
9. 완성

[사이트 만들기1 - 레이아웃]
1. 레이아웃 유형01
2. 레이아웃 유형02
3. 레이아웃 유형03
4. 레이아웃 유형04
5. 레이아웃 유형05

[사이트 만들기1 - 퍼블리싱]
1. 헤더 유형01
2. 슬라이드 유형01
3. 이미지 유형01
4. 이미지/텍스트 유형01
5. 카드 유형01
6. 배너 유형01
7. 텍스트 유형01
8. 푸터 유형01
9. 완성하기 : 기본 셋팅
10. 완성하기 : CSS 셋팅
11. 완성하기 : 유형별 셋팅

[사이트 만들기1 - 리액트]
준비중..

[사이트 만들기1 - 뷰]
준비중..

모든 자료는 여기서 확인 가능합니다.

소스 및 튜토리얼 확인하기
https://wtss.tistory.com/category/%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4%EA%B0%80%20%EC%8B%A4%EB%A0%A5%EC%9D%B4%EB%8B%A4/%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EB%A7%8C%EB%93%A4%EA%B8%B01

인스타 그램 확인하기
https://www.instagram.com/webstoryboy/

포트폴리오 스터디 & 강의 모집중
https://cafe.naver.com/crossbrowsing/10982

김새롬

youtube.com

웹디자이너라면 알고 있어야 할 웹디자인 관련 용어 총정리!

안녕하세요! #프리랜서 #디자이너 랑이언니입니다!!

오늘은
#웹디자이너 라면 알아야 할 #웹디자인 용어를 알려드립니다!

[영상 속 PDF자료 다운로드 링크]
https://blog.naver.com/gusruddl0615/222244300854

-

💁🏻‍♀️작업 문의 : gleam-design@naver.com
🌟개인 인스타그램 : @1994cm730kg

도봉도봉

designlog.org

이미지 최적화의 모든 것, 최고의 완벽 가이드 - 2부

이미지 최적화의 모든 것, 최고의 완벽 가이드 - 1부에 이어 이미지 변환 및 최적화 도구, 이미지 최적화 방법론에 대한 이야기를 중심으로 2부를 시작하겠습니다. 이미지 압축 및 최적화의 역사는 인터넷 자체만큼이나 길다고 할 수 있습니다. 웹 사이트가 처음 온라인에 등장한 이후로 웹 디자이너들은 더 나은 성능을 위해 이미지 파일을 압축하는 방법을 모색해 왔

김새롬

designlog.org

이미지 최적화의 모든 것, 최고의 완벽 가이드 - 1부

이미지 압축 및 최적화의 역사는 인터넷 자체만큼이나 길다고 할 수 있습니다. 웹 사이트가 처음 온라인에 등장한 이후로 웹 디자이너들은 더 나은 성능을 위해 이미지 파일을 압축하는 방법을 모색해 왔습니다. 그러나 오늘날에는 이미지 최적화 환경은 복잡합니다. 온라인 또는 오프라인에서 이미지 크기를 조정하는 데 사용할 수 있는 도구가 많이 있습니다. 예를 들어,

김새롬

youtube.com

[반응형웹이론] #4 반응형웹 단위정복(feat. em과 rem구분)

반응형웹에서 왜 rem을 사용하는지 보도록 하겠습니다.
em과 rem의 차이는 무엇인지, vw는 어떻게 쓰는 건지 보도록 할게요.

◈ 영상 목차
1. 절대적 길이단위 - 01:24
2. 상대적 길이단위 - 02:35
3. em과 rem의 차이 - 03:32
4. 반응형웹에서 rem을 사용하는 이유 - 07:18
5. 정말 상대적 단위 vw/vh - 15:43


#반응형웹단위 #rem #vw





==========================================================
★ 완성코드 다운받기
https://ossam5.tistory.com/264


==========================================================
★ 관련 블로그 : 37강 CSS단위 - px, em, rem, vw, vh 등
https://ossam5.tistory.com/310


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay, 프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

김새롬

youtube.com

[반응형웹이론] #3 유동형사이즈와 유동형그리드

반응형웹을 하려면, PC화면, 모바일기기, 태블릿 기기에
따른 사이즈와 그리드를 유동적으로 대응해야 합니다.
이번 기회에 유동형사이즈와 그리드를 확실히 배워봅시다.

◈ 영상 목차
1. 유동형사이즈 - 00:52
2. 유동형그리드 - 02:45


#오쌤의니가스터디 #반응형웹이론 #유동형그리드





==========================================================
★ 완성코드 다운받기
https://ossam5.tistory.com/264


==========================================================
★ 관련 블로그 : 준비중



============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스에서 가져온 무료 컨텐츠입니다.

김새롬

youtube.com

[반응형웹이론] #2 미디어쿼리(@media{ })

반응형웹을 하려면, PC화면, 모바일기기, 태블릿 기기의
CSS를 각각 처리해야합니다.. 그때 필요한 태그가 미디어쿼리입니다.
이번 기회에 미디어쿼리를 확실히 배워봅시다.

◈ 영상 목차
1. 기기 뷰포트에 맞는 미디어쿼리? - 01:11
2. 화면전환 - 08:36
3. 미디어 유형 - 10:16


#오쌤의니가스터디 #반응형웹이론 #미디어쿼리





==========================================================
★ 완성코드 다운받기
https://ossam5.tistory.com/264


==========================================================
★ 관련 블로그 : 준비중



============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스에서 가져온 무료 컨텐츠입니다.

김새롬

youtube.com

[반응형웹이론] #1 뷰포트메타태그(viewport)

반응형웹을 하려면, 모바일기기, 태블릿 기기를
인식해야합니다. 그때 필요한 태그가 뷰포트메타태그입니다.
이번 기회에 뷰포트메타태그를 확실히 배워봅시다.

◈ 영상 목차
1. meta태그란? - 01:06
2. 뷰포트메타태그 - 02:17


#오쌤의니가스터디 #반응형웹이론 #뷰포트메타태그





==========================================================
★ 완성코드 다운받기
https://ossam5.tistory.com/264


==========================================================
★ 관련 블로그 : [HTML기초문법] 17강 meta태그와 viewport
https://ossam5.tistory.com/118




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스에서 가져온 무료 컨텐츠입니다.

김새롬

youtube.com

[반응형웹이론] 인트로

반응형웹이론을 배우기 전,
인트로 영상입니다.
요즘은 반응형웹을 쓰지 않고는
홈페이지를 만들기 어려우므로 꼭 배워보세요.
처음 접하시는 분들도, 예전에 배우셨던 분들도,
쉽게 배울 수 있는 예제 영상들을
앞으로 올릴 예정입니다.


#오쌤의니가스터디 #반응형웹이론 #모바일웹이론




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스에서 가져온 무료 컨텐츠입니다.

김새롬

youtube.com

[웹컨텐츠제작꿀팁] #번외편 삼일절 태극기제작 - HTMLCSS중급강좌

삼일절 맞이 태극기 제작입니다.
비오는날 태극기 달기 어려웠을텐데,
브라우저에 태극기 달아봐요!

=========================================================
◈ 영상 목차
1. 전체flag제작하기 - 01:18
2. 태극모양만들기 - 03:11
3. 건곤감리만들기 - 09:23



=========================================================
◈ 완성파일 및 소스 주소
URL : https://ossam5.tistory.com/256


==================================================
◈ 블로그 - #번외편 - 삼일절 태극기 만들기
제작중




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.

◈ 오프닝음악 출처
Stay Positive by FSM Team | artist.fsm-team.html
Music promoted by https://www.mewpot.com
CC BY 4.0 | https://creativecommons.org/licenses/by/4.0/



#HTMLCSS강좌 #삼일절 #태극기

김새롬

youtube.com

[웹컨텐츠제작꿀팁] #번외편 새해맞이 윷놀이 - HTMLCSS중급강좌

새해 인사겸 HTML/CSS/jQuery로 만든 윷놀이입니다.
새해복많이 받으세요!

=========================================================
◈ 영상 목차
1. HTML작업 - 01:34
2. CSS로 기본틀만들기 - 02:58
3. CSS로 활성화처리 - 06:41
4. CSS 반응형처리 - 09:27
5. CSS 애니메이션처리 - 13:53
6. jQuery이벤트 처리 - 15:41



=========================================================
◈ 완성파일 및 소스 주소
URL : https://ossam5.tistory.com/256


==================================================
◈ 블로그 - #번외편 - 새해맞이 윷놀이 만들기
제작중




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.

◈ 오프닝음악 출처
Stay Positive by FSM Team | artist.fsm-team.html
Music promoted by https://www.mewpot.com
CC BY 4.0 | https://creativecommons.org/licenses/by/4.0/



#HTMLCSS강좌 #새해맞이 #윷놀이

김새롬

youtube.com

[웹컨텐츠제작꿀팁] #8 Image Sprite(이미지 스프라이트) - HTMLCSS중급강좌

이번 동영상은 실제 웹컨텐츠를 코딩해보는 영상입니다.
여덟번째로 Image Sprite코딩하는 법을 보도록 하겠습니다.

=========================================================
◈ 영상 목차
1. Image Sprite 사용이유 - 00:27
2. Image Sprite 코딩 - 02:24
3. Icon Banner - 06:43
4. CSS로 움짤만들기 - 10:56



=========================================================
◈ 자막 오류
02:57 : 250x50이라고 적혀있는데 200x50입니다.


=========================================================
◈ 코드 오류
10:40 초쯤 아이콘배너 코딩 부분이 좀 오류가 있습니다.
완성파일에는 코드를 잘 써놨으니 확인해보세요.
.icon_banner li:nth-child(1) a{ background-position: 0 0; }
.icon_banner li:nth-child(2) a{ background-position: -150px 0; }
.icon_banner li:nth-child(3) a{ background-position: -300px 0; }
.icon_banner li:nth-child(4) a{ background-position: -450px 0; }
.icon_banner li:nth-child(5) a{ background-position: -600px 0; }
.icon_banner li:nth-child(6) a{ background-position: -750px 0; }
.icon_banner li:nth-child(7) a{ background-position: -900px 0; }
.icon_banner li:nth-child(8) a{ background-position: -1050px 0; }

** 영상에서는 6번이 빠지는 바람에 px들이 잘 안맞았네요~
여러분들은 코딩시 잘 해보세요!


=========================================================
◈ 완성파일 및 소스 주소
URL : https://ossam5.tistory.com/256



=========================================================
◈ 블로그 주소 - 8강 Image Sprite와 CSS움짤
URL : https://ossam5.tistory.com/322




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.

◈ 오프닝음악 출처
Stay Positive by FSM Team | artist.fsm-team.html
Music promoted by https://www.mewpot.com
CC BY 4.0 | https://creativecommons.org/licenses/by/4.0/



#HTMLCSS강좌 #Image Sprite #CSS움짤

김새롬

youtube.com

[웹컨텐츠제작꿀팁] #7 CSS TabBar와 SwitchButton! - HTMLCSS중급강좌

이번 동영상은 실제 웹컨텐츠를 코딩해보는 영상입니다.
일곱번째로 CSS TabBar와 SwitchButton 코딩하는 법을 보도록 하겠습니다.

=========================================================
◈ 영상 목차
1. CSS Tab Bar - 탭바 - 00:51
2. 게시판미리보기02 - 여러줄텍스트줄임 - 14:35

=========================================================
◈ 완성파일 및 소스 주소
URL : https://ossam5.tistory.com/256


=========================================================
◈ 블로그 주소 - 7강 TabBar와 SwitchButton제작
URL : https://ossam5.tistory.com/321


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.

◈ 오프닝음악 출처
Stay Positive by FSM Team | artist.fsm-team.html
Music promoted by https://www.mewpot.com
CC BY 4.0 | https://creativecommons.org/licenses/by/4.0/



#HTMLCSS강좌 #CSS탭바 #스위치버튼

김새롬

youtube.com

[웹컨텐츠제작꿀팁] #6 Board Preview 이렇게 써라! - HTMLCSS중급강좌

이번 동영상은 실제 웹컨텐츠를 코딩해보는 영상입니다.
여섯번째로 Board Preview 코딩하는 법을 보도록 하겠습니다.

=========================================================
◈ 영상 목차
1. 게시판미리보기01 - 한줄텍스트줄임 - 00:56
2. 게시판미리보기02 - 여러줄텍스트줄임 - 15:14

=========================================================
◈ 완성파일 및 소스 주소
URL : https://ossam5.tistory.com/256


==================================================
◈ 블로그 - #6 Board Preview 이렇게 써라!
https://ossam5.tistory.com/269?category=1015703




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.

◈ 오프닝음악 출처
Stay Positive by FSM Team | artist.fsm-team.html
Music promoted by https://www.mewpot.com
CC BY 4.0 | https://creativecommons.org/licenses/by/4.0/



#HTMLCSS강좌 #글자줄임 #BoardPreview

김새롬

youtube.com

[웹컨텐츠제작꿀팁] #5 Hover Effect 이렇게 써라!(마우스오버효과) - HTMLCSS중급강좌

이번 동영상은 실제 웹컨텐츠를 코딩해보는 영상입니다.
다섯번째로 Hover Effect, 즉 마우스 오버효과 코딩하는 법을 보도록 하겠습니다.

=========================================================
◈ 영상 목차
1. Hover Effect설명 - 00:38
2. overscale, 확대효과 - 01:50
3. overbg, 기본검은배경 - 09:52
4. overbg, 사각형라인추가 - 16:32
5. overbg, 교차라인추가 - 21:10

=========================================================
◈ 완성파일 및 소스 주소
URL : https://ossam5.tistory.com/256


==================================================
◈ 블로그 - #5 Hover Effect 이렇게 써라!
https://ossam5.tistory.com/263
(아직 제작중)




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.

◈ 오프닝음악 출처
Stay Positive by FSM Team | artist.fsm-team.html
Music promoted by https://www.mewpot.com
CC BY 4.0 | https://creativecommons.org/licenses/by/4.0/



#HTMLCSS강좌 #HoverEffect #마우스오버효과

김새롬