티스토리

많이 금 간 개발자

검색하기

블로그 홈

많이 금 간 개발자

young0378.tistory.com/m

두설날 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

과제(8)-홈페이지 만들기 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*앞서 배운내용으로 과제 만들기 닷홈 홈페이지 연결1.메인페이지 이력서 홈 이 력 서 성명 한글 김대현 생년월일 1998.12.21 영문 DaeHyon Kim 블로그 https://young0378.tistory.com/manage/posts/ 휴대전화 010-7674-0721 이메일 heonk0378@naver.com .. 공감수 0 댓글수 0 2024. 4. 12.
웹개발(14)-transform, transition, animation *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*CSS 2Dtransform- 2차원 좌표에서 요소를 변형시키는 속성입니다.translate(이동)rotate(각도회전)scale(확대, 축소)skew(경사 비틀기)✔ 벤더 프리픽스(Vender Profix)- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사입니다. - w3c css 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙입니다. -webkit- : 크롬, 엣지를 위한 접두사 -o- : 오페라를 위한 접두사 -ms- : 익스플로러를 위한 접두사 -.. 공감수 0 댓글수 0 2024. 4. 12.
웹개발(13)- 우선순위, css변수 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*CSS 우선순위 계산1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선입니다. 2. 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선입니다. 3. 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용합니다. 4. 우선순위 계산: - inline: 1000점 - id: 100점 - class, 속성 선택자: 10점 - element: 1점 5. !important를 적용하면 0 순위로 적용합니다. CSS 우선순위 div 1번(인라인 스타일 우선) div 2번(id 우선) div 3번(class 우선) div 4번(같은 .. 공감수 0 댓글수 0 2024. 4. 12.
웹개발(12)-미디어쿼리, em,rem *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*미디어 쿼리(media query) 1.반응형웹하나의 웹사이트에서 pc, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법입니다. @media 매체유형 and (속성에 대한 조건) { css 코드 ... } 미디어쿼리1매체유형 all: 모든 매체 screen: 컴퓨터, 태블릿, 스마트폰 .. print: 프린터 speech: 스크린 리더2. em과 rem 특징상대적인 크기를 정하는 단위입니다.em - 부모 요소 크기의 몇 배인지를 단위로 설정합니다. pc의 일반 텍스트 크기: 16px = 1em 모바일의 일반 텍스트 크기: 12p.. 공감수 0 댓글수 0 2024. 4. 11.
웹개발(11)-float, layout *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. z-index- HTML: 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있습니다. - 겹쳐지는 요소들이 쌓이는 순서를 결정할 떄 z-index를 사용합니다. - 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됩니다. z-index 1번째 div 2번째 div 3번째 div 2. float- HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듭니다. (나중에 layout이 더 쓰임) - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려집니다. - float를 적용받은 요소의.. 공감수 0 댓글수 0 2024. 4. 11.
웹개발(10)-CSS position 지정 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*CSS position - 요소의 위치를 결정하는 방식을 설정1. 정적 위치 지정방식- static position (기본값) - HTML 요소의 위치를 결정하는 기본적인 방식 - 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식을2. 상대 위치 지정 방식- relative position - HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식 - top, left, right, bottom 속성값을 사용하여 재설정함 상대 위치 지정방식 상대 위치 지정방식1 상대 위치 지정방식2 상대 위치 지정방식33. 고정 위치 지정방식- fixed posi.. 공감수 0 댓글수 0 2024. 4. 9.
웹개발(9)-박스 모델(Box Model) *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*박스 모델(Box Model) - 모든 HTML 요소는 박스 모양으로 구성됩니다.- 박스 모델은 HTML 요소를 내용(content), 안쪽여백(padding), 테두리(border), 바깥여백(margin)으로 구분합니다.내용(content) - 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. ( 파란색 부분)안쪽여백(padding)- 내용과 테두리 사이의 간격 또는 여백입니다.- padding-top, padding-right, padding-bottom, padding-left -padding: 위 오른쪽 아래 왼쪽 순으로 설정합니다. HTML 안녕하세요 CSS div#p.. 공감수 0 댓글수 0 2024. 4. 9.
웹개발(8)-CSS배경 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*background-color: HTML 요소의 배경색을 설정합니다. css 배경1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quos asperiores architecto, doloremque eligendi recusandae aspernatur, nam adipisci accusamus quis voluptatum inventore, rerum dicta! Officia odio qui voluptatum excepturi quo. background-repeat: 배경 .. 공감수 0 댓글수 0 2024. 4. 9.
웹개발(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.. 공감수 0 댓글수 0 2024. 4. 8.
웹개발(6)-선택자와 스타일링 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. CSS(Cascading Style Sheets)웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어입니다. HTML요소와 연관시켜서 요소를 적용하는 방법입니다. 보통 가장 많이 사용하는 방법 중 하나입니다. CSS를 적용하는 방법 인라인 스타일 내부 스타일 외부 스타일 1-3. 외부 스타일 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법입니다. 외부 CSS를 적용시키는 방법입니다. ✔ rel: 현재 문서와 링크된 문서 사이의 연관관계를 명시 CSS를 .. 공감수 0 댓글수 0 2024. 4. 8.
웹개발(5)- HTML의 디스플레이 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 인라인 content의 크기 만큼만 자리를 차지하는 요소텍스트, img, span 등 텍스트의 특징을 가지고 있음 2. 블록 라인을 모두 차지하는 요소 p, h, ul, li, div 등 면의 특징을 가지고 있음 span 태그 인라인 특징을 가지고 있음 글자 단위로 영역을 설정 div 태그 블록 특징을 가지고 있음 면 단위로 영역을 설정 시멘틱(Semantic) 태그 Semantic: 의미가 있는, 의미론적인div > div > div > .. 끝없는 div를 탐색하는 것보다 효율적 개발자에게 명확한 의미를 전달스크린 리더를 사용하여 페이지를 탐색할 때 도움검색엔진 봇에게 정보를 제공 디스플레이 .. 공감수 0 댓글수 0 2024. 4. 5.
웹개발(4)-hyperlink, table, iframe, form tag *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 하이퍼링크a로 하이퍼링크를 넣어 해당 링크로 사이트를 접속할 수 있습니다.하이퍼 링크 : 다른 페이지 또는 사이트로 연결되는 링크(문자 또는 이미지) 링크에 사용할 문자 또는 이미지참고: "href"는 "하이퍼링크 참조(Hypertext Reference)"의 약자 하이퍼링크 코리아IT아카데미 내 첫 웹페이지 서브페이지2. 책갈피a로 하이퍼링크를 이동하는 것을 다른 용도로 활용가능합니다. a herf="#이동할 객체"로 해당 객체가 있는 위치로 이동할 수 있습니다. 책갈피 그림으로 이동 목적지로 이동합니다 Lorem ipsum dolor, sit .. 공감수 0 댓글수 0 2024. 4. 4.
웹개발(3)-서버 호스팅, filezila *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 호스팅 서비스서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스입니다. 일반적으로 호스팅 서비스 업체들은 서버 공간을 제공하고, 데이터베이스, 대역폭, 보안 및 기술 지원과 같은 다양한 기능을 제공합니다. 호스팅 서비스는 대개 공유 호스팅, 전용 호스팅, 가상 사설 서버(VPS), 클라우드 호스팅, 관리형 호스팅 등 다양한 형태로 제공됩니다.공유 호스팅(Shared Hosting): 여러 사용자가 동일한 서버 리소스를 공유하는 호스팅 방식입니다. 비교적 저렴하고 간단한 웹사이트에 적합합니다.전용 호스팅(Dedicated Hosting): 사용자가 전용 서버를 임대하는 형태로, 서버의 모든 .. 공감수 0 댓글수 0 2024. 4. 4.
웹개발(2)-html 이미지 태그 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 비트맵 이미지- 픽셀이 모여 만들어진 정보의 집합 - 레스터 이미지라고 부릅니다.- 픽셀 단위로 화면에 렌더링- 그림판, 포토샵 등 툴로 편집 - bmp, jpg(jpeg), gif, png, wedp...2. 벡터 이미지- 수학적 정보의 형태들이 만들어내는 결과물 -이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있습니다.- 확대, 축소를 해오 이미지가 깨지지 않습니다.- 일러스트 같은 툴로 편집 2-1. jpg(jpeg) - 압축률이 훌륭하여 사진이나 예술분야에 많이 사용(설명 필요) - 가장 널리 쓰이는 이미지 포멧 - 손실 압축 ( 디지털풍화) - 표현 색상(24비트, 약 1600만 색상).. 공감수 0 댓글수 0 2024. 4. 3.
웹개발(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 등 여러가지 속성.. 공감수 0 댓글수 0 2024. 4. 3.
비쥬얼스튜디오(Visual Studio Code) 설치 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 비쥬얼 스튜디오 홈페이지(https://code.visualstudio.com/)에 들어갑니다. 공감수 0 댓글수 0 2024. 4. 3.
웹개발-IP, 서버, HTML *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 월드 와이드 웹(World Wide Web)인터넷 상에서 정보를 공유하고 문서를 표시하기 위한 시스템입니다.(약자로 www입니다) 웹 브라우저와 웹 서버를 사용하여 정보를 검색할 수 있습니다. 웹은 HTTP와 HTML과 같은 프로토콜과 언어를 사용하여 문서를 표시하고 연결합니다.2. 네트워크(Network)컴퓨터나 기타 장치들이 상호 연결되어 데이터를 주고받을 수 있는 구조를 말합니다. 주로 LAN(Local Area Network), WAN(Wide Area Network), MAN(Metropolitan Area Network), PAN(Personal Area Network)등의 유형으로 구성됩니다. 주로.. 공감수 0 댓글수 0 2024. 4. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.