odada

CSS 기초 CSS란? Cascading Style Sheets (CSS)는 HTML이나 XML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. CSS는 HTML과 같은 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. CSS의 장점 HTML의 내용과 스타일을 분리할 수 있다. 스타일을 변경할 때 HTML을 수정할 필요가 없다. 웹 페이지의 로딩 속도를 향상시킬 수 있다. 스타일을 적용하는 방법이 다양하다. CSS의 구문 https://www.w3schools.com/css/css_selectors.asp 선택자 { 속성: 값; } 선택자(selector): HTML 요소를 선택한다. 속성(property): 스타일을 지정한..

Naming Guide 다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다. Naming Guide는 크게 "Naming 규칙"과 "Prefix/Subfix/Suffix 정의" 두 부분으로 나뉩니다. Naming 규칙에서는 CSS와 HTML 및 각종 파일, 디렉토리들의 공통된 네이밍 규칙에 대해 정리합니다. Prefix/Subfix/Suffix 규칙에서는 다양한 개발환경에 대비한 예약단축어들을 소개하며 이를 조합하는 방식에 대해 설명합니다. Naming 표기법 - kebab-case(케밥 표기법) kebab-case, header-container, btn-list, menu-list ... (하이픈)으로 단어를..

Layout 의미있는 마크업 리빙샵아울렛 인기모음전 수저모음 도마모음 그릇모음 접시모음 베스트상품 주방용품 설비제품 인덕션제품 실리콘제품 업종별샵 한식기물 양식기물 일식기물 중식기물 인덕션용품 냄비/솥 후라이팬/주물 인덕션렌지 기타제품 바로가기 바로가기1 바로가기2 바로가기3 바로가기4 바로가기5 바로가기6 바로가기7 공지사항 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 갤러리 겨울 내내 촉촉 이번에만 2..

폼 관련 태그 form 태그 사용자가 입력한 데이터를 서버로 전송할 때 사용하는 태그 사용자가 입력한 데이터를 서버로 전송하는 방식은 GET 방식과 POST 방식이 있다. GET 방식 데이터를 URL 뒤에 붙여서 전송하는 방식으로 데이터가 노출되는 단점이 있다. 예를 들어, 아래와 같이 URL 뒤에 데이터를 붙여서 전송한다. POST 방식 데이터를 URL 뒤에 붙이지 않고 전송하는 방식으로 GET 방식보다 보안성이 높다. 데이터를 전송할 때 사용하는 태그는 input 태그이다. input 태그 사용자가 입력한 데이터를 받아들이는 태그 type 속성을 사용해서 입력 데이터의 종류를 지정할 수 있다. type 속성 값 설명 text 한 줄의 텍스트를 입력할 수 있는 텍스트 박스 password 한 줄의 텍스..

웹사이트(홈페이지) 제작 기본 프로세스 웹사이트(홈페이지)란? 웹 페이지들의 모음 웹 페이지 : 웹 브라우저에서 볼 수 있는 문서 웹 사이트 : 웹 페이지들의 모음 홈페이지 : 웹 사이트 중에서 첫 페이지 웹사이트 제작 기본 프로세스 기획(Planning) 디자인(Design) 프론트앤드(Front-end Development) 백앤드(Back-end Development) 기획(Planning) 웹사이트의 목적, 타겟 사용자, 기능, 콘텐츠 등을 정의하고 전체 구조와 흐름을 설계하는 단계 목적 및 목표 설정: 웹사이트가 달성하고자 하는 목적과 구체적인 목표를 설정합니다. 타겟 사용자 분석: 대상 사용자의 특성과 요구를 분석하여 사용자 중심의 기획을 진행합니다. 기능 명세: 웹사이트에서 제공할 기능들을 ..

퍼블리싱(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 태그는 사이트의 성격을 잘 표현할 수 있는 브랜드명으로 기입해야 합니다. 사이트의 개설 목적에 맞..

우리가 배울 것들 HTML 웹 페이지의 구조를 정의하는 언어 https://www.w3schools.com/html/default.asp 웹 페이지의 기본적인 뼈대를 만들며, 텍스트, 이미지, 링크 등의 콘텐츠를 웹에서 어떻게 표시할지 정의합니다. 태그(tag) 기반으로 되어 있으며, , HTML 기본 문서 HTML은 웹 문서를 만드는 언어입니다. CSS 란? 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어 https://www.w3schools.com/css/default.asp HTML 요소의 색상, 폰트, 간격, 크기 등을 설정하여 사용자에게 보여지는 페이지의 시각적인 면을 꾸밉니다. 클래스, ID, 태그 등 다양한 선택자(selector)를 사용하여 특정 HTML 요소를 대상으로 스타일..