html13 [코딩공부_114] SVG를 활용한 웹 페이지 만들기 png나 jpg만 사용하여 웹 페이지를 만들진 않으셨나요? SVG를 활용해서 멋진 웹 페이지를 만들어 보아요!! :) SVG란? SVG(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어입니다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든것이 될 수 있습니다. SVG는 코드를 수정할 수 있기 때문에 다양하게 활용할 수 있다는 장점이 있습니다. - SVG는 크기를 줄이거나 늘리더라도 화질에 영향을 미치지 않습니다. - 원하는 색상을 자유롭게 적용할 수 있습니다. SVG의 파일 용량 줄이기 패스를 정돈하고 가능한 많은 포인트를 제거하고 포인트를 픽셀 값에 맞추어 겹치는 영역을 최대한 제거하여 파일 용량ㅇ르 줄일 수 있습니다. S.. 2023. 9. 30. [코딩 공부_16] 웹 개발 작업환경 세팅하기 (VSC 전용) * 작업환경 세팅 부분은 설정할 때마다 글 수정 😎 1. VSC (https://code.visualstudio.com/download) : 웹 개발을 위한 소스 코드 편집기 프로그램으로, 마이크로 소프트 사에서 제작한 프로그램이다. 작업에 편리한 기능을 제공하기 때문에 많은 개발자가 사용하는 프로그램이다. ① html에서 기본 필요 코드 자동 완성하는 방법 : ! + TAB → 이렇게 사용하게 되면 lang="en" 즉 영어로 되어 있기 때문에 lang="ko"로 변경해야하는 번거로움이 있다. 그 번거로움을 해결하려면 아래의 방법을 이용해보자!! ② html 기본 필요 코드 + lang="ko"로 자동 완성하는 방법 - VSC > 왼쪽 아래 톱니바퀴 > 사용자 코드 조각 설정 > html.json 작성.. 2021. 3. 4. [코딩 공부_15] CSS 셀렉터(선택자) CSS에서 엄청 중요한 부분인 셀렉터에 대해 알아보자! ① CSS 셀렉터 (Selector) = 선택자 : 내부/외부 스타일 시트에서 문서의 html 요소를 선택할 수 있게 하는 문법 기본 셀렉터 이름 설명 예시 전체 셀렉터 (universal selector) html 문서 내의 모든 요소를 선택 * {font-size: 12px} 태그 셀렉터 (tag selector) 태그를 선택하는 셀렉터 p {font-size: 12px} 아이디 셀렉터 (id selector) id 값을 선택하는 셀렉터 * 유일해야하며 하나여야 한다. #last {font-size: 12px} 클래스 셀렉터 (class selector) class값을 선택하는 셀렉터 * 중복, 다수 선언 가능 .wrap {font-size: 1.. 2021. 3. 3. [코딩 공부_14] CSS로 색상을 표현하는 방법 ① hexcode : RGB 값을 16진수로 표현해 사용하는 방법 - 핵사코드는 색상표현 방법 중, 가장 많이 쓰는 방법으로 3개 또는 6개의 숫자를 이용하여 색상을 표현한다. ex) #000, #000000, #fff, #ffffff...등 - #00 00 00 Red Green Blue → 3자리인 경우, #000 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 0 1 2 3 4 5 6 7 8 9 A B C D E F - 0에 가까워 질수록 색상이 없어지고, F에 가까워 질수록 해당 색이 늘어난다 ② color mames : 이름 그대로 색상 이름을 직접 지정해 사용하는 방법 - 브라우저별로 생각하는 색상이 다르기 때문에 색상 차가 있을 수 있기 때문에 주의해서 사용해야한다. 예를.. 2021. 3. 3. [코딩 공부_13] DGBook 만들어 보기 오늘 DGBook을 하드코딩하기가 시험이었다! 이때까지 하던 것보다 많이 어려워서 머리를 빙글빙글 돌렸는데 머리를 굴려보니 다 했던 거라 내가 생각했던 만큼 완료했다! 그래서 DGBook 결과화면을 공유하도록 하겠다! ↓index.html DGBook 메인으로 이동하기 > 회원가입 하러 가기 > 주간 베스트 정보입니다 주간 베스트 책 표지 책 정보 비고 종합 가정 경제 고전 지은이: 염승환 출판사: 메이트북스 둘러보기 지은이: 염승환 출판사: 메이트북스 둘러보기 ‘염블리’ 염승환이 전하는 주식투자 시 필수지식과 태도, 경험을 담은 주식투자 바이블! 2020년 100조 원이 넘는 주린이들의 자금이 주식시장에 유입되었다. 세대를 막론하고 주식투자가 건전한 재테크 및 노후준비 수단으로 부상하며 많.. 2021. 2. 26. [코딩 공부_10] <button> vs <input type="button">, 둘의 차이는? 이번에는 내가 실수했고 궁금했던 부분에 대해 포스팅하고자 한다. 내가 태그에 대한 의미나 기능에 대해 알아보지 않고 사용했기 때문에 생긴 일이라 생각한다. 조금 더 주의해서 태그를 볼 필요가 생겼고, 똑같이 구동하지만 작은 차이가 있기 때문에 연관있는 태그는 한번 더 보고 가야된다는 생각을 하게 만든 태그이다. 내용은 스텍 오버플로를 참고하여 제작하였다. 과 의 차이는 무엇일까? 두 태그를 실행 시켰을 때 동일한 버튼의 모양이 나오기 때문에 헷갈릴 수 있지만, 둘의 역할이 다르다. 태그는 여는 태그와 닫는 태그로 이루어져 있어 컨텐츠를 감쌀 수 있고, 은 단일태그인 차이점이 있다. 그렇기 때문에 태그가 더 자유롭게 사용이 가능하며, 이미지와 같은 컨텐츠를 버튼으로 제작할 수 있다. 은 form태그안에 속.. 2021. 2. 23. [코딩 공부_09] DEFLIX 완성하기 오늘은 넷플릭스를 모티브로 한 DEFLIX 기획안을 보고 수업시간에 html 페이지를 제작해보았다. 기획안을 보며 웹 사이트와 웹 페이지의 구조, 그리고 하드코딩에 대해 깊게 배운 시간이다. 코딩을 하면 항상 어렵고.. 어렵고.. 어려웠다.. 수업시간 안에 끝내고 싶었지만 못했었다 ..........😅 복습을 하면서 어떤 식으로 버그를 해결해야하는 지 감이 왔다 !! ㅎㅎㅎ 깨닫는 데 시간이 참 오래 걸리는 듯하다 !! 오늘은 프로젝트 코드와 결과, 그리고 나의 문제점, 해결방법, 느낀점에 대해 총 정리하는 시간을 가지겠다!! ↓ Index.html DEFLIX - 로그아웃 응답하라 1994 Lorem ipsum dolor sit amet consectetur adipisicing elit. In omn.. 2021. 2. 22. [코딩 공부_08] 웹 사이트와 웹 페이지의 구조 알아보기 우리는 지금 html로 하드코딩을 배우고 있다 😎 너무 힘들다 ㅠㅠㅠ 아직 익숙하지 않아서 그런걸 잘알고 있지만 나만 뒤처지는 거 같아서 우울하다😥 컴퓨터 언어 중에서 html이 제일 쉬운 부분이라고 들었지만 나한테는 전혀 아닌 듯한 느낌이다 ㅎㅎ.. 요번에는 웹 사이트와 웹 페이지의 구조에 대해 알아보았다 항상 수업할 때는 잘 이해가 되지 않았는데 복습하면서 아!! 말씀하셨던 게 이런거였구나! 하면서 뒤늦게 깨닫는다 ,, 복습이 역시 최고다!! 이번엔 코딩한 부분과 함께 부연 설명을 할 것이다! 웹 사이트의 구성 아래는 index.html으로 사이트의 첫시작 페이지이다. 여기서 사이트란, 웹 페이지의 모임을 뜻한다. 즉 index.html 이외 main.html, sign-up.html...등 여러 h.. 2021. 2. 19. [코딩 공부_07] form 태그 사용하기 오늘 수업은 form 태그를 배웠는데 사실 무슨 소리인지 잘몰라서 엄청 헤맸다 ㅎㅎ..😂 지금 열심히 복습하면서 수업했던걸 깨달았다,,(역시 복습은 최고!) 내일은 더 정신바짝차리고 들어야겠다 하.하.하 분명 똑같이 썼는데 자꾸 내가 원하는 답이 안나와서 답답했는데 알고보니 새로고침을 안한거였다🤓(멍청이..) ① : 사용자로부터 입력을 받을 수 있는 HTML 입력 폼을 정의할 때 사용하는 태그이다. - 사용자로부터 입력 받아야하는 부분을 표현해야하기 때문에 다양한 속성이 존재한다. 속성명 속성값 설명 action URL 폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시 method ① get ② post 폼 데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시 name 텍스트 요소의.. 2021. 2. 17. [코딩 공부_06] HTML로 위키피디아 페이지 만들기! 오늘은 html로 맥도날드 정보를 담은 위키피디아 페이지를 만드는 프로젝트를 해보았다!! 처음엔 '이걸 할 수 있을까.. 나 코딩 엄청 못하는데 ㅠㅠ'하는 마음에 엄청 불안했는데 막상 하니 된다 😊😋 역시 그냥 하면 어떻게든 되나 싶다!!🙂 더 열심히 만들어야겠다는 마음이 커지는 프로젝트였다!! 내가 작업하면서 어떤 부분이 힘들었고 무슨 태그인지 설명해보는 시간을 가져보도록 하겠다 🥇완성된 맥도날드 위키피디아 프로젝트🥇 ↑캡처를 하면 항상 화질이 낮아져서 너무 슬프다.. 아무리 캡처라지만 너무 흐리멍텅해진다 😥 아무튼 50분-1시간 사이에 완료했던 거 같다!! 간단하면서도 헷갈려서 정신없었다🙄😶 🧐간단하지만 양이 많기 때문에 큰 제목을 기준으로 나눠서 분석하겠다🧐 ① 맥도날드 위키피디아 정보 / 목차 맥.. 2021. 2. 16. [코딩 공부_05] HTML의 각종 태그들 정리 오늘 수업에서 배운 각종 태그들을 정리하는 시간을 가져보도록 하겠다. 엄청 중요한 태그라고 생각하기 때문에 더 열심히 정리하였다!! 😎😎 ① 목록태그 : list를 나열할 때 목록을 구분해주는 태그로, 목록태그의 종류는 총 3가지가 있다. - 순차적 목록(Order List) → : 순서가 있는 목록, 자동으로 각 항목에 기본 값으로 숫자가 부여된다. - 비순차적 목록(Unorder List) → : 순서가 없는 목록, 자동으로 원형 특수문자가 부여된다. - 정의형 목록(Definition List) → : 특정한 개념이나 용어에 대한 설명이나 정의를 할 떄 사용, 가끔 사용한다. * 모두 목록을 구분해주기 때문에 list를 표시해주는 태그를 둘러싸고 있는 형태이다. * 태그는 블록 요소, 텍스트, 인라.. 2021. 2. 15. [코딩 공부_04] HTML, 웹을 이루는 근간 모든 웹 서비스는 HTML로 이루어져 있다. 웹페이지를 서술하고 정의하는데 사용하고 있는 HTML! 정확하게 HTML이 무엇인지 어떤 식으로 구성되어있는 지 알아보자!! ① HTML이란? - Hyper Text Markup Language, 하이퍼 텍스트를 작성하기 위해 개발된 언어이다. 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는데 쓰인다. HTML로 작성된 문서를 웹 브라우저가 해석하여 사용자에게 보여주게 된다. 별도의 코드를 인식하여 인터넷의 다른 장소나 파일로 연결 시킬 수 있다. - HTML은 전자문서의 서식을 정의하기 위해 만들어졌으며, 아스키코드로 된 일반적인 텍스트로 구성되었다. 이 언어는 별도 컴파일러가 필요하지 않으며 .. 2021. 2. 13. [코딩 공부_01] 웹퍼블리셔/웹디자이너에 대하여 오늘부터 내일배움카드로 국비지원 과정인 디지털 디자인(웹디자인) 구직자 양성과정 수업을 듣게 되었다😊 아주 기초적인 부분은 알고 있었던 부분인데 복습하게 되어 기초를 탄탄하게 배우는 시간이 되었다! >>다음 시간이 더 기대 된다 (도키도키)😣 앞으로 무슨 수업을 할 지 정말 궁금하고 빨리 배우고 싶은 마음이 가득하다 > 2021. 2. 10. 이전 1 다음
