마크투비의 고 GO

강의자료: 한 눈에 보는 HTML 요소 총정리 https://heropy.blog/2019/05/26/html-elements/ 강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/ 1. HTML의 전역 속성 - 모든 HTML 요소에서 공통적으로 사용 가능한 속성 ▪ class - 공백으로 구분된 요소의 별칭을 지정 - CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근 - 별명을 설정 - class는 중복이 가능함 ▪ id - 문서에서 고유한 식별자(idenifier, ID)를 정의 - CSS 혹은 Ja..

강의자료: 한 눈에 보는 HTML 요소 총정리 https://heropy.blog/2019/05/26/html-elements/ 강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/ 1. 표 콘텐츠 ▪ , , , - 데이터 표()의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성 - Table Row, Table Header, Table Data ▪ - ‘머리글 칸’을 지정 속성 의미 값 기본값 abbr 열에 대한 간단한 설명 headers 관련된(종속된) 하나 이상의 다른 머리글 칸 id 속성 값 colspan 병합하려는 열의 수 1 rowspan 병합하려는 행의 수 1 scope 자신이 누구의 ‘머리글 칸’인지 명..

강의자료: 한 눈에 보는 HTML 요소 총정리 https://heropy.blog/2019/05/26/html-elements/ 강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/ 1. 멀티미디어 ▪ - 이미지를 삽입 - img 요소의 srcset과 sizes 속성 - 이미지를 사이즈별로 2장 이상 사용할 떄 srcset 속성을 이용 - srcset에서 이미지의 크기로 px이 아닌 w(가로 너비의 원본 크기를 설정) 단위 혹은 x 단위를 입력해야 하며, 작은 크기 이미지부터 순서대로 입력 - x 단위보다는 w 단위를 사용하는 것을 추천 - width ~> 일반 출력, sizes ~> 최적화 출력 📌width는 이미지의 ‘출력..

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS 강의자료: 한 눈에 보는 HTML 요소 총정리 강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/ 1. 인라인 텍스트 태그 ◽️ - Anchor, 외부로 내보내기 - 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정 - 같은 페이지 내에서 위치를 이동하려면 href="#(id값)"을 추가 속성 의미 값 href(생략 가능하긴 함) 링크 URL URL rel 현재 문서와 링크 URL의 관계 license, prev, next… target 링크 URL의 표시(브라..

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS 강의자료: 한 눈에 보는 HTML 요소 총정리 강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/ 1. BODY 태그/ 콘텐츠 구분 ◽️ 메뉴1 메뉴2 메뉴3 Section Article1 Contents... Article2 Contents... Article3 Contents... Aside koomijin@gmail.com 010-1234-5678 header{ background: turquoise; margin: 10px; padding: 10px; } header nav { } header nav ul{ display: flex; }..

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS 강의자료: 한 눈에 보는 HTML 요소 총정리 강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/ 1. 블록요소와 인라인 요소 ◾️ 블록 요소 - DIV, H1, P 태그 - 사용 가능한 최대 가로 너비를 사용한다. - 크기를 지정할 수 있다. - 기본설정: width: 100%; height:0; 에서 시작 - 수직으로 쌓임 - margin, padding 위, 아래, 좌, 우 사용 가능 - 레이아웃을 위한 용도로 사용 ◾️ 인라인 요소 - SPAN, IMG 태그 - 필요한 만큼의 가로 너비만 사용한다. - 크기를 지정할 수 없다. - 기본설..

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS 강의자료: https://heropy.blog/2019/04/24/html-css-starter/ 강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/ 1. CSS 문법 ◾️ 선택자 - HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign) - 선택자 div. 태그를 선택하겠다! div { font-size: 20px; color: red; } /* 다음과 같이 이해할 수 있습니다. */ 선택자 { 속성: 값; 속성: 값; } HTML 제목.. 본문.. CSS h1 { color: red; } p { colo..

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS 강의자료: https://heropy.blog/2019/04/24/html-css-starter/ 강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/ 1. HTML 문법 ◾️ 기본 형태 - 태그는 각자의 의미를 가지고 있고 다음과 같은 형태를 가짐 - 태그는 열리고 닫히는 구조를 가지고 있고 이는 한 쌍임(시작하고start 종료되는end 구조라고 하기도 함) - 시작하는 태그부터 종료되는 태그까지의 한 세트를 요소라고 함 CONTENT # 이를 하나의 요소라고 함 토끼와 거북이 # 제목1~6 옛날 옛적에 토끼와 거북이가 살았습니다... # 문단..

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS 강의자료: https://heropy.blog/2019/04/24/html-css-starter/ 강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/ 1. HTML, CSS 그리고 JS ◾️ HTML(Hyper Text Markup Language) - 웹의 뼈대를 담당하는 역할 - 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어 ◾️ CSS(Cascading Style Sheets) - 화면을 예쁘게 꾸미는 역할로 웹의 시각적인 표현을 담당 - 마크업 언어(HTML, XML 등)가 실제 표시되는..