IT/무작정 웹사이트 만들기
[웹사이트 만들기-6] CSS 문법 종류
[웹사이트 만들기-6] CSS 문법 종류 1. 이미지 배경 넣기 - css 파일에 아래와 같이 background 명령어 및 url을 입력하면 배경이미지가 추가된다. - 아래 예시는 span 태그에 대한 배경이미지를 삽입한 것이다. index.html 파일 소스 Hello World!! Hello World!! Hello World!! Hello World!! Hello World!! Hello Worldddddd!! main.css 파일 소스 span { color: red; width: 200px; height: 200px; background: url("../images/logo.jpg"); font-size: 100px; }
[웹사이트 만들기-5] HTML 태그 종류
[웹사이트 만들기-5] HTML 태그 종류 1. 구문 1) title - 웹 브라우저 탭에 표시되는 제목 정의 사용 예) Naver 2) 하이퍼링크 (href) - CSS, 아이콘(파비콘) 등 파일을 연결하는 관계를 설정 사용 예) 3) Script - 외부의 JS 파일을 가져오거나 JS 파일 내용을 HTML 문서 안에서 작성하는 경우 사용 사용 예) 4) meta - 기본적인 사이트의 정보를 제공하는 태그 (메타데이터) - 정보의 종류와 그 값은 무엇이라는 것을 명시해주는 태그 사용 예) ※ charset은 인코딩 방식을 의미한다.(EUC-KR을 예전에는 사용했으나, 문자 깨짐 등의 사유로 UTF-8을 거의 국룰처럼 사용한다.) ※ viewport는 모바일에서 사용하는 개념으로, 모바일 환경에서 가로 ..
[웹사이트 만들기-4] HTML, CSS, JS 구조
[웹사이트 만들기-4] HTML, CSS, JS 구조 1. HTML 구조 1-1) HTML 기본 구조 *.html에 !를 치고 엔터를 치면 구조가 자동으로 삽입되는데 이는 다음과 같다. Hello World!! Hello World!! Hello World!! Hello World!! Hello World!! Hello Worldddddd!! html lang = "en"을 "ko"로 바꿔주면 아래와 같이 번역기 창이 팝업되지 않는다. (한국어를 전제하여 동작하는 사이트로 설정됨) 1-2) CSS 구조 div { color: red; font-size: 100px; } 1-3) HTML과 CSS 연동 ① 'main.css'라는 파일을 생성한 후 head 태그에 link 입력 후 tab키를 누르면 자동으로..
[웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키)
[웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키) 1. html기본 구조 만들기 1) index.html 파일명으로 새로 파일 만들기 2) '!'를 입력한 후 엔터를 치면 html 기본 구조가 자동 생성된다. 3) main.css 파일명으로 새로 파일 만들기 2. Auto Rename Tag Extension 설치 : Extension 버튼 클릭 - Auto 입력 - 설치 - html, css에서 태그 짝을 자동으로 맞춰주는 Extension인 Auto Rename Tag를 설치하자 아래 사진과 같이 흰 동그라미가 떠있다는 것은 아직 저장되지 않은 파일이라는 뜻이고, 여러개의 파일이 저장되지 않았다면 모두 저장을 해줘야 한다. ※ 모두 저장 단축키 : Ctrl ..
[웹사이트 만들기-2] 크로스 브라우징, 뷰포트, 렌더링이란? 비트맵과 벡터의 차이, WEBP, SVG 확장자란?
[웹사이트 만들기-2] 크로스 브라우징, 뷰포트, 렌더링이란? 비트맵과 벡터의 차이, WEBP, SVG 확장자란? 1. 크로스 브라우징 내가 만든 웹 페이지가 모든 브라우저에서 내가 설계한 방향대로 보여지게 하는 것 크로스 브라우징을 가능하게 하려면 W3C가 제정한 국제 표준인 웹표준을 만족해야 함 인터넷 익스플로러는 웹표준을 만족하지 않으므로 크로스 브라우징이 불가능하다. (2020년 8월 서비스는 종료되었으나, 예전에 설계한 웹페이지는 종종 익스플로러 환경으로 대응해야 하는 경우가 있음) 2. 뷰포트 하나의 웹 페이지가 표시되는 전체 영역을 의미함 렌더링 : 브라우저의 뷰포트에 웹사이트를 출력하는(보여주는) 행위를 의미함 3. 비트맵과 벡터의 차이 비트맵 - 픽셀 단위의 정사각형 조각들이 모여 정보를..
[웹사이트 만들기-1] HTML, CSS, JavaScript의 역할
[웹사이트 만들기-1] HTML, CSS, JavaScript의 역할 1. 백엔드와 프론트엔드 백엔드 : 연산 및 처리 등 기능적인 부분을 담당 프론트엔드 : 사용자에게 예쁘게 보여주는 시각적 부분을 담당 2. HTML 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹 구조를 담당 눈,코,입 재료들만 열거되어있음 - CSS, JS가 없이 HTML만 있으면 웹사이트가 아래와 같이 구조(재료)만 나온다. 3. CSS 실제 화면에 표시되는 방법(색상,크기,폰트,레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당. 눈, 코, 입이 위치에 맞게 정적으로 정렬되어있음 4. JavaScript (JS) 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당 눈, 코, 입이 움직임 5. 웹..