728x90 반응형 > 메모61 [CSS] padding 축약 설정 padding 축약 속성은 1~4개의 값을 가질 수 있다.1개 값: 모든 방향의 패딩이 동일합니다.padding: 20px;/* padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; */ 2개 값: 첫 번째 값은 상하 패딩, 두 번째 값은 좌우 패딩입니다.padding: 20px 10px;/* padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; */ 3개 값: 첫 번째 값은 상단 패딩, 두 번째 값은 좌우 패딩, 세 번째 값은 하단 패딩입니다.padding: 20px 10px 30px;/* padding-top: 20p.. 2024. 6. 23. [SASS] 태그 중첩 사용 HTML 햄버거 메뉴 만들기에서span 태그에 css 넣고 싶을 경우SCSS.banner-header { display: flex; align-items: center; position: relative; width: 100%; height: 90px; .hamburger_menu { width: 80px; height: 65px; // span 태그에 스타일 적용 span { display: block; height: 10px; background-color: $main_color; margin: 15px 0; transition: .. 2024. 6. 21. [SASS] _reset 파일과 SASS 문법 reset 파일 - 후에 @use 로 임포트 해줌.- 파일이름은 _reset.scss 으로 생성./* CSS - 기본 설정 */* { margin: 0; padding: 0; box-sizing: border-box; position: relative; // pointer-events: none; text-decoration: none; list-style: none;}html { font-size: 16px;}a,a:link,a:visited { color: inherit; //하단 밑줄 색깔 없애기}전체에 position:relative 를 준 경우 주의 사항 전체 요소에 position: relative를 적용하는 접근은 일반적으로 권장되지 않음.필요한 요소에만 position: r.. 2024. 6. 19. [CSS] Pseudo, 이벤트 정리 Pseudo Class Pseudo Class - 가상 클래스: hover 할 때 , : ( 콜론) 이 하나 들어가는 것들을 CSS의 가상 클래스 라고 함.:active= 사용자에 의해 엘리먼트가 활성화 됐을 때( 마우스를 누르는 중일 때 ):hover= 사용자의 커서가 엘리먼트 위에 있을 때( 마우스가 올라가 있을 때):target= 상호작용된 요소가 가리킨 URL과target 요소가 일치할 때 사용되는 가상 class:any-link= link / visited 이 두개를 포괄하는 가상 class= 방문 여부와 관계없이 링크가 걸린 요소 전부의 style 적용 가능:checked= 대상 체크박스가 체크됐을 때:focus= 대상 요소가 활성화됐거나 된 직후일 때:focus-within= label/fo.. 2024. 6. 17. [CSS] display: inline 과 inline-block 차이 display: inline 하고display: inline-block 차이display: inline = 딱 자기 컨텐츠 영역만 차지 = 가로 정렬이 된 것처럼 보임. = 높이가 지정이 안됨. - 높이를 지정해도 설정이 되지 않음.display:inline-block - 자기 컨텐츠 만큼 차지 - 높이 값 지정 가능= 인라인 요소지만, 블록 속성 가짐. = 높이 값을 바꿔주지 못했던 기존 인라인 요소와 달리 블록 속성이 추가돼서 하위 값을 지정할 수 있음. = 인라인 요소기 떄문에 자기 컨텐츠 만큼 차지를 해서 가로 정렬처럼 보임. = 중간에 인라인 요소가 끼어든다면, 해당 요소에 높이값은 지정되지 않은 채 차이를 보이게 됨. 2024. 6. 17. [깃] Git 설치 및 설정 및 이름 변경 참고 블로그 사이트: https://code-lab1.tistory.com/249#google_vignette [Git] 윈도우10(window 10) 깃(Git) 설치하기 - Git 기초(0.5)윈도우 10(Window 10) 깃(Git) 설치하기 1. Git 설치 파일 다운로드 윈도우 10에서 깃은 공식 홈페이지에서 다운로드할 수 있다. https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releasescode-lab1.tistory.com상단의 Click Here to Downlaod 눌러서 설치.설정 이대로 하고 Next 다 Next 하고 install 해주면 됨.설정하기 git config -.. 2024. 6. 16. [깃] VsCode의 기본 터미널 설정 vscode 연 다음Ctrl + shift + P VS Code에서 Ctrl + Shift + PSelect Default Profile 검색하여 선택 원하는 설정 선택= powershell 로 선택함. 2024. 6. 16. [깃] 깃허브 한번에 이해시켜드리고 포트폴리오 올리는 법 깃, 깃허브 한번에 이해시켜드리고 포트폴리오 올리는 법까지 알려드림. 15분안에 당신은 Github 전문가가 됩니다 (youtube.com)Git 명령어 총정리집 (by 코딩알려주는 누나❤) - HackMD Git 명령어 총정리집 (by 코딩알려주는 누나❤) - HackMD# Git 명령어 총정리집 (by 코딩알려주는 누나❤)  안녕하세요 여러분 :)hackmd.io깃허브의 역할프로젝트 올리기Repositories 에서 New 버튼Repositories 에서 New 버튼 클릭플젝 이름 써주기 이름을 써주고전체공개를 할 건지 비공개를 할 건지 설정.공개로 돌리기.public 설정 후 repository 생성하기.. 2024. 6. 15. [깃] 깃허브 닉네임 바꾸기 프로필 클릭 - Settings깃허브 프로필 눌러서Settings 들어가기Account - Change username 2024. 6. 15. 이전 1 2 3 4 ··· 7 다음 728x90 반응형
