미미 공부/취미방

1주차.Chapter 06 01 CSS 기본 문법 HTML 요소를 찾아서 스타일을 주는 CSS. CSS 문법 선택자 { 속성: 값; 속성: 값; 속성: 값; } 선택자 : 스타일을 적용할 대상 속성 : 스타일의 종류 값 : 스타일 종류의 값 중괄호 안에 있는 속성들이 선택자에 적용됩니다. *콜론(:)과 세미콜론(;) 중요! 02 CSS 선언 방식 css 스타일을 적을 수 있는 방법이 4가지(내부(내장) 스타일, 인라인 스타일, 외부(링크) 스타일, @import 스타일) 있는데, 내부(내장) 스타일 : HTML내부에 들어있는 스타일 장점. 별도 CSS 파일 만들지 않아도 된다. 단점. HTML 문서가 복잡해질 수 있다. / 유지보수가 어렵다. 인라인 스타일 : HTML 요소에 직접 작성 (선택자 필요 없..

1주차.Chapter 05 01 자주 사용하는 태그와 특징 div (division) 블록요소, 특별한 의미가 없는 구분을 위한 요소, 아주 많이 사용 h1 블록요소, 제목을 의미, 목차, 1 ~ 6까지 존재, 숫자가 작을수록 더 중요 p (paragraph) 블록요소, 문장을 의미 img 인라인요소, 이미지를 삽입하는 요소. src와 alt 속성 입력 필수 (alt : 대체 텍스트. 사진이 제대로 나오지 않을 때, 사진 대신 나타나는 텍스트) ul / li (unordered list) 블록요소, 순서가 필요없는 목록, ul 내부 li 필수세트. a (Anchor) 인라인요소, 링크 지정. href 속성에 링크값이 들어간다. (예.Daum) span 인라인요소, 특별한 의미가 없는 구분을 위한 요소, ..

1주차.Chapter 04 01 codepen 이번 강의에서는 codepen.io이라는 텍스트 에디터를 설치하지 않고, 인터넷만 있으면 어디서든 코딩을 연습할 수 있는 사이트를 알려주셨어요! 사이트에 들어가서 Start Coding을 누르면 해당 화면이 나옵니다. 설정(Settings)에서는 HTML, CSS, JS에 대해 설정을 변경할 수 있어요. CSS 기본 브라우저 스타일 초기화, JS Barbel 실행 등 나중에 배우게 되면 필요한 것들이 있습니다. 설정 옆에 기호로 사이트 레이이아웃 변경이 가능하고, console도 있어서 에러, JS console.log도 확인이 가능합니다! *href로 사이트 이동은 불가능하니 참고하세요~ 02 CSS 스타일 초기화 위에서 언급한 브라우저 CSS 스타일 초기..

1주차.Chapter 03에서는 다루는 내용이 꾀나 많아서, 각 강의에서 설명해 주신걸 각각 묶어서 내용 정리를 하려고 해요. 설명 내용은 크게 2가지로 HTML과 브라우저에서 사용하는 개발자 도구입니다. 01 HTML을 살펴보기 위해서, 1. 'test'(소문자로)라는 이름으로 폴더를 만든다. 2. ‘test’ 폴더 안에 index.html 파일을 만든다. (VS Code에서 ctrl + n을 눌러서 새 파일 생성 > 저장 ctrl+s > 이름을 index.html) (index라고 파일 명을 지정하는 이유 : 폴더의 대표 html로 브라우저가 해당 파일을 불러와요.) 3. 내용이 없는 상태에서 ! > tab (기본 HTML구조를 만들어줘요.) 여기서 은 문서..

1주차.Chapter 02에서는 VS Code(Visual Studio Code : 코드를 적기 위해 편리하게 만들어진 프로그램)라는 텍스트 에디터 사용법에 대해 설명해 주셨요. Atom, Notepad++, Brackets 등 여러가지 종류가 있지만 VS Code를 가장 많이 사용하는 것 같더라구요. 패캠에서도 VS Code로 수업을 진행하기 위해 간단한 사용법에 대해 설명을 해 주셨습니다. 검색창에 Visual Studio Code를 검색하면, 이렇게 생긴 프로그램을 다운받으시면 됩니다. 다운 받으면 이렇게 생겼고, 1번은 액티비티 바(Activity Bar), 2번은 사이드 바(Side Bar)라고 부른데요. 혹시 폰트가 너무 작거나 크면 ctrl + +/- 키로 크기 조절이 가능합니다. 프로젝트를..

Chapter 01에서는 코딩을 시작 하기 전, 기본적으로 알아야 하는 내용을 중요한 것들 위주로 짧고 자세히 설명해 주셨어요. 공부하다 보면 용어 같은게 어려워서 간혹 이해하기 어려울 수 있는데, 쉽게 설명해 주셔서 내용이 쏙쏙 들어와요. 그 이후로는 암기랑 경험이 필요...😅 프론트엔드 개발(Front End Development)은, 보여지는 페이지를 만드는 작업으로 HTML, CSS, JS를 사용합니다. HTML(Hyper Text Markup Language)은 웹의 구조 담당 CSS(Cascading Style Sheet)는 웹의 구조를 꾸미는 담당 JS(Javascript)는 페이지를 움직이게 동적인 작업 담당이에요. 집으로 묘사를 하면, HTML로 집 틀을 만들고, CSS로 인테리어 디자인..