odada

퍼블리싱(Publishing) HTML과 CSS를 사용하여 디자인된 웹사이트의 구조와 스타일을 구현하는 과정 HTML5와 CSS3를 공부해면 무엇을 할 수 있을까? 웹 사이트를 만들 수 있다. 최신 웹 표준에 맞는 웹 사이트 제작 (반응형 디자인) 가능하다. HTML5의 API를 사용해 ‘웹앱’을 만들 수도 있다. 카페24, 고도몰, 워드프레스, 그누보드 등을 사용해 웹 사이트, 블로그 소스를 이해할 수 있고 사이트를 원하는 모습으로 바꿀 수 있다. HTML 웹 페이지의 구조를 정의하는 언어 https://www.w3schools.com/html/default.asp 웹 페이지의 기본적인 뼈대를 만들며, 텍스트, 이미지, 링크 등의 콘텐츠를 웹에서 어떻게 표시할지 정의합니다. 태그(tag) 기반으로 되어..

이미지와 하이퍼링크 이미지 https://www.w3schools.com/html/html_images.asp 이미지를 삽입하는 태그는 태그이다. 이미지 경로 이미지 경로는 이미지가 저장된 위치를 의미한다. 절대 경로 절대 경로는 이미지가 저장된 위치를 표시하는 경로이다. 절대 경로는 http:// 또는 https://로 시작한다. 상대 경로 상대 경로는 현재 파일이 저장된 위치를 기준으로 이미지가 저장된 위치를 표시하는 경로이다. 하위 폴더 경로 ./는 현재 파일이 저장된 위치를 의미한다. 폴더 구조 root ├── index.html ├── banner1.jpg └── images └── banner2.jpg └── main └── banner3.jpg 상위 폴더 경로 ../는 현재 파일이 저장된 위..

텍스트 관련 태그 Headings https://www.w3schools.com/html/html_headings.asp 제목을 나타내는 태그 크기 : h1 > h2 > h3 > h4 > h5 > h6 제목1 제목2 제목3 제목4 제목5 제목6 Paragraphs (단락) https://www.w3schools.com/html/html_paragraphs.asp - block 태그 태그 문단을 나타내는 태그 문단입니다. 태그 줄바꿈을 나타내는 태그로 단일 태그 문단입니다. 문단입니다. 태그 인용문을 나타내는 태그로 다른 텍스트보다 들여쓰기가 되어있음 인용문입니다. 태그 수평선을 나타내는 태그로 단일 태그 태그 소스에 작성한 그대로 표현하는 태그 미리 서식을 지정한 텍스트입니다. 미리 서식을 지정한 텍스트..

html 시작하기 네이버 서치어드바이저 : https://searchadvisor.naver.com/guide/markup-content html 기본 구조 HTML 기본 구조 HTML 기본 구조를 알아봅시다. head 태그 - 검색 엔진 최적화, 페이지 정보 문자 인코딩 meta charset="utf-8" 한글을 사용하기 위해서는 반드시 필요한 설정 utf-8은 한글 외에도 다양한 언어를 지원하는 문자 인코딩 방식 title 태그 - 문서의 제목 사이트 메인 페이지의 title 태그는 사이트의 성격을 잘 표현할 수 있는 브랜드명으로 기입해야 한다. 페이지 제목 작성 TIP 사이트 메인 페이지의 title 태그는 사이트의 성격을 잘 표현할 수 있는 브랜드명으로 기입해야 합니다. 사이트의 개설 목적에 맞..

체크리스트 웹표준 -- -- 해당서비스의 Doctype을 따르고 있는가? html5 Doctype (필수) HTML validator 통과했는가? (필수) CSS validator 통과했는가? (필수) Cross Browsing 되는가? Web(Window) FF/Chrome/Safari/Opera (최신) Web(Mac) FF/Chrome/Safari/Opera (최신) Mobile(Android) Android 14 (현재 버전) Android 13 Android 12 Android 11 Android 10 (2021년 기준 점유율 1위) Mobile(iOS) iOS 15(현재 버전) iOS 14 (2021년 기준 점유율 1위) 웹접근성 -- (필수) title 태그에 서브페이지 제목을 제공하였는가?..

폴더 경로 css outline (전체 레이아웃) goods (상품) board (게시판) event (이벤트) member (회원) mypage (마이 페이지) order (주문) popup (팝업창 페이지) proc (기타 페이지) service (고객 서비스)

list https://eehd80.github.io/-setting/!list.html main https://eehd80.github.io/-setting/ Setting 프로젝트 시작시 사용할 수 있는 setting 파일입니다. main(master) 브랜치로 이동 signin 브랜치로 이동 list DEMO Naming Case (BEM) kebab-case(케밥 표기법) kebab-case, header-container, btn-list, menu-list ... (하이픈)으로 단어를 연결하는 표기법 HTML 태그의 class 속성으로 흔히 사용됨 camelCase(카멜 표기법) camelCase, typeName, lightBox, darkBox ... 기본적으로 변수명을 모두 소문자로 씀 ..

개요 웹(Web)을 구성하는 HTML, CSS, JS의 이해와 학습은 단순히 기술을 배우는 것으로 그치지 않고 웹과 모바일 그리고 IT 전반의 과거, 현재, 미래를 이해하는 데 많은 도움을 줍니다. 그리고 실무적으로 Product를 보다 구조적인 관점에서 볼 수 있는 능력을 키울 수 있습니다. 특히 Product 개발과 관련해 밀접하게 협업하는 기획, 디자인, 기술 영업 등의 직군에서 많은 도움이 될 수 있습니다. 이런 이유로 여러 기업에서 비전공자에게 개발 경험을 요구하는 경우가 상당히 많아졌습니다. HTML, CSS를 학습하기 전에 필요한 지식을 최대한 정리했습니다. HTML, CSS, JavaScript HTML(Hyper Text Markup Language)은 페이지에 제목, 문단, 표, 이미지..

html에 다른 html Snippet 포함하기 header와 footer를 분리해 한 곳에서 관리하고 싶을 때 include를 사용한다. https://www.w3schools.com/howto/howto_html_include.asp html 분리하기 header와 footer 등 페이지의 공통 부분을 각각의 html 파일로 분리한다. outline 폴더 내 > header.html 파일 생성 header outline 폴더 내 footer.html 파일 생성 footer html 파일 내 include 포함 index.html 파일 내 include.js 파일 생성 js > include.js 파일 생성 후 연결 // include.js window.addEventListener('load&..

폴더 경로 css outline (전체 레이아웃) goods (상품) board (게시판) event (이벤트) member (회원) mypage (마이 페이지) order (주문) popup (팝업창 페이지) proc (기타 페이지) service (고객 서비스)