전체보기 974
[css] 테이블 테두리 한 줄로 만들어 보자
안녕하세요. 개자이너 씸플레이입니다. 테이블에 보더를 넣으면 한 줄이 아니라 두 줄로 보일 겁니다. 위의 이미지처럼 안쪽과 바깥쪽 테두리가 따로 생기는 경우입니다. 여기서 선을 한 줄로 만들어보겠습니다. 1. 테이블에 테두리 넣기 See the Pen LYZwROL by ssimplay (@ssimplay) on CodePen. table{ border:1px solid black; } th, td{ border:1px solid black; } 일단은 두 줄이 생겨도 테두리를 넣어주도록 하겠습니다. 테이블 전체와 th, td 모두 넣어줍니다. 2. border-collapse : collapse See the Pen wvWVzOb by ssimplay (@ssimplay) on CodePen. 테이블에..
![[css] 테이블 테두리 한 줄로 만들어 보자](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbceV8F%2FbtqNZNNgMVk%2FAAAAAAAAAAAAAAAAAAAAAGCsEIDkV1o4FuuMFdeSqGRlLC8bHZgJAvasm-ZIGzm9%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D%252BSmOB%252BNmOuCcgQrPJqmGYaqWWzs%253D)
[어피니티 포토] 레이어 패널이 사라졌을 때 대처 해보자
안녕하세요. 개자이너 씸플레이입니다. 프로그램을 다루다 보면 뭔가 잘못 눌러서 필요한 기능이 꺼진다거나 켜진다거나 그런 일이 발생합니다. 이때 당황하지 말고 대처해봅시다. 사실 별로 큰일은 아니니까 무서워할 필요는 없습니다. 1. 레이어 패널이 없어짐 예시로는 귀여운 치치 키링 이미지를 가져와봤습니다. 편집 중인 이미지라 조만간 소식 들고 찾아오겠습니다. 그 이야기는 뒤로 하고 오른쪽이 뭔가 허전하지 않습니까? 레이어 패널이 없어졌습니다. 실수로 패널이 감춰지면 당황스럽기 그지없습니다. 자, 침착하게 레이어 패널을 다시 불러오겠습니다. 2. view 상단 메뉴 중 View를 보면 웬만한 보이는 것들은 해결할 수 있습니다. 레이어 패널도 여기서 해결해보겠습니다. View>Studio>Layers를 클릭하면..
![[어피니티 포토] 레이어 패널이 사라졌을 때 대처 해보자](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FWdW6f%2FbtqNJwSS3ol%2FAAAAAAAAAAAAAAAAAAAAAH7uFZwqzh8UVOoSe2ZzB7xRcy6SJNymIIgBbnQYlhA_%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DxCaUJEqVRhuGrB9n4nU6ucyClwI%253D)
[css] 도형을 회전시키는 애니메이션을 만들어보자
css 만으로도 약간의 애니메이션 기능을 넣을 수 있답니다. 신기하죠? 그럼 바로 시작해볼까요? 1. transform div:hover{ transform: rotate(45deg); } transform 기능을 이용해 도형을 회전시켜보겠습니다. 사실 css의 속성 이름은 굉장히 직관적입니다. 영어라서 괜히 어려워 보이는 것뿐이랍니다. 한글로 써본다면 조금 더 이해하기 쉬울 겁니다. div:hover{ 변형 : 회전 (45도) } 영어가 동사라 정확한 번역은 아니지만 중요한 부분이 아니니 넘어가겠습니다. 의미는 같으니까 말입니다. 어떠신가요? 한글로 보니까 조금 더 이해하기 쉽지 않나요? 변형하는데 45도로 회전하겠다는 의미라는 게 잘 보이죠. 2. 실제 적용 See the Pen WNxWMyz by ..
![[css] 도형을 회전시키는 애니메이션을 만들어보자](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbvuif0%2FbtrevXWeVFd%2FAAAAAAAAAAAAAAAAAAAAAEaxXhzoHHWPDiDjDxK2kUEdr0PDXIRk9LGckIs9dN1t%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DjZGC6GVxKBGtigQY46MLKAF2HIA%253D)
[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자
html 기본 구조를 자동완성으로 불러와보겠습니다. 1. 새 index.html 파일 여기 아무것도 안 쓴 index.html 파일이 있습니다. 이제 본격적으로 코딩을 시작해 볼까 하는데 초보자라면 아직은 어색한 기본 구조가 갑자기 잘 떠오르지 않을 것이고, 경험자라면 사실 매번 같은 코드를 적는 것도 귀찮습니다. 이럴 때 에디터 프로그램의 유용함이 빛을 발휘합니다. html 자동완성을 이용해 봅시다. 2. ! + Tab !(느낌표)를 누르면 아래로 뭔가 잔뜩 뜨는데 신경 쓰지 마시고 Tab키를 눌러줍니다. html5 기본 구조가 자동완성으로 입력되는 것을 볼 수 있습니다. 얼마나 편한지 감동이 다 몰려옵니다. 반응형 작업에 필요한 뷰포트(viewport)도 잊지 않고 챙겨줘서 좋습니다. 3. 수정할 부..
![[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FBbhvx%2FbtqNLPJJAid%2FAAAAAAAAAAAAAAAAAAAAAP5pSjiI4IEqA797C6mzgw_kkqi9EC1UcALTKIE8ovXA%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DFr62rCtGi5qMTVlu93D5AsCzRFg%253D)
[프로크리에이트] 손가락 인식 안되게 해보자
안녕하세요. 개자이너 씸플레이입니다. 프로크리에이트에서 손가락은 그리기 인식이 안되게 해보겠습니다. 1. 손가락 인식 될 때 손가락 인식이 된다면 그림을 그릴 때 방해를 받습니다. 새끼 손가락 부분이 터치가 선이 막 그어진다거나, 나도 모르는 점이 찍혀있을 때가 발생합니다. 터치를 잠가서 그런 불상사를 막아봅시다. 2. 제스처 제어 프로크리에이트 화면에서 왼쪽 위를 보시면 설정 버튼이 있습니다. 갤러리라는 글씨 바로 옆의 아이콘입니다. 설정 아이콘을 클릭해줍니다. 설정>제스처 제어 메뉴로 들어가줍니다. 제스처 제어 화면에서 일반 페이지로 들어오시면 터치 동작 비활성화라는 칸이 있습니다. 여기서 터치 비활성화를 시켜줍니다. 비활성화가 잘 적용되었다면 파란색으로 보입니다. 확인해주시고 오른쪽 위의 완료버튼을..
![[프로크리에이트] 손가락 인식 안되게 해보자](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FXSTAO%2FbtqNCx5gCPs%2FAAAAAAAAAAAAAAAAAAAAAGO5rmnf2CMhxlzc9A4Jxk0eNQ5MP4WD83pckhhhey8C%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DOgGU9z7Ak6LgWR%252BaMBKWMFituiM%253D)