밍숲의 코딩&웹퍼블리셔 LOG

TypoGraphy&Mask 활용하여 "Autumn Sale Poster" 디자인 지금은 거의 사라져가고 있는 ARITAUM 이지만.. 가을 색조합과, 낙엽 소스를 이용하여 한글 TypoGraphy를 만들었다.

잡지디자인 Vogue 패러디 "Dogue" PSD 파일을 잘못저장해서 날아간... 마스크를 활용한 디자인

Double Expouser (이중노출) 효과 지구온난화의 영향을 받는 북극의 아픔과 아련함을 표현하려하였음 레이어 마스크, 클리핑 마스크 등 사용 이미지 출처 : Google

라인 일러스트 작업 주제 : 라인일러스트 신발사진 제시 Blend Tool Live Paint 등 사용

4월부터 웹 퍼블리셔 국비교육을 받기 시작했다. 웹 퍼블리셔 과정은 일러스트/포토샵부터 시작해서 코딩까지 포트폴리오를 만들어내는 반이다. 앞으로 수업시간에 작업했던 것들을 많이 올릴예정! 어제는 포토샵/일러스트 시험이었다. 포토샵 주제는 '타이포그래피' 자유롭게 자료를 찾아서 만드는거라 갑자기 조커가 생각남.. 조커의 섬뜩하고 무서운 느낌을 더해서 리디자인했다. 이전부터 포토샵을 많이 써왔는데 작업의 질이 높아지면 높아질수록 마스크를 많이 쓰는듯.. 레이어가 아주 정신없었다..

트랜드란 경향이나 유행을 뜻하는 것으로 시간의 흐름에 따라 변하며, 기술의 발달로 미디어의 트랜드도 변화하고 있다. 반응형 웹디자인은 모바일 환경을 고려하여 디자인을 한다. 트랜드에 따른 디자인 1) 마이크로 인터랙션 -미세한 애니메이션을 통한 직관적인 웹 사이트의 체험에 도움을 주며 사용자의 흥미를 유발 *브런치 https://brunch.co.kr 검색어 입력공간에 깜빡임을 부여하여 검색어입력을 대기하고 있음을 나타냄 *널담 https://nuldam.com/index.html 왼쪽상단에 ‘널담레터 정기구독’이라는 글귀를 통해서 브랜드소개 및 정보로 이어지게 하는 동선을 부여함 *맘스터치 https://momstouch.co.kr 왼쪽 상단의 햄버거 모양이 로고가 펼쳐질때 x자로 변했다가 햄버거모양으..

본격적으로 페이지의 중심이 되는 메인파트를 만들어보려고한다. 메인파트는 총5개의 파트로 나뉘어있고, 모두 article을 시맨틱태그로 구성하였다. box01 현재 들어가는 대부분의 이미지들은 css에서 background로 삽입하였다. box01에서 핵심이 되는 부분은 ul>li>div가 총 4개로 구성되어있다는 점인데, 좌우에있는 p요소 핸들을 넘기면 옆으로 이미지가 넘어가야 하기에 보이는 것은 한면이지만 오른쪽에 3개가 더 숨어있다는 것이다. 먼저 상위에 글씨는 p요소에 span 으로 두개를 만들어준다. The World of beauty Tiffany is the most original in the world for about 200 years We have designed rare and fas..

이번에 코딩과제로 받았던 페이지는 TIFFANY&PRISM의 메인화면 실제로 있는 페이지 인것 같지는 않고 기초로 쉽게 따라할수 있게 제작된듯? 이번에는 header과 nav의 html 코딩과정을 업로드 해보려한다. 그 중, 이번편은 민트색 부분 header과 분홍색 부분 nav제작과정 header div를 크게하나 만들고 그안에 다시 div를 만든후 h1, ul>li요소를 넣어준다. 그 후 햄버거 버튼은 p>span*5로 제작했다. sign up sign in nav nav안에 명칭인 h2 메인네비게이션과 div요소를 넣어준다. div요소 안에는 ul과 li로 각각의 칸들을 만들어주고 누르면 나오는 네비게이션은 다시 ul과 li로 코딩해준다. 메인네비게이션 COLLECTIONS submenu01 sub..

Selector(선택자) "스타일을 적용하는 대상" p요소 = 선택자 기본선택자 선택자 기능설명 요소 특정 요소 선택 #id명 특정 id명을 가진 요소 선택 .class명 특정 class명을 가진 요소 선태 요소1 요소2 요소1안에 있는 모든 자손요소 요소2 부모요소1>자식요소2 부모요소1 안에 있는 자식요소2 형제요소1+형제요소2 형제요소1 옆에있는 형제요소2 선택1~선택2 선택1 기준 모든 선택2 요소 선택1, 선택2, 선택3 선택자 그룹선택 * 모든요소 선택 1. 타입선택자 요소명을 선택자로 사용 h1 {background-color:red;} ul {margin:0px;} 'h1'과 'ul'은 선택자 2. class 선택자(요소명 생략가능) 클래스 이름으로 선택하기, 문서내에서 여러요소를 한 번에..

Css 란? Css는 'cascading style sheets' 의 약자 더보기 - 네이버 지식백과 - Css는 웹 페이지에 "디자인"이라는 시각적 가치를 부여하기 위한 언어 HTML문서의 레이아웃과 스타일을 정의 W3C에서 표준안을 만들어 내고 있으며 1996년 Css1 이후 2.1를 거쳐 현재 Css3까지 보급 Css 연결하기 HTML에 Css 디자인 작업을 하는 방법은 External / Internal 두가지 (embed, inline 방법 등으로 나누기도 하는데 나는 이렇게 구분함) 1. External (외부파일 연결) 를 이용하여 연결 -..