전체 글170 [CSS] CSS 그림자 속성(box-shadow, text-shadow) HTML 요소에 그림자 추가하는 방법CSS의 box-shadow와 text-shadow 속성을 사용하여 요소에 그림자 효과를 줄 수 있습니다. 1. box-shadow📝 box-shadow 형태box-shadow: inset offset-x offest-y blur color;/* 요소 2개 : offsetX, offsetY 요소 3개 : offsetX, offsetY, blur-radius 요소 4개 : offsetX, offsetY, blur-radius, spread-radius*/속성명설명inset안쪽 그림자 (optional)offset-x요소를 기준으로 그림자의 수평 방향 떨어진 간격offset-y요소를 기준으로 그림자의 수직 방향 떨어진 간격blur그림자 가장자리를 부드럽게 처리.. 2024. 5. 27. [CSS] 패딩(Padding), 마진(Margin), 테두리(Border) CSS 박스 모델모든 HTML 요소는 박스(box) 모양으로 구성된 박스 모델을 기본으로 함 박스 모델은 HTML 요소를 테두리(border), 패딩(padding), 마진(margin) 등을 갖는다.내부 여백은 패딩 외부 여백은 마진 박스 모델 용어용어의미content (내용)텍스트나 이미지 등 박스 내의 실제 내용border (테두리)박스의 테두리 (내용과 패딩 안에 포함)padding (패딩)content와 border 사이의 간격 (안쪽 여백)margin (마진)border 밖의 여백으로, 주로 이웃 요소와의 간격(여백)으로 사용 박스 모델 기본 속성용어의미width박스의 넓이 (default: display 속성에 의해 결정)height박스의 높이 (default: 일반적으로 콘텐츠의 높이)ba.. 2024. 5. 27. [CSS] CSS Grid(그리드) 레이아웃 CSS GridCSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있습니다. CSS Grid는 CSS Flex와 같이Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다. (부모요소) Container ▶ Items를 감싸는 부모 요소, 그 안에서 각 Item을 배치할 수 있습니다. (자식요소) Items ▶ 각 Item 열(가로) column 행(세로) row 출처 : https://studiomeal.com/archives/533Grid ContainerGrid Container를 위한.. 2024. 5. 25. [CSS] CSS 적용 방법, 스타일 적용 우선순위 1. CSS 적용 방법선언방식형태내용특성 인라인 방식 HTML 문서 안에각 엘리먼트에 속성으로스타일을 끼어 넣는 방식HTML 태그 안에style 속성을 설정 내부 방식 HTML 문서 내부에스타일 시트를 삽입style 태그 내에스타일시트 작성 외부 방식 HTML 문서 외부에독립된 스타일 시트파일을 작성하여연결하는 방식link 태그를 통해외부 CSS파일을 연결 임포트 방식 스타일시트 안에서 별개의 스타일시트 파일을 포함하는 방식스타일 시트 안에 @import 규칙으로 CSS파일을 포함 2. CSS 적용 우선순위1. 스타일 적용 우선순위!important >>> HTML style >>> #id >>> .class, :가상클래스 (가상 클래스 > 클래스)>>> 태그선택자, ::가상요소 >>> 부모에게 상속받.. 2024. 5. 25. [GitHub] 깃허브 contributors 삭제하는 법 github의 repository 우측에 보이는 contributor에서 원치 않는 사람을 삭제하는 방법c.f.) contributor 와 collaborator는 서로 다름1. 지우고 싶은 사람의 첫번째 commit 바로 직전의 commit으로 돌아간다.https://creative103.tistory.com/148 [GitHub] 이전 커밋(commit) 삭제 : reset 사용 (커밋 롤백)github에 push된 commit 삭제하는 법1. git log를 통해 삭제할 commit 찾기2. git reset을 통해 commit 삭제하기최근의 commit을 삭제하고 싶을 땐 git reset HEAD^최근의 n개의 commi을 삭제하고싶을땐 git reset HEAD~n3. gicreative10.. 2024. 5. 25. [GitHub] 이전 커밋(commit) 삭제 : reset 사용 (커밋 롤백) github에 push된 commit 삭제하는 법1. git log를 통해 삭제할 commit 찾기2. git reset을 통해 commit 삭제하기최근의 commit을 삭제하고 싶을 땐 git reset HEAD^최근의 n개의 commi을 삭제하고싶을땐 git reset HEAD~n3. git push -f origin "branch name"을 통해 github에 commit 삭제를 알리기git loggit reset HEAD^git push -f origin "master"이 3번째 단계를 해주면 github에서도 commit 삭제가 반영된다. 2024. 5. 25. [HTML] 폼(Form) 태그 종류 태그폼태그에는 name, action, method, target 등이 있습니다. 폼 속성을 이용해 입력한 값을 어디로 보낼 것인지 어떻게 보낼 것인지 정할 수 있습니다. 📝 형태 /* 데이터 전송 내용 */ name : 폼의 이름을 지정합니다.action : 폼 데이터가 전송되는 백엔드 url을 지정합니다.method : 폼을 서버에 전송할 http 메소드를 정합니다. (GET / POST)target : action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정합니다.accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다. 필수 속성action : 데이터를 전달할 url을 넣어줌method : 폼 요소를 전달하는 방식으로 POST와 GET 이 있습니다.POSTurl에 받.. 2024. 5. 24. [CSS] 블록(Block), 인라인(Inline), 인라인 블록(Inline-Block) [display : block, inline , inline-block] 1. 블록 요소 (Block Element)- 사용 가능한 최대 가로 너비를 사용함 ( 기본 너비값은 100% ) - 전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 ) - width, height로 크기를 지정할 수 있음- padding, margin으로 상하좌우 여백을 지정할 수 있음 - 레이아웃을 작업하는 요소로 적합 📝 블록 태그 종류, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 사용예시 ( ↘ 각 요소에 적용한 값 ) width: 150px; height: 30px; padding: 10px; margin: 10px;💡 그런데 잘 보면 각.. 2024. 5. 24. 모바일 건강보험증 발급 방법 1. 모바일 건강보험증2024년 5월 20일부터 병원 및 약국 이용 시 신분증 지참이 필수화됩니다. 이에 국민건강보험공단에서 제공하는 '모바일 건강보험증'을 활용하면 신분증 대체 가능2. 모바일 건강보험증 발급방법모바일 건강보험증은 국민건강보험공단에서 제공하며, 사용하고 있는 휴대폰 기종과 상관없이 1분 만에 간편하게 발급할 수 있습니다.1. 앱 설치👉 안드로이드 : 모바일 건강보험증 어플 다운로드👉 아이폰 : 모바일 건강보험 어플 다운로드 2. 앱 실행1) 설치한 앱을 실행한 후, 사용자 유형을 선택합니다. 2) 개인정보 보호 약관 동의 3) 본인인증 진행 4) 휴대폰 본인확인 5) 비밀번호 설정 6) 모바일 건강보험증 확인 3. 모바일 건강보험증 사용방법병·의원 방문 시.. 2024. 5. 23. 이전 1 2 3 4 5 6 7 ··· 19 다음 728x90 반응형
