코딩하는 김딸기

기본 레이아웃DOCTYPE html>html>    head>        title>My Bucket Liststitle>        link rel="stylesheet" href="veamstyle.css">    head>    body>       header class="header">            div class="l_wrapper">                div class="header-box">/                     img  src="logo.png" class="logo">                                        p class="descript">Unlimited movies, TV shows, and more.p>     ..

Flex Items의 최종 크기 계산은, Flex Items요소들에게 지정 할 수 있는 flex-basis, flex-shrink, flex-grow, min-width, width등의 다양한 속성과 Flex Items요소의 내부에 작성 되어있는 콘텐츠 요소의 상호 작용에 의해 계산 되어집니다. 본 문서에서는 flex-direction: row 기준으로 설명 드리도록 하겠습니다.즉, Flex Items의 최종 너비가 계산되는 원리를 설명 합니다.flex-basis초기값: auto, 해당 요소의 내부 콘텐츠 크기 만큼 자동 계산.flex-basis는 flex-grow, flow-shrink속성이 동작 하는 기준 값입니다. flex-basis속성 값을 먼저 이해해야 flex-grow, flex-shrink속..

DOCTYPE html>html>    head>        title>My Bucket Liststitle>        link rel="stylesheet" href="style.css">    head>    body>       div class="playground">            div class="sidebar">sidebardiv>            div class="contents">                contentcontentscont                entscontentscontent                scontentsconte                ntscontentscontentsco                ntentsconten..

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