본문 바로가기

전체 글228

커튼여는 사람 - 2일차 커튼여는 사람 1 커튼을 펼치고 있는 여자사진에서 배경이 들어갈 안 쪽을 패스로 딴다. 패스로 딴 레이어들을 선택영역으로 지정한 후, 여자사진레이어에서 레이어마스크를 클릭해준다. (단, 안 쪽 영역을 지워야하기 때문에 alt를 누름과 동시에 클릭해줘야 한다.) 풍경레이어를 가장 아래에 배치해준다. 2 벽돌 레이어를 가장 상단에 배치해준다. 커튼부분에만 벽돌무늬를 넣기 위해, 커튼을 제외한 전체부분을 패스로 딴다. 패스로 딴 레이어를 선택영역으로 지정한 후, 벽돌 레이어에서 레이어마스크를 클릭해준다. (단, 안 쪽 영역을 지워야하기 때문에 alt를 누름과 동시에 클릭해줘야 한다.) 3 displace속성을 사용하기 위해선 대상psd파일이 존재해야 하기 때문에, 커튼.. 2021. 5. 23.
2021-05-21 (39일차) float-grid, 밑줄 애니메이션, flex, flex-grow, 수직정렬방법 align-items, align-self, 버튼만들기 149강~150강 - float-grid .float-grid::after { content:""; display:block; clear:both; } .float-grid > * { float:left; box-sizing:border-box; } - 밑줄 애니메이션 1) 좌 > 우 효과를 주고 싶은 태그의 뒤 or 앞에 absolute를 놔주기 ex) 태그::after { content:""; background-color:white; width:0; height:2px; position:absolute; bottom:0; left:0; transition:width .3s; } :hover > a::after { width:100%; } 2) 가운데 > 양쪽 효과를 주고 싶은 태그의 뒤 or 앞에 .. 2021. 5. 22.
2021-05-20 (38일차) 반응형상품리스트, 부분모작 개인과제, 유즈툴컴퍼니 148강 #문제. 반응형 상품리스트 2를 구현 ( float 제거, flex 사용) - 부분모작 개인과제 목표사이트 설정 완료 유즈툴컴퍼니 : https://www.usetoolcompany.com/ 1차시도 - 탑바 구현 https://codepen.io/minicoding/pen/NWpdPgE 2021. 5. 20.
2021-05-19 (37일차) flexbox froggy - css flexbox 속성 정리 - Flexbox Froggy css flexbox 속성 배우기 게임 flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다. baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다. stretch: 요소들을 컨테이너에 맞도록 늘립니다. row: 요소들을 텍스트의 방향.. 2021. 5. 20.
2021-05-18 (36일차) 피그마, 반응형 상품리스트 연습, flexbox froggy - 피그마 다운로드 방법 협업하는 방법 (무료버전은 2명까지만 가능) 크몽에 올릴 웹사이트 예시 제작 과제 시작 조에서 2명씩 구성 완료 목표 페이지 설정 완료 피그마로 협업 중 기존 사이트에서 어떻게 변화를 줄지 생각 #문제.반응형 상품리스트 1 구현 (튜토리얼23단계) - Flexbox Froggy css flexbox 속성 배우기 게임 2021. 5. 20.
2021-05-17 (35일차) float:left, float, block, content, clear:both, float-grid, max-width, overflow-x:hidden; 145강~147강 - float : left display : inine-block처럼 작동 → 가로정렬, 띄어쓰기공백 없음, 최소한의 크기로 줄어들음, verticle align:top없이 위에 붙음 문제점 : block요소인 부모는 float를 무시하는 법칙이 있음 해결방법 : 부모인 block요소가 자식인 float요소를 무시하지 않기 위해 float의 형제에 block요소 추가 문제점 : 추가된 block요소만 부모에게 인식되고, float요소들은 여전히 무시됨 해결방법 : 추가된 block요소에 clear : both를 주면 모든 문제점 해결 ↓↓↓↓↓↓↓↓최적의 방법↓↓↓↓↓↓↓↓↓ 부모>자식 {float:left;} 부모태그::after {content:""; display:block; cl.. 2021. 5. 18.
BODY SHOP - 1일차 BODY SHOP 1 남자아이 사진을 복제한 후, 복제한 레이어에 블랜딩모드 color burn을 주기 adjustment layer에서 level값 (가운데 2.21) 주기 level값이 레이어 모두에 적용되기 때문에 클리핑마스크를 적용해서 보정레이어에만 적용되게 하기 2 모든 레이어 병합한 레이어를 만든 후 흑백으로 전환해준다. 흑백으로 전환한 레이어에 filter>other>high pass효과를 준다 (→ 질감과 외곽을 선명하게 강조하는 데 사용) 이 레이어에 블랜딩모드 soft light를 준다. 3 새로운 아트보드를 만든다.(210mmX270mm, 검정색 배경) 보정한 남자아이 전체 레이어 합쳐 복사한 것을 새로운 아트보드 정중앙에 배치한다. 크기를 적당하게 키워준 뒤 남자아이를 하나 더 복제.. 2021. 5. 18.
포토웍스 이론 포토웍스 신지아 강사님 xinzia@naver.com ※수업진행 -다양한 아트웍 작업실습을 통하여 시야넓히기 -디자인 시각요소 -색상 보정 및 합성 방법 -레이어스타일 이용한 목업작업 ※유의사항 -마스크 항시 착용 -컴퓨터 문제 시 강사에게 알리기 -중요자료 백업 ※ https://c11.kr/oury ㄴ 공유 드라이브 주소 비대면 참여시 위 링크 접속하여 자료 받기 * 채도 : 색상의 선명함과 엷음 - 높은 채도 : 생명력, 역동적인, 쾌활한, 강렬한, 이국적인, 모험적인, 유아적인, 카리스마있는, 이질적인 - 낮은 채도 : 정적인, 차분한 , 신비로운, 빈티지한, 성숙한, 침체된, 우울한, 중립 * 명도 : 밝고 어두움 -높은 명도 : 순수한, 해맑은, 아이다운, 덧없는.. 2021. 5. 17.
2021-05-16 (34일차) 탑바, 메뉴바, 이미지리스트, 이미지효과 연습, z-index:-를 주는 이유? 1. 3차 메뉴 만들기 연습완료 2. 탑바+메뉴바 만들기 연습완료 3.이미지 넣고 배열하기 연습완료 4.이미지에 어둠효과, 확대효과, 텍스트효과 주기 연습완료 Q. z-index:-1을 굳이 이미지 확대효과에 주는 이유는? (비확실) A.일단 이미지에 어두움, 확대효과를 동시에 줬을 때, 어두움효과가 보이지 않게 된다. 그 이유는 이미지 확대효과는 특수효과 transform(scale)를 사용하기 때문에 z축 맨 앞으로 나오는 성질 때문이다. 그래서 어두움효과에 z-index:1;을 줘서 앞으로 나오게 하거나 확대효과에 z-index:-1; + position:relative;를 줘야한다. 편하게 어두움효과에 zi-ndex:1;값만 주려고 했으나, 추가로 텍스트 효과를 주고나니 텍스트 효과도 보이지 않는.. 2021. 5. 16.
2021-05-15 (33일차) 3차 메뉴바 복습, '쉽게 배우는 html5&css3 그리고 jquery' 독서 - 3차 메뉴바 만들기 연습하기 (2번 완료) 1차 메뉴 2차 메뉴 3차 메뉴 메뉴 아이템에 hover시 자식메뉴 노출 3차 메뉴 위치를 아래가 아닌 오른쪽으로 옮기기 메뉴 너비 정상화시키기 1차 메뉴 중 마지막 아이템의 2차메뉴 hover시 자식3차메뉴 안쪽으로 펼쳐지게 만들기 - '쉽게 배우는 html5&css3 그리고 jquery' 독서 머리말 (웹의 열풍, HTML, CSS JAVASCRIPT의 유래, 스마트폰의 등장) 2021. 5. 16.
2021-05-14 (32일차) 큰 이미지 하나, 이미지 부가설명 넣기, hover시 이미지 어두운 효과, 이미지 확대 효과 transform:scale, 효과에 시간걸기 transition, css 특수효과, 141강~144강 - 큰 이미지 하나만 넣기 emmet : section.section.section-0>div.con>div.img-box>img - 이미지 리스트의 이미지에 부가설명 넣는 방법 (작품명, 날짜, 제작기간 등) emmet : section.section.section-1>div.con>div.work-list-box>ul.inline-grid>li >div>(div.img-box>img)+div.work-name{작품명}+div.work-date-period{날짜, 제작기간} .work-list-box > ul > li > div > (.work-name, .work-date-period) {margin-top:5px; text-align:center;} - 마우스 올리면 이미지가 어두.. 2021. 5. 15.
2021-05-13 (31일차)이미지리스트, 이미지간격, 음수margin 137강~140강 - 좌우 끝의 이미지를 제외한 나머지 이미지간의 사이 간격을 띄우는 방법 (ex, 한 줄에 4개의 이미지를 놓는 상황이라고 가정) - 방법1 work-list-box > ul > li {margin-right:20px; width:calc(25%-20px); margin-right:20px; ㄴ 단점 : 맨 우측의 여백에 필요없는 여백이 생김 ㄴ 해결책 : .work-list-box > ul > li:nth-child(4n) {margin-right:0;} - 방법2 .work-list-box > ul > li {width:calc((100% - 20px * (4 - 1)) / 4); margin-top:20px;} .work-list-box > ul > li:not(:nth-child.. 2021. 5. 15.

티스토리툴바