프론트엔드 첫걸음

잘못 커밋한게 있으면 그 잘못커밋한것을 복구할때 git revert [잘못된 커밋의 해시] 그러면 Revert "make a bad commit" 란 커밋메시지가 적히면서 커밋되는데, reset은 내가 커밋한 사항을 아예 없앰으로써 내가 이미 커밋한 코드를 받아 작업하는 동료들의 코드에 혼동을 줄 수 있는데 반해(코드가 꼬일 수 있다) revert는 잘못된 코드를 취소하는 새 커밋을 만드는 것이라 더 안정적이다. +) revert와 reset을 사용할 때 reset은 이전 커밋을 없앨꺼니까 없애고 나서 마지막이 될 커밋의 해시(마지막 성공 커밋 해시)를 적어주고, revert는 '나 이거 잘못한 커밋이야' 하는거니까 잘못 커밋한 해시를 적어준다.

head에 아래와 같은 코드 있어야 모바일에서 작동할 수 있다. 미디어 쿼리는 CSS 파일 제일 아랫쪽에 작성한다! 똑같은 클래스명으로 똑같은 스타일을 재정의하는(덮어씌우는) 것이기 때문에 맨 마지막에 작성해야한다. @media screen and (max-width : 1200px) { .box { font-size : 40px; } } @media screen and (max-width : 1200px) : "현재 브라우저의 폭이 1200px 이하일 경우에 아래 스타일을 적용한다" 라는 뜻

기존의 레거시 코드를 수정할 때 원본파일을 건들면 안되는 경우라면 1. 같은 클래스명 하단에 쓰기 2. 우선순위 높이기 3. specificity 높이기 셋 중 한가지 방법을 택한다. 1. 같은 클래스 명 하단에 쓰기 .box { background : red; } .box { background : blue; } 같은 class 명이라도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용하므로 하단에 같은 클래스명으로 css를 수정한다. 를 하단에 사용할 수록 같은 클래스를 하단에 작성한 것과 똑같은 효과이기 때문에 내가 수정한 css 를 아래쪽에 첨부한다. 2. 우선순위 높이기 tag

부트스트랩 중단점 중단점은 미디어 쿼리의 min-width역할을 한다. 각 중단점 별로 컨테이너 및 열 크기 및 동작을 제어할 수 있다. 예) PC에서는 4열 , 태블릿에서는 2열 ,모바일 1열 되도록 반응형 레이아웃을 짠다면? 안녕 안녕 안녕 안녕 - 반응형 레이아웃이 들어갈 container를 만들어준다. row는 하위 요소들을 12칸으로 쪼개질수 있도록 한다. - 부트스트랩으로 반응형 디자인 만들 때는 모바일 (작은 화면) 부터 만들면 쉽다. 내부 div 박스에 아무런 class 넣지않으면 어떤 사이즈에서나 1열로 보여진다. - 내부 div 박스에 미디어 쿼리를 대신하는 조건식을 넣어준다. col-md-6 : md (768px 이상) 에서는 12칸 중 6칸 차지하게 해라 => 태블릿 화면에서는 2열..

급하게 실무 투입되는 상황이라면 이 강의는 추천하지 않는다. 유투브나 인프런에 무료공개된 깃 강의는 실전에 투입될 수 있도록 중요한 부분만 우선적으로 가르치는 반면 이 강의는 git restore , git switch 등 도 다 꼼꼼하게 가르쳐준다. 하지만 강의를 듣다보면 강사가 많이 준비했다는 것을 알 수 있다. 프로그래밍 강의를 듣다보면 강의에 나온 것 대로 따라한 것 같은데 잘 안될 때가 있다. 내가 집중력이 모자라서 그런건지(정답) 아무튼 그럴때가 종종 있는데, 이 강의는 한번도 그런적이 없었다. 천천히 친절하게 설명해주고, 테스트 할 수 있도록 해준다. 그리고 강의가 지루하다고 느껴지지는 않는다. git HEAD detachment ppt에서 웃음코드를 발견한 내가 이상한가?? 소소하게 재밌다..

[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/html-basics/ 1. 시작 스타일 만들기 이미지만 있는 css 작성 * { box-sizing: border-box; } .shop-bg { background-color: rgb(210, 210, 210); padding: 20px; } .shop-container { display: flex; justify-content: space-around; align-items: center; width: 80%; margin: auto; } .shop-item { width: 33%; max-width: 300px; padding: 20px; } .shop..

css 파일 내에 같은 요소를 두고 여러 줄에 걸쳐서 효과를 주게 되는 때가 있다. 그러면 어떤 것이 우선순위인지, 왜 내가 의도한 결과가 나오지 않았는지 확인해야한다. 이때 크롬디버깅 툴을 사용한다. 내가 확인하고 싶은 요소 우클릭-> 검사 하면 내가 확인하고 싶은 요소의 css 스타일을 확인할 수 있다. 여러 줄에 걸쳐서 적용된 효과가 우측에 우선순위가 높은 순서대로 나타난다. 예)

1. cdn 방식 - html에 아래 link 태그 넣는다 해당 링크 태그 얻는 방법. => font awesome 5 cdnjs 검색하면 맨위에 뜨는 사이트 들어가서 https://cdnjs.com/libraries/font-awesome 링크 복사 클릭 라이브러리 설치가 간편하고, 속도가 빠르다는 장점이 있지만 fontawesome 사이트에 의존하고 있어 불안정하다는 단점있다. 안정적으로 사용하고 싶다면 다운로드 하여 사용한다. 2. 다운로드 방식 https://fontawesome.com/download Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles..

[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/html-basics/ p,h1,h2,h3,h4,span { transform : rotate(o.03deg) } 윈도우에서 굴림, 돋움폰트가 깨질때 웹상의 글자를 살짝 돌리면 폰트가 부드럽게 처리된다.

body { font-family : 'gulim', 'gothic' , 'dotum' } - body에 font-family라는 속성으로 사용할 폰트명을 적는다. - font-family는 상속(inherit)되므로 body에 적용하면 전체에 적용됨 - 사용자의 컴퓨터에 설치된 폰트가 순서대로 보여진다. 위의 경우 사용자의 컴퓨터에 gulim이 없으면 gothic이, gothic이 없으면 dotum이 적용된다) 사용자의 컴퓨터에 없는 폰트를 적용시켜서 보여주고싶으면 CSS파일 최상단에 @font-face 라는 명령어를 넣고, 그 안에 적용할 폰트의 경로와 이름을 적으면 된다. @font-face { font-family: 'nanumGothic'; src: url(../font/NanumGothicLi..