거북이개발자

1. 시맨틱 마크업이란? - HTML5의 가장 큰 특징 중 하나인 시맨틱 태그이다. - 시맨틱은 "의미론적인"이란 뜻을 가진 단어이다. - 간단한 예로 는 non-semantic이다. -, , 은 semantic 태그이다. 2. 시맨틱 마크업 장점 - 접근성이 좋아짐 - SEO에 유리해진다. - 코드 가독성이 좋아진다. - 코드와 데이터의 재상 용성이 높아진다. 3. 자주 사용하는 시맨틱 마크업 - : 페이지에서 머리말 - : 내비게이션 역할을 하는 태그로 보통 에 사용이 많이 된다. - : 주로 콘텐츠 영역을 나타낸다. - : 실질적인 내용이 들어가야 하는 영역으로 사용한다. - : 배너, 사이드바와 같은 영역에 주로 사용된다. - : 외부 문서를 삽입할대 사용된다. - : 주로 안에서 사이트의 제작자..

1. 순서 - : HTML 파싱이 중단되고 즉시 스크립트가 로드되며 로드된 스크립트가 실행되고 파싱이 재개된다. - : HTML 파싱과 병력적으로 로드가 되는데, 스크립트를 실행할 때는 파싱이 중단된다. 구글 애널리틱스와 같이 다른 스크립트가 의존하지 않는 독자적인 스크립트를 로드할 때 적합하다. - : HTML 파싱과 병력적으로 로드가 되는데, 파싱이 끝나고 스크립트를 로드한다. 보통 태그 직전에 를 삽입하는 것과 동작은 같지만 브라우저 호환성에서 다를 수 있으므로 그냥 태그 직전에 삽입하는 것이 좋다.

1. Local Storage setItem("key", "value") getItem("key") removeItem("key") clear() - 단순하고 사용하기 쉬운 key, value 저장소이다. - 기능이 key, value로 한정적이며 string 타입만 지원한다. - 지원 용량이 5mb ~ 10mb 정도이다. - 데이터를 만료기간 없이 계속 저장할 수 있다. 2. Session Storage setItem("key", "value") getItem("key") removeItem("key") clear() - api 사용방법은 local storage와 비슷한다. - 브라우저를 종료하거나, 새 탭을 열면 Session storage는 초기화된다. - 새로고침 시에는 데이터가 유지된다. - ..

1. 과거 웹 페이지 - 과거 웹 페이지는 넷스케이프 내비게이터용과 인터넷 익스플로러용의 두 가지 버전으로 만들어졌다. - W3C가 웹 표준을 만들면서 브라우저가 웹 사이트를 제대로 표현할 수 없게 되자 렌더링을 할 때 표준 모드와 호환 모드로 렌더링을 할 수 있게 옵션을 제공한다. 2. 표준 모드(Standards mode) VS 호환 모드(Quirks mode) - 브라우저는 HTML 문서가 DOCTYPE을 가지고 있지 않으면 호환 모드로 렌더링을 하고, 가지고 있다면 주어진 DOCTYPE에 맞게 표준 모드로 렌더링을 한다. - 호환 모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신 버전의 브라우저에서도 깨지지 않게 하기 때문에 각 브라우저마다 다르게 보일 수 있다. -결론적으로 일반적인 경우 DO..

1. DOCTYPE - DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전에 먼저 선언되어야만 한다. - 이러한 DOCTYPE 선언은 HTML 태그는 아니지만, 선언된 페이지의 HTML버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않습니다. - HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 한다. - DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시한다. - HTML5는 SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요가 없다. 2. DTD (Document Type Definition) - DTD란 문서 형식을 정의해놓은 것으로 DOCTYPE을 명시할 때 사용한다. 즉, ..

1. 목표 목표는 다음 창들을 HTML과 CSS를 이용하여 웹페이지로 만드는게 목표이다. 뿐만아니라 아래의 내비게이션바를 통해서 원하는 창으로 가게 하느것도 목표이다. 2. 결과 3. 소스코드 github.com/RyuJungSik/kokoa-clone-2021 RyuJungSik/kokoa-clone-2021 Kokoa clone 2021. Contribute to RyuJungSik/kokoa-clone-2021 development by creating an account on GitHub. github.com 깃허브에 올려서 확인가능하다. 4. 깨달은 점 자주쓰이는 부분은 하나의 components로 저장해서 이용하면 편하다. position : fixed을 이용하여 위치를 고정시킨후 여러 위치를..

1. 목표 오늘은 로그인 창을 만들어 볼것이다. 목표는 밑의 사진이다. 2. HTML No Service 18:43 100% Welcome to KoKoa Clone if you have a KaKao Account, log in with your email or phone number, Find Kokoa Account or Password 위의 코드가 총 HTML의 코드이다. 자세히보면 크게 3구간으로 나뉜다고 볼 수 있다. 상태바부분, 환영하는 글 부분, 정보입력 및 링크부분 HTML만 적용했을시의 결과물이다. (1) 상태바부분 No Service 18:43 100% 이부분이다. 아이콘이 새로운 부분인데 fontawesome.com/ Font Awesome The world’s most popula..

1. 공부 목표 위와같은 카카오톡의 화면을 HTML과 CSS를 이용하여 웹에다가 똑같이 구현하려고 한다. 물론 데이터베이스와 서버 등을 하지 않기 때문에 실제처럼 작동하지 않겠지만 HTML과 CSS를 이용하여 프론트부분을 만들어 보겠다.