코딩하는 김딸기

/* Reset */ul {  margin: unset;  padding: unset;}h2 {  margin: unset;}li {  list-style-type: none;} ul (unordered list)와 h2 (heading level 2)의 기본 여백(margin)과 패딩(padding)을 unset으로 재설정하여 브라우저의 기본 스타일을 제거합니다.li (list item)의 기본 리스트 스타일을 제거하여 불릿 포인트를 없앱니다. Components/* Components */body {  background-color: #222;}.section {  max-width: 800px;  margin: 60px auto;  border: 8px solid dodgerblue;  paddin..

Flexbox 가용 공간Flexbox(플렉스박스): 부모 요소와 직계 자식 요소간의 관계를 기반으로 레이아웃을 잡을 수 있게 해주는 속성 A A A.flex-container { display: flex;}.flex-item { /* 직계 부모 요소인 .flex-container 기준으로 배치되는 Flex Items 상태가 됨. */}Flexbox의 세부 속성중 하나인 flex-direction속성의 초기값인 row에 의해 .flex-item들은 기본적으로 가로로 배치됩니다. .flex-container { display: flex; /* flex-direction: row; 초기값으로서 세팅 되어있는 값 */}.flex-item { /* flex-direction: row의 영향으로 가로..

원격 저장소 생성 및 pushGitHub 웹사이트에서 새 원격 저장소를 만듭니다.저장소를 생성한 후 나타나는 페이지에서 원격 저장소 URL을 복사합니다. 예를 들어, https://github.com/username/repository.git.원격 저장소를 추가합니다.파일을 추가하고 커밋한 후 원격 저장소에 푸시합니다.# 1. 로컬 저장소를 초기화합니다. (이미 초기화된 경우 이 단계는 건너뜁니다)git init# 2. 파일에 내용을 작성합니다.echo "Hello, Git!" > example.txt# 3. 변경된 파일을 스테이징합니다.git add example.txt# 4. 커밋 메시지를 작성합니다.git commit -m "Initial commit"# 5. 원격 저장소를 추가합니다. 위에서 복사..

Git의 버전 관리 : 소스 코드의 변경 사항을 체계적으로 기록하고 관리하는 방법이를 통해 소프트웨어 개발자들은 코드의 히스토리를 추적하고, 필요한 경우 특정 시점의 코드로 되돌아가거나, 여러 개발자가 동시에 작업할 수 있게 됩니다.  Git의 버전 관리 개념커밋 (Commit):각 커밋은 프로젝트의 스냅샷을 저장합니다.커밋은 고유한 해시(SHA-1)를 가지며, 이전 커밋과의 연결고리를 형성합니다.커밋 메시지를 통해 변경 사항에 대한 설명을 남길 수 있습니다.# 파일 변경 사항을 스테이징 git add  # 특정 파일 추가git add .  # 현재 디렉토리의 모든 변경 파일 추가 git restore --staged 파일이름 #스테이지에 있던 파일을 working 디렉토리로 보냄 # 커밋 생성git ..

네거티브 마진 negative margins margin 속성은 CSS에서 요소의 외부 여백을 제어하는 강력한 도구입니다. 이 속성의 특별한 점은 요소의 시각적 표현과 실제 차지하는 공간을 독립적으로 조작할 수 있다는 것입니다. 특히 네거티브 마진(음수 마진)을 사용하면 요소의 레이아웃을 더 유연하게 조정할 수 있습니다. 마진은 실제요소가 실제로 차지하는 공간과 눈에 보여지는 부분을 별도로 관리할수 있게 하는 속성 실제 차지하는 공간은 증가했지만 이미지의 보이는 영역은 증가하지 않았다 실제 차지하는 부분이 깎인것이라고 브라우저를 속임-그러나 이미지의 보여지는 부분은 그대로이므로 마치 이미지가 위로 올라간것처럼 보이게 한다. 실제로 이미지의 위치이동은 없다-위아래 마진을 음수로 하면 위아래 이미지가 차지하..

1. 레이아웃 설정DOCTYPE html>html>    head>        title>My Bucket Liststitle>        link rel="stylesheet" href="bucketstyle.css">    head>    body>            body>html>   2.body내부의 덩어리 레이아웃 분석하고 컨텐츠 삽입body>        div class="wrapper">             section class="Bucketlist">                header class='Bucketlist-header'>                    h1>My Bucket Listh1>                header>               ..

Cascade,Selector Specificity다른 이름: 선택기 특이성, 특수성, 특이도캐스케이드는 브라우저에 내장된 체계로, 여러 곳에서 작성된 스타일 규칙이 하나의 요소에 반영될 때 어떤 스타일 규칙이 최종적으로 반영 될지를 결정합니다. 이 과정에서 셀렉터 특정성 점수, 인라인 스타일시트, !important 규칙, 코드 작성 순서등의 요소들이 고려됩니다.셀렉터 특정성 점수는 캐스케이드 체계가 동작하는 데 있어 가장 핵심적인 구성 요소입니다. 셀렉터가 작성된 형태에 따라 우선순위가 결정되며, 높은 우선순위의 셀렉터에 작성된 스타일이 최종적으로 적용됩니다.셀렉터의 작성 형태에 따른 특정성 점수 계산h1 { background-color: orange;}h1 { background-color: ..