etc.../패스트캠퍼스 챌린지

패스트캠퍼스 챌린지 9일차 - Part1. Ch7

이번에는 스타일 상속에 대해 알아보자. 예를 들어 사진과 같은 코드가 있을때, 호랑이, 사자, 코끼리의 부모 요소로 animal 클래스를 가진 div 요소를 확인할 수 있다. .animal 선택자에 스타일을 주면 동물 부터 호랑이, 사자, 코끼리 까지의 코드에 모두 스타일이 적용된다. animal 클래스에 css를 적용했을 때 자식 요소, 나아가 하위 요소들에 영향을 미치는 것을 스타일 상속 이라고 한다. 즉 부모 요소 혹은 조상 요소로부터 적용된 스타일이 자식이나 하위 요소로 상속되어 적용되는 것을 css의 스타일 상속 이라고 한다. 모든 요소가 상속 되는 것은 아니고 글자/문자 관련 속성들이 상속된다. 물론 여기에도 예외는 있음! 실질적으로 상속되지 않는 css 내용도 강제적으로 상속시킬 수 있는 강..

패스트캠퍼스 챌린지 8일차 - Part1. Ch7

Ch7. CSS 개요 CSS는 HTML의 기본 구조를 보기 좋게 꾸며주는 역할을 한다. 이제 CSS에 대해 알아보자! 선택자 { 속성: 값; } CSS에서 중괄호 영역 앞쪽에 작성하는 부분을 HTML의 특정한 부분을 선택한다는 의미에서 선택자라고 부른다. 사진 속 해당 예제에서 div 부분이라고 볼 수 있다. HTML에서 선택자에 해당하는 부분에 중괄호 영억의 속성과 값들이 적용된다. 주석을 작성하고 싶을 때는 /* */ 와 같이 작성하면 된다. (단축키 : Ctrl + /) CSS의 선언 방식에는 크게 4가지가 있다. 1. 내장 방식 의 내용으로 스타일을 작성하는 방식으로 HTML의 HEAD 요소에 작성한다. 별도의 CSS 파일이 필요 없다는 장점이 있지만 유지보수 측면에서 단점이 많다. 즉 권장하지 ..

패스트캠퍼스 챌린지 7일차 - Part1. Ch6

Ch6. HTML 핵심 정리 HTML에서 자주 사용하는 핵심 요소들을 알아보자. : 블록 요소. 특별한 의미가 없는 구분을 위한 요소 ~ : 블록 요소. 제목을 의미하는 요소. 숫자가 작을수록 더 중요한 제목을 정의. : 블록 요소. 문장을 의미하는 요소. : 블록 요소. 순서가 필요없는 목록의 집합을 의미. (Unordered List) : 블록 요소. 목록(list) 내 각 항목(item) : 인라인 요소. 이미지를 삽입하는 요소. : 인라인 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. : 인라인 요소. 특별한 의미가 없는 구분을 위한 요소. : 인라인 요소. 줄바꿈 요소. : 인라인 요소&블록 요소. 사용자가 데이터를 입력하는 요소. 왼쪽에서 오른쪽으로 수평으로 쌓이는 특징을 가..

패스트캠퍼스 챌린지 6일차 - Part1. Ch5

HTML의 기본 문법에 대해 알아보겠다. 이제껏 작성해온 것 처럼 HTML은 내용 와 같은 구조로 작성했다. 이렇게 태그와 내용을 포함해서 요소(Element)라고 부른다. 종료 태그가 시작 태그와 다른 점은 / 가 붙는다는 점이다. 내용 와 같이 태그 안에 태그가 있는 형태는 부모와 자식 관계라고 볼 수 있다. 이렇게 한 줄로 쭉 이어 적으면 부모와 자식의 범위를 알아보기 힘드므로 자식요소들을 줄바꿈과 들여쓰기를 이용해 알아보기 쉽게 작성하도록 하자. 참고로 상위(조상) 요소는 부모 요소를 포함한, 나를 감싸고 있는 모든 요소를 지칭하는 용어이며 하위(후손) 요소는 자식 요소를 포함한, 내가 감싸고 있는 모든 요소들을 지칭하는 용어이다. 우리가 그동안 써왔던 index.html 파일을 보면 meta, ..

패스트캠퍼스 챌린지 5일차 - Part1. Ch4

Ch4. 웹에서 시작하기 기존에 작업하던 프로젝트에서 내용을 훼손하지 않고 새로운 내용을 테스트하고 싶은 경우, 새로운 폴더와 파일을 생성하고 내용을 구성하는 방법이 있다. 그렇지만 이 경우 프로젝트의 처음 구성부터 새로 시작해야 하는 단점이 있다. 단순한 코드를 테스트 하기 위해서는 적합하지 않은 방법이다. 이럴 때 아주 빠르게 코드를 실행하고 확인 해 볼 수 있는 codepen.io 사이트가 있다. 프론트엔드를 작업할 경우 유용하게 사용할 수 있다. 해당 사이트 접속 후 start coding 버튼을 누르면 HTML, CSS, JS 3가지 패널로 구성되어있는걸 볼 수 있다. HTML 패널에서 작성하는 부분은 VS Code에서 body 부분에 작성하는 것과 같다고 생각하면 된다. DOCTYPE과 같은 ..

패스트캠퍼스 챌린지 4일차 - Part1. Ch3

Ch3. 무작정 시작하기 이번에는 화면에 이미지를 출력해보겠다. 참고로 파일들을 관리할 땐 css, js, images 폴더 등으로 분류해서 작업하면 편하다. 이 때 index.html은 최상위 경로(Root Path)에 존재해야한다. img 태그를 넣은 후 src에 이미지의 주소, alt 에는 대체 텍스트 즉 이미지가 출력되지 못하는 경우 대신 출력할 텍스트를 넣어준다. 링크를 넣고 싶을 땐 a 태그를 이용한다. href에 링크의 주소를 적고, 태그 사이에 내용을 넣어주면 해당 내용을 클릭했을 때 링크로 넘어가게 된다. href에 파일이 아니라 폴더 경로만 적으면 해당 폴더에서 자동으로 index.html 파일을 찾아 해당 내용을 출력해준다. 다음으로 개발자 도구에 대해 간단한 사용법을 알아보겠다. 브..