전체 글 201

css - 속성 선택자

html 요소의 속성 유무 또는 속성값을 중괄호[ ] 안에 넣어 선택자로 사용 속성 값 설명 h1[class] class 명을 가진 h1 요소 img[alt] alt 속성을 가진 img 요소 p[class="abc"] class 명이 유일하게 'abc' 인 p 요소 p[class~="abc"] class 명이 유일하게 'abc' 이거나 여러개의 class 명 중 하나가 'abc'인 p요소 p[class|="abc"] class 명이 'abc' 이거나 'abc ~ ' 로 시작하는 p요소 p[class^="abc"] class 명이 'abc' 로 시작하는 p요소 p[class$="abc"] class 명이 'abc' 로 끝나는 p요소 p[class*="abc"] class 명이 'abc' 가 포함되어 있는 ..

CSS 2023.09.12

style, css - 작성방법 및 선택자

css 작성 방법 선택자{속성:값;속성:값;} h1{color:blue;} h1 요소에 color(글자색)을 blue(파란색)으로 설정해라. 선택자는 스타일을 지정하려는 html 요소를 의미하고 선언 블록은 {} 안에 작성한다. 속성과 값을 : 로구분, 하나 이상의 선언이 포함되어있다. 선택자 종류 사용방법 태그 (type)선택자 ex) h1, p, section h1{color:red;} 클래스 선택자 ex) .util .util{color:orange;} 아이디 선택자(주의 이름은 숫자로 시작할 수 없다.) ex) #gnb #gnb{font-size:30px;} 전체 선택자 ex) * *{color:blue;} 하위 선택자 ex) header h1 header h1{color:pink;} 자식 선택자..

CSS 2023.09.12

figma dropdown

1. 글자 입력하기 단축키 t 글자 입력 후 오른쪽 3번 칸에서 글자 속성을 변경한다. 2. 삼각형 모양 선택하기 글자와 삼각형 선택(drag) 한 후 마우스 우클릭 padding 등 설정해주고 외곽선 넣기 위해 stroke 선택하여 색 넣기, 배경색 넣기 위해 fill 선택하여 색 넣기. frame 복제 alt 누르고 아래로 드래그 , 또는 ctrl + c, ctrl + v 내용 수정하기 site1,2,3 선택 후 정렬 후 우클릭 add auto layout 또는 shift + a 각각 선택후 stroke 없애기 frame5 선택후 stroke 넣기 전체 선택 후 create component ( ctrl + alt + k) properties 의 + 클릭 variant 클릭 총 5개의 variant ..

figma 2023.09.08

포토샵 - 겹친글자2

1. ctrl + n 860 * 640 1. 1번 전경색 클릭 후 색상 000입력후 ok alt + delete 로 색상 변경 2. 단축키 t 또는 t 클릭하여 type tool 선택 3. set text color 클릭하여 원하는 글자색 선택 글자 크기 200pt 4 글자 하나 쓰고 ctrl + enter, 클릭 글자 하나 쓰고 ctrl + enter,클릭 글자 하나 쓰고 ctrl + enter,클릭 글자 하나 쓰고 ctrl + enter, 포,토,샵 포 레이어 선택 상태에서 ctrl + j 레이어 카피 fx 클릭하여 gradient overlay 선택 색상은 모두 검정으로 선택 첫번째 색상 opaicy: 100% 위치 0 마지막 색상 opacity 0% 위치 60% 토 레이어 선택 ctrl + j 방..

Design 2023.08.11

포토샵 글자겹친효과

1. ctrl + n 860 * 640 1. 1번 전경색 클릭 후 색상 032227 입력후 ok alt + delete 로 색상 변경 2. 단축키 t 또는 t 클릭하여 type tool 선택 3. set text color 클릭하여 원하는 글자색 선택 글자 크기 200pt 4 글자 하나 쓰고 ctrl + enter, 클릭 글자 하나 쓰고 ctrl + enter,클릭 글자 하나 쓰고 ctrl + enter,클릭 글자 하나 쓰고 ctrl + enter, 겹,친,글,자 글자를 겹쳐준다. 해당 레이어 선택 이동툴(m) 키보드 방향키 이용하여 겹친다. 그림자 만들기 글자 레이어 위에 layer 추가 클리핑 마스크 씌우기 방법 1: 우클릭 create clipping mask 방법 2: 빨간 선 부분을 alt + ..

Design 2023.08.11

포토샵 종이말린효과, 자연스러운 그림자효과 warp 활용

이미지 가져오기 ctrl + t 말린부분 표현하고자 하는 부분의 앵커포인터 클릭하여 드래그 1,2 방향선으로 조절하기 fx- stroke size:1 색상 #ddd - ok 레이어 복사 ctrl + j 레이어 스타일 삭제하기 - fx 클릭하여 휴지통으로 끌고가기 우클릭 - Rasterize layer ctrl + u 레이어 순서 변경 그림자 효과를 아래로 ctrl + [ : 한칸 아래로 내려감 m - move tool 선택후 오른쪽, 아래 방향키 이동하여 살짝 그림자 부분 보이게 만들고 (오른쪽6, 아래6 하였음) filter - blur - gaussian blur 그림자 크기 조절 - ctrl + t, alt+shift 누르고 드래그하여 사이즈 줄인다. 위치 적절히 이동 후 enter opacity ..

Design 2023.08.11

포토샵 - 종이 말린 효과

1. 포토샵 실행 - ctrl + n width:600px height:400px Resolution : 72 create 2. 그리드 환경설정 ctrl + k - guide,Grid & Slices - Gridline Every 200px Subdivisions: 10 3. 사각형 툴 선택 위 사이즈와 동일하게 넣는다. fill - 원하는 색, stroke - 없음 4. 잘린듯한 효과 주기 4-1 펜툴 꾹 누르면 나오는 add anchor point tool 선택 후 4-2 ,4-3 부분을 한번씩 클릭하여 앵커포인트를 추가해준다. 4-4 direct selection tool 선택후 4-5 5번부분을 클릭하여 delecte 지운다. 추가한 부분 선으로 연결하기 위해 펜툴 선택 후 alt + 클릭한다. ..

Design 2023.08.11