나도 개발자 시켜주세요

flex 구조 flex 구조는 item이 설정된 속성에 따라 container 안에서 배치된다. display: flex; flex컨테이너를 사용하기 위해서는 display: flex; 를 정의한다. 각각의 아이템은 자신의 너비만큼 공간을 차지하고 높이는 컨테이너의 높이만큼 공간을 차지한다. 배치할 축을 main axis를 주축으로, cross axis 를 교차축으로 정렬한다. .container{ /* - main axis : 주축 (주축의 기본방향 좌 -> 우) - across axis : 교차축 */ display: flex; } flex-direction : 주축(main axis) 방향 설정 아이템이 배치되는 축을 좌->우 / 우-> 좌 / 위->아래 / 아래-> 위 로 지정한다. flex-di..

position 속성 static : 기본값 position : static; 기본값으로 position을 지정하지 않으면 요소가 차례대로 쌓인다. absolute : 위치 상 부모 요소를 기준 부모 요소 기준으로 top, bottom, left, right 만큼의 이동할 위치가 결정된다. 이미 위치가 정해져 있는 요소의 부모가 있는 위치에서부터 위치가 움직인다고 생각하자. relative : 요소 기준으로 지정 top, bottom, left, right 로 위치 조절이 가능하다. static 과의 차이점은 좌표(top, bottom, left, right)의 동작 여부이다. 쉽게 static은 위치를 지정하지 않은 것이다. fixed : 브라우저 기준 요소가 항상 고정된 위치에 있게 하는 요소이다. ..

Font 속성 font-weight - 글자의 두께를 정하는 속성 normal, 400 : 기본 두께 bold, 700 : 두껍게 bolder : 상위 요소보다 더 두껍게 lighter : 상위 요소보다 더 얇게 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께 normal, 400 : 기본 두께 bold, 700 : 두껍게 bolder : 상위 요소보다 더 두껍게 lighter : 상위 요소보다 더 얇게 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께 font-size : 글자의 크기 16px : 기본 크기 단위 : px, ex, rem 등 단위로 지정 % : 부모 요소의 폰트 크기에 대한 비율 smaller : 상위 요소보다 작은 크기 lager..

기본 선택자 가장 기본적인 선택자로 요소를 호출할 때 사용합니다. 전체 선택자 * HTML문서 내부의 모든 요소를 선택하는 선택자 * { color: skyblue; } 태그 선택자 태그 이름을 선택하는 선택자 노란색 li { background-color: yellow; color: blue; } 클래스 선택자 HTML clss 속성의 값 선택자 빨간색 주황색 .red { background-color: red; } .orange { background-color: orange; } 아이디 선택자 id 속성의 값 선택 초록색 #green_i { background-color: green; } 선택자 우선순위 : 전체 < tag < class < id 빨간색 주황색 클래스 지정 X 하늘색 초록색 li 태..

css : html 태그에 디자인을 넣어주는 언어 선택자 : 태그, id, class 에 스타일 적용 인라인 방식 인라인 방식 각각의 태그마다 적용 시켜야하고 재사용이 불가능합니다. 내장 방식 태그 내부에 사용할 style을 미리 선언하여 태그에 같은 스타일을 적용할 수 있습니다. 다만, 해당 html 에서만 사용할 수 있습니다. 링크 방식 스타일을 하나의 css 파일에 넣고, html 파일에서 css 파일을 링크해서 사용합니다. 재사용과 스타일 변경이 생겨도 무관합니다. @import 방식 css의 @import 규칙으로 css 문서 안에서 또 다른 css 를 가져와 연결하는 방식입니다. @import url(./ex1_import.css); p{ background-color: red; color: ..

🙈 주절주절 테이블 하니까 급식 먹던 시절, 스터디 플래너에 있는 타임 테이블이 기억이 났다. 공부보다 10분 간격에 색만 칠하던 그때가;) 테이블 생성 표를 만들 때 사용하는 태그입니다. 과거에는 테이블을 사용하여 레이아웃을 구성했지만, 기능 상의 한계로 인하여 최근에는 공간 분할 태그인 태그를 사용합니다. 부모 태그로 행을 작성한 후 자식 요소로 칸을 작성해주는 식으로 사용합니다. : 표를 감싸는 태그 : 표 내부의 행 : 표 내부의 제목 칸, 굵은 글씨 : 행 내부의 일반 칸 메뉴 종류 가격 추가 떡볶이 분식 4,000 치즈 추가 가능 고구마 튀김 튀김 3,000 (기본 2개) 새우 튀김 튀김 3,000 (기본 2개) 치킨덮밥 덮밥 4,500 소스 추가 가능 HTML 삽입 미리보기할 수 없는 소스 ..

