728x90
반응형

☭DEVELOPER/#2 웹개발(자바기반 풀스택) 211

비주얼스튜디오코드⑥ 주문서 작성하기

thead tfoot tbody tbody가 추가 될 수 도 있기 때문에 나중에 넣는 편임 class> style 적용할 때는 . 으로 시작 .table2 명령어를 중복되어 쓸때는 ,(쉼표)를 써주고 같이 적용할 부분을 써주면 된다. *주문서 작성하기 랩 wrap: 웹페이지를 감싸는 역할을 함 큰덩어리이이기 때문에 id를 부여해준다. *{} : 전체적용 margin: 0; : 상단 여백 없애줌 여백없이 랩 적용 h태그: h1- 로고 적용 시 사용 h1은 로고에 사용하지만 로고가 없으니 h1 사용 p태그: 단락 태그 줄 칸 띄우기 padding: 안쪽 여백/ 칸 포함해서 적용됨, 박스 넓이 높이가 같이 늘어남 margin: 칸 제외됨, 칸이 안늘어남 **wrap: height 높이값 적용 안 하는게 좋음,..

비주얼 스튜디오 코드⑤ 폼태그

01 폼태그 label: 아이디, 비밀번호 란을 만들 때 사용 input: text 넣는 란 br: enter input type="password" > 텍스트가 가려서 나옴 폼태그 인포박스 chekbox: 여러개 선택하는 체크박스 radio: 선택란 중 하나만 선택할 수 있는 체크박스일 때 사용 name="a" 이름을 부여해서 하나만 선택할 수 있게 할 수 있다. value: 원하는 데이터 수집할 때 용이 color h구조는 블록구조 h4태그로 br 대신에 줄바꿈을 사용할 수 있다. date: 날짜박스 file: 첨부파일을 넣을 수 있음 input type="file" button : 버튼 박스 input type"button" value="클릭" submit: 전송단추 셀렉트문: 패밀리로 탭구성 예제..

[포토샵] 원근감, 그림자 반사 효과

01 원근감(투시 주기) 1. ctrl+t > perspective > 마우스로 드래그해서 모양 조정 2. alt+j 레이어 복사 > ctrl+t > flip horizontal > flip vertical 3. 그림자 부분 add layer mask 생성 4. 그라디언트 > 흑백컬러 설정 5. 마스크레이어 선택 후 그라디언트 드래그 6. 배경색도 이쁘게 채워주면 완성! [혼합모드] 레이어 > normal 탭 누르면 취향대로 선택해줌 두개의 레이어를 자연스럽게 혼합해줌 opacity 값으로 조정하면 더 자연스러워짐 [정렬] 개체정렬 시 양끝 기준으로 가로간격 동일하게 정렬해줌 비트맵: 점들이 모여 선을 이룸 , 계단형식으로 확대하면 이미지가 깨짐 벡터(함수방식): 일러스트레이터는 벡터방식 타피콘만들기 a..

비쥬얼 스튜디오 코드④_테이블 만들기2 , 목록태그

01 테이블 만들기 wrap을 정중앙에 보내기: margin: 0 auto; ** 반응형할때는 height 값 빼줘야함> 반응형에 탄력있게 크기조절이 되어야하는데 높이값을 들어가면 반응형 크기 조절이 안됨. wrap색 텍스트 여백주기_1 텍스트 여백주기_2 태그: 단락 [이름 부여해주기] 1. class: 똑같은 이름을 여러개를 부여해서 사용할 수 있음 2. id: 중복된 이름을 사용하지 않음, 큰덩어리에만 부여 p태그 생략가능 #wrap p.text = #wrap .text padding 값은 크기를 늘린다. w300 에 padiding 30px 을 주면 w360이 된다. float 을 띄우면 텍스트, 이미지가 한층 더 올라감 clear로 텍스트, 이미지가 못올라가게 함 , clear가 비어있는 1층공..

[포토샵] 세로형 카드뉴스 만들기

01 세로형 카드뉴스 만들기 _ 글꼴: 여기어때 잘난체, 베스킨라빈스 B _ 크기: 600px X 900px _ 아트보드(대지): 웹에 올릴 시에 대지 이름은 반드시 영문으로 설정 [커버카드 만들기] 1. 새파일 열기 2. 고양이 사진 열기 3. 이동툴로 [새파일1]에 옮기기 4. 고양이사진 크기 조절 ctrl+t 5. 비율안맞는 사진 배경 늘려주기: rectangular marquee로 넣어줄 이미지 부분 영역 잡아주기 > 이미지 레이어 선택해주고 잡아준 영역 ctrl+t로 모양 변경 > 방향키로 영역 늘려주기 6. shift+ 방향키로 글자를 10px씩 이동할 수 있음 7. ctrl+ ; 은 가이드라인 숨김 8. 말풍선 넣어주기: windows > shapes > 햄버거 탭 클릭 > lagacy sh..

