본문 바로가기

Widely Design 바로가기

💚 UIUX 웹퍼블리셔 과정(6개월)175

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.

2021-05-12 (30일차) 이미지리스트, 반응형 이미지, 이미지의 부모에 .img-box 136강 - 이미지는 원래 반응형이 아님 - 이미지를 반응형으로 만드는 방법 (화면에 따라 유연하게 움직임) 이미지의 부모에게 img-box을 주기 img-box > img { width : 100%; display:block;} ※ img에 직접 width를 줘도 되지만 위의 방식이 자주 쓰이는 방식 - img를 배치하는 방법 ul>li>div.img-box>img (이미지를 div에 감싸기) ul>li.img-box>img 이렇게 배치해도 되긴 하지만, a와 같은 형식이라서 그냥 div에 감싸기 2021. 5. 13.

2021-05-11 (29일차) dnszi관리권한 이전, cname, github주소 변경, 구매한 도메인 관리, http>https, 이미지리스트, line-height, work-list-box 126강~135강 - dotname korea에서 구입한 도메인을 dnszi에게 관리권한을 넘기는 방법 1 ) dotname > 도메인관리 > DNS설정 > 네임서버 설정 > 네임서버 직접입력 ■체크 2 ) dnszi에서 준 네임서버 1~5차를 복사해서 차례대로 dotname 네임서버에 옮겨주기 > 변경 3 ) dnszi > 도메인 추가하기 > 구입한 도메인 입력 > 추가완료 ※ 하나의 도메인을 구입했지만, 여러 개로 만들 수 있음 (CNAME(별명)이용) ex) a.abc.com , b.abc.com , c.abc.com (개수 제한없음) - github에서 만든 사이트를 구매한 도메인 주소로 바꾸는 방법 1 ) dnszi > 도메인주소 > CNAME관리(별명) > CNAME값에 주소 입력 ex)b.w.. 2021. 5. 12.

2021-05-10 (28일차) github 기본셋팅, 고정너비레이아웃 con 115강~125강 https://github.com/manyrice/blog https://manyrice.github.io/blog/ - 깃허브 바로가기 링크 깃허브 페이지 세팅 : https://github.com/{아이디}/{리포지터리명}/settings/pages 리포지터리 홈 주소 : https://github.com/{아이디}/{리포지터리명} 깃허브 페이지 주소 : https://{아이디}.github.io/{리포지터리명} 새로고침 적용 안 될 때 : https://{아이디}.github.io/{리포지터리명}/?r=1 - github setting 방법 우측 상단 프로필 > setting > repositories 'main'을 'master'로 변경 후 update 클릭 - 새로운 저장소 만.. 2021. 5. 11.

2021-05-09 (27일차) 포스터 리디자인 발표준비 포스터 리디자인 발표준비 - 컨셉 : 한여름의 무더위를 날려버릴 시원한 뮤직페스티벌 - 제작경위 : 여름이 곧 다가오는 만큼 시원하고 경쾌한 분위기의 포스터를 만들어보고 싶었다 - 표현 : 페스티벌 장소가 광장이기 때문에 공원같은 느낌을 주기 위해 초록색을 배경을 깔아주었다 여름페스티벌인만큼 시원하게 바닷물이 들어오는 느낌을 주면 좋을 것 같아서 파란색 바다물결모양을 넣어주었다 음악적인 요소가 많이 포함돼야 좋을 것 같아서 스피커, 음표, LP판 같은 일러스트를 그려서 넣어주었다 심심한 느낌이 없어지지 않아서 조명을 받는 것 같은 효과와 폭죽을 그려넣어 재미를 더해주었다 - 느낀점 : 페스티벌과 관련된 일러스트 요소들을 계속해서 넣어줘도 다른 포스터들 보다 심심해보여서 더 많은 자료를 찾아보고 공부해야겠.. 2021. 5. 8.

2021-05-08 (26일차) 포스터 리디자인 포스터 리디자인 원마운트 썸머뮤직 페스티벌 2021. 5. 8.

2021-05-07 (25일차) visual studio code(vs code)초기설정, css분리방법 107강~114강 - 과거의 툴 나모웹에디터, 드림위버(adobe), 에디트 플러스, 브라켓(adobe), 비주얼 스튜디오 코드 - visual studio code 필수 (방법 : ! + tab) 은 안에 넣기 live server 확장기능 설치 go live 실행 (실시간 변경 확인 가능) tab 4칸 > 2칸 변경 emmet이 안 될 때 : f1 > emmet:expand abbreviation beautify(소스코드정리) 확장기능 설치 head : 메타정보를 모아놓는 곳 style은 head안에 쓰는 게 정석 - css 분리방법 'index.css'라는 새파일 생성 style안의 속성 모두를 파일로 옮김 html head 안에다가 link+tab 눌러서 를 입력해주기 2021. 5. 8.

2021-05-06 (24일차) 영문폰트적용법, 폰트2개이상 동시적용법, box-shadow 그림자효과, 우측메뉴박스의 2차메뉴, 나만의 사이트 만들기<WIDELY DESIGN> 102강~106강 - 영어폰트 적용법 구글웹폰트 > 추가하여 장바구니에 담기 > @import 클릭 후 안의 속성 복사 후 css 상단에 붙여넣기 ※ 주로 400~700 사용 - 두 가지 이상 폰트 적용법 html {font-family : "우선순위로 적용하고 싶은 폰트" "그다음 폰트" "그다음폰트" - box-shadow 그림자 주는 법 ex) box-shadow : 0px 10px 10px black; : x축 이동, y축 이동, spread값, 색상 #문제. 사이트 상단바 우측메뉴박스의 2차 메뉴까지 구현 www.youtube.com/watch?v=uQFmJ_bjZjg 나의 사이트 - 상단바 배경색(이유) : light gray (모던한 디자인을 위해) - 글자, 아이콘 색(이유) : black.. 2021. 5. 7.

2021-05-05 (23일차) 복습, 사이트 상단바 만들기 - 나만의 사이트 상단바 만들기 - hover에 시간 걸기 연습 transition - box-sizing 복습 content-box와 border-box 2021. 5. 6.

2021-05-04 (22일차) 폰트어썸 아이콘 활용법, header태그, top-bar(상단바), hover 시간적용(transition), box-sizing:border-box;, 폰트 적용법, 상단바+우측메뉴박스 92강~101강 #문제. 다음 3차 풀다운 메뉴에서 해당 선택자가 몇 개의 엘리먼트를 선택하는지 주석으로 적어주세요 - 폰트어썸 아이콘 넣는 방법 cdnjs.com > font-awsome 검색 후 복사 html에 2021. 5. 6.

2021-05-03 (21일차) 화면을 벗어나는 3차 메뉴를 안쪽으로 펼쳐지게 하기 91강 ※ 앞에 꺽새는 최대한 넣고 어쩔 수 없을 때만 빼기 #문제. 3차 풀다운 메뉴에서 화면을 벗어나는 3차메뉴만 안쪽으로 펼쳐지게 하라 .menu-box > ul > li:last-child > ul ul { left : auto; right : 100%; } 앞서 준 left : 100%; 값을 정상화 시키기 위해 'auto값' 주기! 2021. 5. 4.

2021-05-02 (20일차) 메뉴바 만들기 연습 - 1차 메뉴 만들기 연습 - 2차 풀다운 메뉴 만들기 연습 - 3차 풀다운 메뉴 만들기 연습 2021. 5. 4.

이전 1 ··· 10 11 12 13 14 15 다음

티스토리툴바