10월 22일 - 노마드코더 코코아톡 #1

10월 22일 - 노마드코더 코코아톡 #1

노마드코더 - 코코아톡 클론코딩 시작!!!!

<이론 설명!!!!>

브라우저는 인간들이 쓰는 언어를 이해못한다 .( 멍청함 )

우리가 해야할일은 브라우저에게 콘텐츠가 무엇인지 알려줘야한다 .

HTML ( 뼈대 )

: 마크업 언어

: 브라우저에게 웹사이트의 content가 무엇인지 , 어떻게 구성되어있는지 설명할때 사용

Html 은 오류가 없다

컨텐트가 무엇인지에 대해서 알려주는것

CSS ( 근육 )

: 디자인과 스타일을 위한 언어

: 브라우저에게 웹사이트가 어떻게 보여야하는지에 대해 알려줌

콘텐트들이 어떻게 보일까

자바스크립트 ( 뇌 )

: 웹사이트를 동적으로 만들어주는 프로그래밍 언어

!!!!!! 실습!!!!!!

!!!!!! 일단 영상에서 알려준대로 따라가기!!!!!!

폴더명은 항상 소문자 !! 파일명도 항상 소문자 !!

< 확장 프로그램 >

Community Material Theme : 화면 배경

Material Icon theme : 보이는 아이콘

태그 ( tag )

Html 은 오류가 없으나 브라우저나 이해하는 실제 태그를 넣으면 작동이 된다 .

제대로 된 위치에 넣고 , 이 tag 를 기억하면 브라우저는 지정한 태그에 맞춰 변경되어 보여준다 .

리스트

Ul : unordered list ( 순서가 없는 )

Ol : ordered List ( 순서가 있는 )

확장 프로그램 : prettier

: 태그 실수 및 라인이 안맞는것을 자동으로 수정해주는 확장 프로그램

태그의 속성 ( attributes)

: 태그에 추가하는 부가적인 정보

: img 태그는 따로 닫는 태그가 없다 . 그 자체가 self-closing tag (자체 닫기 태그)

ex) a 태그를 사용할때는 href 라는 속성을 붙여주어 화면이동을 할수 있게 도와준다

ex) img 는 인터넷에 올려져있는 이미지 또는 로컬 이미지를 사용할 수 있다.

: 경로를 지정해주어야 한다.

링크를 만들기 위한 속성 : href , target

이미지 속성 : src

Html 을 구성하는 형태

: 첫번째는 무조건

- 브라우저에게 text 파일이 아니라 html 문서라고 알려주는 것

: 웹사이트의 구조는 두개의 파트로 구성

웹사이트의 환경설정을 해주는 곳

외부적으로 보여지지 않는 설정을 해줌

이 태그에 속해있는 모든 태그들은 화면에선 안보인다 .

사용자가 볼 수 있는 content 를 보여줌

브라우저 화면상에 보여질 내용들은 전부 바디태그안에 있어야함 .

from http://mini1122.tistory.com/22 by ccl(A) rewrite - 2021-10-22 23:27:31