비주얼 스튜디오 코드③ 테이블

01 테이블 테이블 - 반응형에서 제약이 있지만, 편리하고 넓이값 높이값을 퍼센트로 줄 수 있기 때문에 용이 td td td td tr 한 줄씩을 tr 한 칸씩을 td 라고 부른다 tr을 이루는 것이 table. h태그는 1번부터 6번까지 사용할 수 있다. h1 태그는 로고에만 사용함 가장 큰 제목이 로고 align = 가로정렬 valign(vertical align) = 세로정렬 1-1 테이블 병합 colspan: 칸을 합친다. rowspan: 줄을 합친다. border: 가장자리 cellspaceing="0": 테두리 두줄로 되어있는 걸 한줄로 합쳐줌 수치가 들어갈 경우 테이블보더와 tr/td 간 두께가 생김 body란? 바디 백그라운드 컬러 변경 2가지 방법 1. 안에 생성하여 body 백그라운드 ..

[포토샵] 머리카락 누끼따기 , 아트보드 활용

01 백그라운드 지우개 _ 머리카락 누끼따기 백그라운드 컬러로 지정한 뒤 백그라운드지우개크기를 크게 한 상태로 지워주면 머리카락누끼 따기가 용이하다. (단, 배경이 단색일때 가능) F12 : 원본상태로 돌아가기 02 SELECT AND MASK _ 머리카락 누끼따기 2 상단바에 셀렉트 앤 마스크 클릭 VIEW에 오버레이 선택 Refine edge brush tool 선택해서 섬세하게 머리카락을 딸 수 있다. 머리카락 누끼따기 완성 03 아트보드 아트보드를 여러개 만들어서 하나씩 저장이 가능 ppt 로도 활용 가능 아트보드지 밖으로 나가면 이미지가 안보임 이미지 키우기 사진 투명도 주기 opacity65% 지정해주면 배경이 투명해짐 04 테두리만들기 ctrl+a Edit > stroke > width, c..

비주얼 스튜디오 코드②_이미지넣기_백그라운드 이용

크롬설정하기 manage > settings > extensions > live server config > custom browser > chrome 변경 화면 셋팅하기 _ 글자 한문단에 계속 이어지는 것 방지하기 manage > settings > search settings에서 word 검색 > word wrap 찾아서 wordwrapColumn 설정 하기 배너 이미지 적용 이미지 넣을 부분에 주석처리 해주어 이미지를 대체한다. 주석처리: ctrl+/ [배너 이미지 넣기] #banner 안에 background: url( . /폴더/파일이름) . 은 자기자신: index.html 안에 있는 폴더 .. 은 상위폴더(부모폴더) margin: 바깥여백, 컬러값을 넣으면 박스의 여백이 늘어남 padding..

[포토샵]그라디언트, 사진 합성하기

01 그라디언트 그라디언트 투명값 주기 그라디언트 더블클릭 윗쪽 화살표 선택 > opacity 값 설정 02 사진합성하기 _벽 합성하기 이동툴로 빨간벽을 회색벽 파일로 옮겨주기 빨간벽 레이어 선택하고 add vector mask 생성 하얀색 섬네일 생성되면 섬네일 레이어에서 그라디언트 적용하여 수평으로 끌어주면된다 검정색 부분은 투명도로 들어감 벽합성 완료 _ 바다, 하늘 합성하기 각각의 바다사진과 하늘 사진 합성하기 위해 바다사진에 하늘사진을 합성할 위치에 이동툴로 놓기 빨간벽 레이어 선택하고 add vector mask 생성 마스크 생성되면 그라디언트 생성 그라디언트 블랙>화이트 로 만들어주기 아래에서 위로 드래그해서 그라디언트 만들어주기 하늘+바다사진 합성완료!

웹 디자인 header.html

포토샵 새로만들기 > 문서설정 w1200 * h700 rgb컬러 설정 [레이어추가] -header -banner -contents -footer style > fixed size 변경 후 height 100 / 300 / 200 눈금자 표시 style > normal 변경 포토샵 보다 피그마가 더 유용하게 사용함 영역 지정후 레이어 별 alt+delet 연한색으로 칠하기 비주얼스튜디오에서 넘어와서 포토샵에서 디자인한 정보를 토대로 스타일을 변경해줌 div 기본적으로 마진값이 적용되어있다. div 마진값 설정 마진값 0을 주고싶다면 margin: 0px; * : 모든영역에 적용 > 모든 영역에 디폴트로 적용 padding: 글자에 여백이 들어감 여백 치수는 시계방향으로 적용된다. 모든 모니터에 적용하기 위..

728x90
반응형