본문 바로가기

HTML+CSS

웹개발(7)-CSS 텍스트 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*letter-spacing: 텍스트 내에서 글자 사이의 간격을 설정합니다.    안녕하세요. 오늘은 월요일!     안 녕 하 세 요 . 오 늘 은   월 요 일 ! word-spacing: 텍스트 내에서 단어 사이의 간격을 설정합니다.    안녕하세요.     오늘은     월요일 css 텍스트1 letter-spacing Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias ut accusamus fugit soluta autem expedita distinctio accusantium, et placeat, aliquam suscipi.. 더보기
웹개발(6)-선택자와 스타일링 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. CSS(Cascading Style Sheets)웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어입니다. HTML요소와 연관시켜서 요소를 적용하는 방법입니다. 보통 가장 많이 사용하는 방법 중 하나입니다.     CSS를 적용하는 방법 인라인 스타일 내부 스타일 외부 스타일  1-3. 외부 스타일 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법입니다. 외부 CSS를 적용시키는 방법입니다.    ✔ rel: 현재 문서와 링크된 문서 사이의 연관관계를 명시 CSS를 .. 더보기
웹개발(5)- HTML의 디스플레이 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 인라인 content의 크기 만큼만 자리를 차지하는 요소텍스트, img, span 등 텍스트의 특징을 가지고 있음 2. 블록 라인을 모두 차지하는 요소 p, h, ul, li, div 등 면의 특징을 가지고 있음 span 태그 인라인 특징을 가지고 있음 글자 단위로 영역을 설정 div 태그 블록 특징을 가지고 있음 면 단위로 영역을 설정 시멘틱(Semantic) 태그 Semantic: 의미가 있는, 의미론적인div > div > div > .. 끝없는 div를 탐색하는 것보다 효율적 개발자에게 명확한 의미를 전달스크린 리더를 사용하여 페이지를 탐색할 때 도움검색엔진 봇에게 정보를 제공 디스플레이 .. 더보기
웹개발(4)-hyperlink, table, iframe, form tag *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 하이퍼링크a로 하이퍼링크를 넣어 해당 링크로 사이트를 접속할 수 있습니다.하이퍼 링크 : 다른 페이지 또는 사이트로 연결되는 링크(문자 또는 이미지) 링크에 사용할 문자 또는 이미지참고: "href"는 "하이퍼링크 참조(Hypertext Reference)"의 약자 하이퍼링크 코리아IT아카데미 내 첫 웹페이지 서브페이지2. 책갈피a로 하이퍼링크를 이동하는 것을 다른 용도로 활용가능합니다. a herf="#이동할 객체"로 해당 객체가 있는 위치로 이동할 수 있습니다. 책갈피 그림으로 이동 목적지로 이동합니다 Lorem ipsum dolor, sit .. 더보기
웹개발(3)-서버 호스팅, filezila *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 호스팅 서비스서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스입니다. 일반적으로 호스팅 서비스 업체들은 서버 공간을 제공하고, 데이터베이스, 대역폭, 보안 및 기술 지원과 같은 다양한 기능을 제공합니다. 호스팅 서비스는 대개 공유 호스팅, 전용 호스팅, 가상 사설 서버(VPS), 클라우드 호스팅, 관리형 호스팅 등 다양한 형태로 제공됩니다.공유 호스팅(Shared Hosting): 여러 사용자가 동일한 서버 리소스를 공유하는 호스팅 방식입니다. 비교적 저렴하고 간단한 웹사이트에 적합합니다.전용 호스팅(Dedicated Hosting): 사용자가 전용 서버를 임대하는 형태로, 서버의 모든 .. 더보기
웹개발(2)-html 이미지 태그 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 비트맵 이미지- 픽셀이 모여 만들어진 정보의 집합 - 레스터 이미지라고 부릅니다.- 픽셀 단위로 화면에 렌더링- 그림판, 포토샵 등 툴로 편집 - bmp, jpg(jpeg), gif, png, wedp...2. 벡터 이미지- 수학적 정보의 형태들이 만들어내는 결과물 -이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있습니다.- 확대, 축소를 해오 이미지가 깨지지 않습니다.- 일러스트 같은 툴로 편집 2-1. jpg(jpeg) - 압축률이 훌륭하여 사진이나 예술분야에 많이 사용(설명 필요) - 가장 널리 쓰이는 이미지 포멧 - 손실 압축 ( 디지털풍화) - 표현 색상(24비트, 약 1600만 색상).. 더보기
웹개발(1)-html Extensions, 문서 구조 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*자동줄바꿈 설정: file->preferences->settings->world wrap: on에밋(Emmet) : html, xml, xsl, 문서 등을 작성할 때 빠른 코딩을 위해 사용하는 플러그인입니다.사용법 : !(Enter): html 기본코드 완성! + enter 입력 : 선언문. HTML5버전 나타냄  : html문서, 리더기의 언어를 설정(en:영어, ko:한국어) 메타태그: 추가 설명 필요 - : HTML 문서에 대한 정보를 정의할 때 사용 -  사이에 적용 - name, content, http-equiv, author, viewpoint, keyword, description 등 여러가지 속성.. 더보기
비쥬얼스튜디오(Visual Studio Code) 설치 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 비쥬얼 스튜디오 홈페이지(https://code.visualstudio.com/)에 들어갑니다. 더보기

티스토리툴바