좌충우돌 개발자의 길

- justify-content: center 가 적용이 되지 않을 때 자식요소에 flex를 설정해야지 자식 요소에서 justify-content:center가 적용이 됨 부모요소에서 먼저 flex를 설정하면 적용되지 않음 - align-items: center 가 적용되지 않을 때 해당 요소의 height를 설정하지 않으면 적용되지 않음 -> height를 설정해 줄 것

1. 미디어 쿼리 @media mediaqueries { /* style rules */ } /* @media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻 그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries) 이 나오고 이어서 중괄호( { } )를 이용해서 스타일 규칙이 들어감.*/ - 미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 구성 미디어 타입 : all, print, screen 미디어 특성 : width는 뷰포트의 너비, 즉 브라우저 창의 너비.(스크린의 크기 x) // orientation은 미디어가 세로모드인지 가로모드인지를 구분 2. syntax media_query_list : S* [media_que..

1. display와 box model의 관계 display width height margin padding border block ㅇ ㅇ ㅇ ㅇ ㅇ inline X X 좌/우 ㅇ(설명) ㅇ(설명) inline-block ㅇ ㅇ ㅇ ㅇ ㅇ - inline : margin은 좌우만 되고 상하는 안됨 - inline-block : 배치는 inline 방식(ex/ 한칸 띄기로 공백 인정, 개행 인정, 한 줄에 배치,,,)이고 박스 모델 속성은 block 처럼 다 가능함 - inline 과 block의 차이점 - inline : 자식에 적용한 box model 속성이 부모에게도 똑같이 적용 X - block : 자식에 적용한 box model 속성이 부모에게도 똑같이 적용 O 2. display:none과 v..

1. 타이포그래피의 구조 •em 폰트의 전체 높이 •ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이 •Baseline 소문자 x를 기준으로 하단의 라인 •Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y ) •Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l ) 2. generic-family family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줌. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는..

1. 절대 vs 상대 길이 절대 길이 절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않음 px ( 1px = 1/96th of 1 inch ) 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적임. 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장 상대 길이 상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변함 % : 부모의 값에 대해서 백분율로 환산한 크기 em : font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합 rem : roo..

1. id와 class 선택자의 차이점 문서 내에 유일한 요소에 사용 구체성 가장 큰 차이점 : class와 달리 id는 문서 내에서 유일해야 함 클래스 선택자 : 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있었습니다. id 속성값 : 문서 내에 유일하게 사용이 되어야함. 결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐임. 2. 선택자의 조합 /* 요소와 class의 조합 : 이면서 class 속성에 bar가 있어야 적용*/ p.bar { ... } /* 다중 class class 속성에 foo와 bar가 모두 있어야 적용*/ .foo.bar { ... } /* id와 class의 조합 id가 foo이며 class가 bar인 요소에 적용*/ #foo.bar { ... } 3...

1. 빈 태그 보통은 시작태그와 종료태그가 1쌍으로 있지만 없는 경우를 빈 태그라고 한다. 빈 태그의 예시는 다음과 같다. 2. 공백 HTML은 두칸 이상의 공백을 모두 무시한다 ex) hi, hello! ==> 출력 : hi, hello 3. 웹사이트에는 어떤 태그들이 많이 쓰일까 통계 재밌어서 첨부! https://www.advancedwebranking.com/seo/html-study/#overview HTML Study Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword..

깃허브 프로필 예시들 https://github.com/abhisheknaiidu/awesome-github-profile-readme GitHub - abhisheknaiidu/awesome-github-profile-readme: 😎 A curated list of awesome GitHub Profile READMEs 📝 😎 A curated list of awesome GitHub Profile READMEs 📝 - GitHub - abhisheknaiidu/awesome-github-profile-readme: 😎 A curated list of awesome GitHub Profile READMEs 📝 github.com 깃허브 이모지 github markdown emoji markup 리스트..

1. Git 기본 설정 기본적인 설정을 해보자 #깃에 대한 모든 환경설정을 알아볼 수 있음 git config #깃에 대한 모든 설정들을 알아볼 수 있음 git config --list #파일로 열어보고 싶을 때 git config --global -e # vscode로 열어서 확인하고 싶을 때 code . # code를 에디터와 연동해서 쓰기 git config --global core.editor "code" //열어진 파일이 종료되기 이전에도 다른 명령어 쓸 수 있음 git config --global -e # code를 에디터와 연동해서 쓰기2 git config --global core.editor "code --wait" //열어진 파일이 종료되기 이전에는 다른 명령어 못 쓰게 막음 git c..

🎉기본미션 - Ch.07-1 문제풀고 인증샷🎉 🎉추가미션 - Ch.07-2 문제풀고 인증샷🎉