🙈 들어가기 전 정말 아무것도 모른다는 생각으로 KDT 웹 6기 수업의 회고록 + 공부 기록을 남겨보려고 한다. 매일 하면 좋겠지만,,, "이런 것까지 적어둔다고?" 라는 생각이 들 수도 있기에 깔끔하고 간단한 글이 될 것 같지는 않다 HTML : 뼈대 텍스트, 이미지, 입력창 등 웹에서 보이는 요소(Element)를 정의한다. CSS : 디자인 HTML에서 정의된 요소에 디자인(색, 간격, 크기 등)을 부여한다. JS : 웹의 모든 동작을 처리 버튼을 누르거나 서버와 통신할 때 등의 동작처리한다. HTML 구조 설명 Hello world Hi HTML 문서는 반드시 로 시작하여 문서 형식을 HTML5로 지정해줍니다. 2번 라인부터는 과 사이에 실질적으로 문서에 필요한 정보들이 작성됩니다. 사이에는 태그..

https://www.youtube.com/watch?v=V0A4yiAAQ20&list=PLRx0vPvlEmdD5FLIdwTM4mKBgyjv4no81&index=12 Git Archive : 깃 프로젝트에서 소스코드만 추출하는 명령어 . git 폴더를 제외하고 소스코드만 포함해서 압축 파일로 제공할 때 사용한다. git archive --format==zip master -o Master.zip format 은 형식을 나타내서 zip 으로 지정 그 다음은 브랜치 설정으로 기본 브랜치인 master로 지정 -o 는 output을 의미한다. git archive -l archive 지원하는 포맷 형식이 출력된다.

https://www.youtube.com/watch?v=MFJIOqxK6k8&list=PLRx0vPvlEmdD5FLIdwTM4mKBgyjv4no81&index=11 README.md README 파일은 저장소의 소개글 같은 파일이다. 간단하게 깃허브에서 파일을 추가할 수 있다. Add a README 를 누르면 Edit new file 에 작성된 파일은 preview에서 확인할 수 있다. 내용을 입력 후 커밋하면 된다 . git pull 로 로컬 저장소에도 같은 내용을 저장해 줄 수 있다. README.md 작성법 # : 큰 글씨, #이 많아질수록 글씨 크기가 작아지고 최대 5개까지 사용할 수 있다. ```(백틱문자) 사용 언어 : 소스코드를 넣고 싶다면 백틱문자 3개에 사용하는 언어를 적어준다. 링크..

https://www.youtube.com/watch?v=86VpnJYd6VY&list=PLRx0vPvlEmdD5FLIdwTM4mKBgyjv4no81&index=10 git log 최신 순으로 다양한 커밋정보를 한눈에 볼 수 있는 것이다. enter 로 넘어가고 q 로 나온다. git log --stat : 커밋에 대한 통계 정보 출력, 해당 파일에 추가된 라인 등의 정보 git log --graph : 브랜치와의 병합정보를 보기 좋은 그래프 형태로 출력 git log -p -"라인" : 커밋에 적용된 구체적 항목 출력( 몇 줄 볼지 지정) 위에서부터 3개까지만 볼 수 있다. git log --pretty=("보고싶은 형식") : 커밋 정보를 자신이 지정한 형식으로 출력, ex) git log --pre..