Front-end/100DaysOfCode
-
[100DaysOfCode] 08강Front-end/100DaysOfCode 2022. 7. 22. 19:23
인라인 요소 -> 블록 요소 인라인 요소는 위아래 패딩이나 마진에 제한이 있다 - 마진은 위아래 적용X, - 패딩은 위아래로 늘어난 부분이 공간을 차지X * 비대체 인라인 요소(a태그, img태그)는 수직 마진값을 위아래로 적용할 수 있다 display: inline-block 으로 제한을 풀 수 있다 마진 콜랩싱(여백 겹침) 두 요소 사이에 여백이 있을 때 더 큰 여백이 항상 우세하다 여백 겹침은 (1) 인접 요소, (2) 수직 여백, (3) 블록 요소에서만 발생한다 한 박스 당 margin값이 32px이기 때문에 첫 번째 박스 32px + 두 번째 박스 32px = 64px가 되어야 할 것 같지만, 여백 겹침 현상 때문에 위아래로 32px만 margin값이 적용된다 [과제] 여태까지 배운 내용을 바탕..
-
[100DaysOfCode] 07강Front-end/100DaysOfCode 2022. 7. 20. 23:26
CSS Box Model 크게 padding, border, margin 3가지가 있다 /* 선의 굵기, 선의 유형, 선의 색상 */ border: 1px solid rgb(79, 0, 37); 컨텐츠를 가운데 정렬하는 방법 *text-align은 텍스트를 가운데로 정렬하는 것일 뿐, 다른 요소를 가운데로 정렬할 수 없다. 요소를 가운데 정렬하는 방법: auto (브라우저가 왼쪽과 오른쪽에 같은 크기의 여백을 추가한다) ex) margin: 36px auto 0 auto; padding: 0; HTML Structure 필수는 아니지만 다른 개발자와의 협업 및 코드를 파악할 때 유용하다. Selectors & Combinators Selectors Type elementname ID #id Group e..
-
[100DaysOfCode] 06강Front-end/100DaysOfCode 2022. 7. 19. 12:47
리스트 만들기 순서 목록: ol 비순서 목록: ul 리스트 : li 순서 목록 ol -> 리스트에 번호가 매겨진다 비순서 목록 ul -> 글머리 기호가 매겨진다 => 이러한 요소들은 css로 쉽게 바꿀 수 있기 때문에 태그의 의미를 이해하는 것이 중요하다! 리스트 스타일 Q. css로 ol, li에 각각 똑같은 속성에 다른 속성값을 부여하면 어떻게 될까? A. 속성값은 부모-자식 관계에서 자식이 우선한다. (오버라이드) 상속 관계 상속(Inheritance) CSS의 계단식 상속 로직 (Cascading Style Sheets) 우선순위(Specificity) (Selected) container rules apply to descedants Multiple rules can be applied to t..
-
[100DaysOfCode] 05강Front-end/100DaysOfCode 2022. 7. 19. 11:26
이미지 추가하기 alt는 이미지에 대한 설명으로 웹 접근성을 위해 필요하다(시각적으로 볼 수 없는 사람들 ,...) 두 번째 HTML 파일 추가 Explore the challenge a 태그를 이용해서 웹사이트 링크뿐만 아니라 html 파일에도 링크를 걸 수 있다. img, link 태그 img, link 태그는 닫는 태그를 필요로 하지 않는다! (컨텐츠가 없기 때문) img src link href 공유 css 파일 공통되는 css 속성은 공유 css 파일로 묶어서 간편하게 처리할 수 있다. 폴더에 소스 파일 정리 폴더를 이용해서 소스 파일을 정리할 경우 코드를 작성할 때 폴더명/파일이름.확장명과 같이 작성한다.
-
[100DaysOfCode] 04강Front-end/100DaysOfCode 2022. 7. 16. 20:02
Pseudo element hover: 마우스를 올렸을 때 동작하는 속성 **a태그로 링크를 삽입했을 때 기본 속성(밑줄 등)이 어떤 게 적용된 것인지 확인하는 방법 : 크롬 - 개발자 도구 - Elements - style에 user agent stylesheet 영역을 확인하면 된다. a { color: fff; text-decoration: none; } a:hover { text-decoration: underline; } 외부 파일에 css 저장하기 1. link와 같은 태그는 void element이다 (닫는 태그가 없음, 마지막에 '/'만 써도 되고 안 써도 된다) 2. 개발자는 .css 확장자를 보고 css 파일임을 알 수 있지만 컴퓨터는 알 수 없기 때문에 rel="stylesheet"와..
-
[100DaysOfCode] 01 - 03강Front-end/100DaysOfCode 2022. 7. 16. 16:49
참고하기 좋은 사이트 MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org HTML Element Hello World! Tag Content element들은 브라우저에게 어떤 컨텐츠(버튼, 이미지, 텍스트,...)를 보여줄 것인지 알려준다 응용 프로그램 코드를 예쁘게 작성할 수 있도록 도와주는 프로그램이다. 코드는 내 맘대로 줄바꿈을 할 수 없다 자동으로 줄바꿈을 해주는 기능은 [코드]- [기본 설정] - [바로 가기] - [Forma..
-
[100DaysOfCode] 100일 웹개발 챌린지 시작Front-end/100DaysOfCode 2022. 7. 16. 16:27
The Web Developer 부트캠프 2022 2022.07.16 ~ START 이 강의를 선택한 이유 - 2년 전 html, css, 간단한 자바스크립트까지 개인적으로 공부했었는데 점점 기억이 가물가물해짐 - 단순히 html, css, javascript를 배우고 끝나는 것이 아니라 웹 배포까지 한번에 배울 수 있는 커리큘럼 - 강사가 원어민이지만 알아듣고 공부하는데 무리가 없음 강의 커리큘럼 내가 이제 막 코딩에 관심을 갖고 난 개발자가 될 거야! 라고 말하고 다니던 시절, 같이 팀플하던 언니가 "Node JS가 뭔지 알아요?"라고 물어봤을 때 "그게 뭐예요?"라고 답했던 기억이 난다. 이번 방학 기간 때 프론트엔드+백엔드까지 배워볼 수 있는 좋은 찬스라고 생각한다. 앞으로의 계획 하루에 최소 2..