나다이_꾸준히걷기

CSS 개요: 기본 문법, 주석 선택자{속성: 값;} 선택자 : 스타일(CSS)을 적용할 대상(Selector) 속성 : 스타일(CSS)의 종류(Property) 값 : 스타일(CSS)의 값(Value) --> 선택자 속성은 값이다. 선택자{속성: 값; 속성: 값;} 중괄호: 스타일 범위의 시작과 끝 ex) div { color: red;} : 태그 선택자 속성컬러는 레드이다. div { color: red; margin: 20px; } : 태그 선택자 속성컬러는 레드이고, 여백은 20px 이다. 구분을 위해 들여쓰기를 이용한다 div{ color: red; margin: 20px; } 주석 /* 설명 작성 */ div{ color: red; margin: 20px; }

HTML 전역 속성 title 속성 : : 요소의 정보나 설명을 지정 style 속성 : : 요소에 적용할 스타일(CSS)을 지정 class 속성 : : 요소를 지칭하는 중복 가능한 이름 id 속성 : : 요소를 지칭하는 고유한 이름 data 속성 : : 요소에 데이터를 지정 : HTML에 저장한 데이터를 js를 이용해 출력한다. (html에서의 이름형식 fruit-name은 js에서는 fruitName 으로 해야 인식된다.) : defer속성이 없으면 화면출력이 html문서를 다 읽지 않은 상태일 수 있음

HTML 주석 그렇다면 화면에 출력되지 않도록 하려면 어떻게 해야할까? 주석을 사용한다 : : 수정사항이나 설명 등을 작성(주석) : 브라우저는 이 태그를 해석하지 않기 때문에 화면에 내용이 표시되지 않음 : Ctrl + / 혹은 Cmd + /

HTML 기본 문법 요소(Element) : 내용 : 시작태그, 요소의내용(Contents), 종료태그 ex)Hello~~ HTML 부모와 자식 관계의 이해 : 부모 요소 내용 : 자식 요소 : 부모 요소 : 들여쓰기를 통해 자식요소와 부모요소의 구분을 시각적으로 정리 들여쓰기(Indent) : Tab 내어쓰기(Outdent) : Shift + Tab 내용 : 상위(조상) 요소란 기준을 제외한 기준을 감싸고 있는 모든 요소들(바로 윗단계인 부모 요소 부터) : 하위(후손) 요소란 기준을 제외한 기준 내부에 있는 모든 요소들(바로 아랫단계인 자식 요소 부터) 빈태그 Empty태그 ex) : 편리함! HTML 1/2/3/4/5 or : 안전함! XHTML / HTML5 :되도록 슬래쉬를 붙이도록 연습하기~ ..

브라우저 스타일 초기화 reset.css cdn 다음과 같이 css 파일을 적용한 후 그런데 내가 설정하지 않은 margin이 들어가있다? 브라우저마다 다른 설정값을 가지고 있을수 있고, 이는 사용자가 보기에도, 브라우저마다 개발 의도와는 다른 화면을 보여주게 될 수도 있다. 크로스브라우징 이슈 방지를 위해 브라우저 스타일 초기화 하는 방법을 살펴보자. reset.css cdn 검색 : 브라우저의 스타일을 초기화하는 css 위처럼 검색해서 reset.css min의 html양식 주소를 복사하여 index.html의 head태그 내부에 추가해준다. 적용되면 다음과 같이 기본적으로 적용된 margin이 사라진 것을 확인할 수 있다. 그렇다면 codepen.io에서는 이를 어떻게 적용할까? css 설정부분에서..

화면에 이미지 출력 태그 src: 표시 할 이미지의 경로 alt: (Alternate) 이미지 출력 안될 경우의 대체 텍스트 로고 출처: 패스트 캠퍼스 온라인강의 프론트엔드 개발 초격차 패키지 & https://heropy.blog/ HEROPY 웹디자인과 웹개발 기술을 공유하는 HEROPY 온라인 블로그입니다. 오프라인 지식 공유도 매회 진행합니다. 감사합니다. heropy.blog 웹상의 경로를 이용하여도 다음과 같이 이미지 출력이 가능함

정보를 의미하는 태그들 태그 : 스타일(CSS)를 HTML 문서 안에서 작성하는 경우에 사용 다음과 같은 결과를 얻을 수 있다. 태그 : HTML 문서의 제목(title)을 정의 브라우저의 메인 제목 표시줄에 다음과 같이 표기된다. 태그 : 외부 문서를 가져와 연결할 떄 사용.(대부분 CSS 파일) rel: 가져올 문서와 관계 (필수속성) href: 가져올 문서의 경로 태그 : 자바스크립트(JS) 파일 가져오는 경우 console.log('Hello MAKZUIN!!') : 자바스크립트(JS)를 HTML 문서 안에서 작성하는 경우 태그 : HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브러우저에 제공한다. initial-scale=1.0 : 기본 크기는 1.0 배수로 ..

CSS, JS 연결 : ~.html 이라는 파일이 어떤 내용을 가져와서 사용할 것인지 또한 정보이다. : 그렇다면? 정보는 태그 안에 명시된다. 태그 : link태그가 head 태그 안에 작성되어 main.css의 내용을 index.html이 사용한다 태그 : script태그가 head 태그 안에 작성되어 main.js의 내용을 index.html이 사용한다. : 지금과 같은 경우엔 크롬브라우저에서 F12를 누르면 나오는 개발자도구의 Console 창에서 'MAKZUIN!' 글자를 확인 가능하다. lang(language) : 지정할 문서의 언어(ISO 639-1)를 명시하는 HTML속성 : 지정 가능한 언어목록 링크 https://ko.wikipedia.org/wiki/ISO_639-1_코드_목록 IS..