console.log("CAPABLE");

📌 Git? 👍 Git의 장점 네트워크 전송 속도 분산형이 아닐 경우 소스 커밋을 하기 위해 수작업으로 해야했기 때문에 번거롭다. 그래서 네트워크 연결되어 있어야 한다. 깃은 분산형 버전관리 시스템이 여서 네트워크가 연결되지 않은 환경에서도 로컬에서 커밋이 가능하다. 네트워크 연결된 환경에 가서 서버에 파일을 올리고 내려받기 가능하다. 로컬로 관리함으로 속도가 빠르다. 파일처리 hash 알고리즘을 사용하여 파일의 변경 여부 확인 가능 변경되지 않은 파일 경우 이전 파일에 대한 링크만 저장함으로 작은 파일 사이즈와 속도 처리가 빠르다. 동시 다발적인 개발 책임성 소스를 누가 올렸는지에 대해 확인 가능하다. 대형 프로젝트 효율적으로 지원 Branch 전략 깃은 branch를 생성하고 삭제하는데 편리하다. b..

CSS의 기본 규칙 selector { property: value; } ➡️선택자 뒤에 중괄호({})가 오고 설정하려는 특성이 나온다. 선택자의 종류는 많다. Universal Selector (전체 선택자) * { color: black; } ➡️페이지에 있는 선택 가능한 모든 요소들을 선택 가능하다. 스타일을 적용할 텍스타가 없는 요소들도 선택한다. Element Selector (요소 선택자) ➡️지정된 타입의 모든 항목을 선택한다. button { font-size: 40px; } Selector List ➡️쉼표를 사용해 목록에 있는 선택자 여러 개를 합치는 방법이다. h1, h2 { color: magenta; } id와 class를 사용하기 전, footer p { font-size: 16..

일반 텍스트 속성 text-align (텍스트 정렬) 가로 정렬을 설정하려면 text-align을 사용해야 한다. ➡️요소가 표시되는 위치를 정렬하는 게 아니라 요소 내적인 정렬을 의미한다. left(좌측 정렬) , center(가운데 정렬), right(우측 정렬) h1 { text-align: center; } font-weight (폰트 굵기) ➡️선택한 텍스트에서 주어진 부분의 굵기를 조정하는 것 font-weight: normal; font-weight: bold; font-weight: lighter; font-weight: bolder; font-weight: 100; font-weight: 900; 일반적으로 가장 흔한 굵기는 400;이다. text-decoration (텍스트 데코레이션)..

CSS 특성 h1 { color: purple; } 모든 을 선택하여 색상을 보라색으로 설정할 수 있다. color 속성은 배경색이 아니라 텍스트 색상을 바꿀 수 있다. background-color ➡선택한 요소들의 배경 색을 바꿔준다. CSS에서 ;(세미콜론)이 중요한 이유 CSS에서 명령을 내리거나 브라우저가 인식을 하기 위해서 ;(세미콜론)이 중요하다. ➡ ;(세미콜론)은 특성 선언을 마치고 다음 특성으로 넘어간다는 뜻이다.

CSS란? CSS(Cascading Style Sheets)는 스타일을 정하고 시각적으로 보이는 형태를 만든다. 프로그램 언어는 아니지만 문서를 시각적으로 표현하고 나태나기 위한 언어 즉 페이지에 입력된 HTML 콘텐츠를 시각적으로 표현한 것 CSS는 규칙이 중요하다. selector { property: value; } (특성, 콜론, 값, 세미콜론 순서이다.) 선택자가 있고 선택자 옆에는 중괄호가 있다. ➡ 선택자를 입력하고 특성을 설정한다. ➡ 특성을 선택하면 스타일이 정해진다. CSS를 올바르게 작성하는 방법 1. Inline styles | HTML 요소에 직접 스타일을 작성하는 것 ➡ 좋은 방법 X Hello World

구조화 header에는 제목이 있어야 한다. 📘 The Code Magazine Blog Challenges Flexbox CSS Grid header가 있어야 나머지 콘텐츠가 나올 수 있다. Copyright © 2027 by The Code Magazine 웹 페이지 마지막 즉 바닥글에 footer를 추가할 수 있다. Blog Challenges Flexbox CSS Grid 서로 구별된, 그룹화가 안된것을 그룹화하겠다. 어떻게? 일부 컨테이너 요소를 사용해서 말이다. nav를 사용할 것이다. nav는 navigation의 약자이다. Blog Challenges Flexbox CSS Grid nav를 사용하여 네 개의 링크는 그룹화가 되었다. nav에 따라 탐색인 이 상위 요소로 이동한다. 이제 문제..

이미지 태그? 이미지 삽입할 때 사용 src 속성을 사용해 이미지 파일이 있는 경로를 알려줘야 화면에 이미지 표시 가능 src 속성? source를 의미한다. 이미지 파일 경로 지정 alt 속성? 이미지를 설명해주는 대체 텍스트 width 속성, height 속성? 이미지 크기 조정하기 width 속성과 height 속성을 사용해야하는 이유는? 원본 이미지 크기를 원하는 크기로 조정할 수 있다. 이미지의 높이랑 크기도 지정할 수 있다. 태그, 태그? 이미지에 설명글 붙이는 것 태그>? 설명 글을 붙여야 할 대상을 지정 한 단위가 되는 요소를 나타내기 위해 사용 태그안에 태그 사용 링크 링크는 두가지 범주로 나눌 수 있다. 1. 내부페이지로 이동하는 것 당사 웹페이지 내의 다른 페이지로 이동하는 것이다. ..

목록 요소 태그? 점으로 표시되는 목록, 정렬되지 않은 목록 태그? 목록 만들기 태그를 사용하고 태그를 사용한다. 순서 없는 목록의 경우, 각 항목앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙는다. To be able to use the fundamental web dev language To hand-craft beautiful websites instead of relying on tools like Worpress or Wix To build web applications To impress friends To have fun 태그 순서가 있는 목록 태그? 목록 만들기 태그를 사용하고 태그를 사용한다. The opening tag The closing tag The actual elemen..

의미없이 요소를 묶기 위한 태그 -> Container 문단도 블록 요소이다. ? 콘텐츠 분할(division) 요소(The Content Divison Element) 무언가를 잡아 두는 또는 요소를 그룹화하는 제네릭 컨테이너이다. 전체 블록을 차지하고 위아래의 콘텐츠를 밀어낸다. (CSS에서는 div로 콘텐츠를 그룹화 가능하다.) block -level block -level은 기본적으로 한 줄을 생성해서 내용을 표현한다. ? 텍스트나 콘텐츠를 span으로 감싸면 하나의 그룹으로 묶어 css로 스타일을 정한다. 제너릭 컨테이너 inline-level (주로 block-level 안에 들어간다.) 은 와 비슷하지만 인라인이기 때문에 전체 블록을 차지하지 않는다. 무언가를 그룹화하기 위해 다른 스타일을 ..

인터넷은 하나의 작은 네트워크지만 네트워크의 네트워크들이 합쳐져서 매우 큰 형태를 이룬다. 멀리서 바라보면 서로 엉켜있는 모습처럼 보이지만 서로서로 잘 연결되어 있다. 인프라가 많은 기기들을 소통할 수 있게 해준다. 그렇다면 인터넷 속 정보들은 어떻게 전송될까? 간단한 답변이다. 바로 케이블을 통해 연결된다. 땅이나 바다 밑에 케이블들이 있다. 엄청난 빠른 속도로 이동한다. 마치 도로에 차들이 지나가는 모습처럼 말이다. 웹이란 무엇일까? 인터넷을 통해 공유할 수 있는 정보 시스템이다. 이 자원들과 문서는 URL을 통해 확인한다. 인터넷은 웹보다 많은 것들을 한다. 웹은 그 케이블을 통해 넘어 다니는 것들의 일부분이다. 웹은 인터넷을 통해서 정보를 교환할 수 있게 해준다. 정보를 이송할 때는 HTTP라는 ..