웹/HTML17 [코딩공부_114] SVG를 활용한 웹 페이지 만들기 png나 jpg만 사용하여 웹 페이지를 만들진 않으셨나요? SVG를 활용해서 멋진 웹 페이지를 만들어 보아요!! :) SVG란? SVG(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어입니다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든것이 될 수 있습니다. SVG는 코드를 수정할 수 있기 때문에 다양하게 활용할 수 있다는 장점이 있습니다. - SVG는 크기를 줄이거나 늘리더라도 화질에 영향을 미치지 않습니다. - 원하는 색상을 자유롭게 적용할 수 있습니다. SVG의 파일 용량 줄이기 패스를 정돈하고 가능한 많은 포인트를 제거하고 포인트를 픽셀 값에 맞추어 겹치는 영역을 최대한 제거하여 파일 용량ㅇ르 줄일 수 있습니다. S.. 2023. 9. 30. [코딩 공부_108] article과 section, div를 구분하자! 문득 그런 생각을 했다 article, section, div 태그의 차이는 무엇일까? 생각하고 검색하니 정말 차이가 있었다 나는 아무 생각없이 section으로만 구분했는데 반성하게 된다 ㅎㅎ... 1. article : 옷 한벌이라 생각하면 쉽다. 옷은 갈아입을 수 있고 똑같은 옷을 다시 입을 수도 있고 다른 사람에게 옷을 줄 수 있기 때문이다. 즉 article은 독립적이고 재사용이 가능한 태그이다. (배포 또한 가능) 2. section : 내용이 서로 관계 있다면 section 태그를 사용하면 된다. 서로 관계 있는 문서를 분리하는 역할을 해준다. (문서를 다른 주제로 구분 짓기 위해서!) 3. div : 의미적으로 관계가 없는 것들에 사용한다 (오직 서로 내용을 묶는 역할, 그룹화) 2021. 9. 6. [코딩 공부_77] 파비콘 적용하기 1. 파비콘 : Favorites icon의 줄임말로 즐겨찾기 아이콘이다! 웹 브라우저상에서는 주소창 옆에 작은 아이콘으로 표시된다. (형식) .ico가 기본적이지만 png의 확장자로도 가능하다. 사이즈는 16X16 또는 32X32로 표현가능 2. 실습 2021. 5. 14. [코딩 공부_26] HTML에 아이콘을 넣어보자! 아이콘을 넣을 수 있는 방법 2가지에 대해 알아보자! ① XEICON (xpressengine.github.io/XEIcon/) - 회원가입 X ↓ 사이트 태그 안에 아래의 코드를 붙인다 ↓ ↓ 메뉴인 "LIBRARY"를 클릭하고 마음에 드는 아이콘의 제목을 아래와 같이 작성한다 ↓ xpressengine * 자세한 내용은 XEICON > GET STARTED 에서 확인이 가능하다 (xpressengine.github.io/XEIcon/started.html) * 아이콘 관련 기능에 대한 소개 : (xpressengine.github.io/XEIcon/examples.html) ② Fontawesome (fontawesome.com/) - 회원가입 O - 회원가입 후, 계정을 클릭하고 "font awes.. 2021. 3. 9. [코딩 공부_17] 절대경로? 상대경로? 경로 표기법에 대해 알아보자! 절대경로와 상대경로를 많이 헷갈려해서 경로 표기법에 대해 복습해본다! 😋 * 현재 페이지에서 다른 페이지(리소스)를 불러오기 위해 경로를 꼭 입력해야한다 크게 상대경로와 절대경로가 있다!! ① 상대경로 : 현재 위치를 기준으로 웹 페이지나 파일의 경로를 말한다. 현재 위치는 "나!!"를 말하는 것이다! 내가 있는 곳 기준으로 오른쪽 건물 왼쪽 건물을 말한다 - / : root - ./ : 현재 폴더 - ../ : 상위 폴더 상대경로 상대경로 ex) /img/web.jpg ② 절대경로 : 특정한 웹 페이지나 파일이 가지고 있는 고유한 경로를 말한다. - C:\User\Hello\Documents - http://www.naver.com 절대경로 절대경로 2021. 3. 4. [코딩 공부_13] DGBook 만들어 보기 오늘 DGBook을 하드코딩하기가 시험이었다! 이때까지 하던 것보다 많이 어려워서 머리를 빙글빙글 돌렸는데 머리를 굴려보니 다 했던 거라 내가 생각했던 만큼 완료했다! 그래서 DGBook 결과화면을 공유하도록 하겠다! ↓index.html DGBook 메인으로 이동하기 > 회원가입 하러 가기 > 주간 베스트 정보입니다 주간 베스트 책 표지 책 정보 비고 종합 가정 경제 고전 지은이: 염승환 출판사: 메이트북스 둘러보기 지은이: 염승환 출판사: 메이트북스 둘러보기 ‘염블리’ 염승환이 전하는 주식투자 시 필수지식과 태도, 경험을 담은 주식투자 바이블! 2020년 100조 원이 넘는 주린이들의 자금이 주식시장에 유입되었다. 세대를 막론하고 주식투자가 건전한 재테크 및 노후준비 수단으로 부상하며 많.. 2021. 2. 26. [코딩 공부_11] <button> 태그 관련 버그 해결 ① 태그 : 사용자가 클릭할 수 있는 버튼을 생성할 수 있다. 텍스트나 이미지와 같은 콘텐츠 삽입이 가능하다. ② 태그 관련 버그 (발생 상황) 위 사진은 사용자가 로그인 할 수 있게 ID/PW를 입력할 수 있는 창이다. 로그인을 하면 바로 메인 페이지로 이동할 수 있게 링크를 걸어두었다. 또한, 아이디가 없는 사용자가 회원가입을 할 수 있도록 로그인 버튼을 생성하여 회원가입 페이지로 이동할 수 있게 페이지를 제작하였다. ** 버그발생 ** - 회원가입 버튼 : 회원가입 텍스트를 클릭하면 정상작동하지만, 버튼(빨간색으로 표시) 부분만 클릭할 시 메인 페이지로 이동하는 버그가 생겼다. (원인 발견하기) DEFLIX 로그인 로그인 정보 ID: PW: 개인정보 처리방침에 따른 개인정보 수집 및 활용에 동의합니.. 2021. 2. 24. [코딩 공부_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. [코딩 공부_03] 모바일 웹과 반응형 웹이란 무엇일까? 요번 두번째 수업에서 배웠던 내용을 기준으로 공부 해보도록 하겠다!!🤗 나는 쉬는 걸 못하는 사람😅이라서 뭐라도 공부하려고 노력한다.. 안하면 불안해서 자꾸만 끄적이게 된다😥 (안그러고 싶다..) 그래서 오늘은 실제로 만들어진 웹 사이트를 보면서 모바일 웹과 반응형 웹에 대해 비교해보겠다.🧐 우리는 컴퓨터, 태블릿, 스마트폰과 같은 전자기기를 이용하여 웹을 본다. 이와 같은 전자기기의 크기는 다양하기 때문에 그에 맞게 최적화된 웹을 제작할 필요가 생겼다. 그래서 사람들은 다양한 방법을 고안하게 되었고 그 방법이 바로 "모바일 웹"과 "반응형 웹"이다. ① 모바일 웹 이란? - PC용 웹사이트와 모바일용 웹사이트를 따로 제작하여 사용자들에게 최적화된 웹을 제공한다. 보통, PC용 웹사이트가 존재하고 있는 .. 2021. 2. 12. [코딩 공부_02] 웹 접근성과 웹 표준성에 대하여 저번 시간에 강조(빨간 색 왕창😆)했었던 웹 접근성과 웹 표준성에 대해 이야기하겠다. 오늘 수업을 들으면서 웹에 대해 많은 정보를 배웠다! 정말 배우고 싶었던 부분인데 이렇게 배우게 되서 기분이 좋다😁 얼른 수료해서 취업하고 더 많은 걸 경험하고 싶다😢(그럴려면 5개월,, 남았다) 그때동안 화이팅! ① 웹 표준성 : html을 작성시 공통적으로 지켜야할 기준이다. - 인터넷을 이용할 때 같은 웹페이지라면 어느 브라우저를 사용하는 지 여부에 상관없이 동일하고 정상적으로 작동해야함을 의미한다. Q. 그렇다면 웹 표준은 누가 정하는 것 일까? A. W3C(World Wide Web Consortium - https://www.w3.org/)에서 대표적으로 html과 css의 표준을 정한다 Q. 웹 표준이 중요.. 2021. 2. 11. [코딩 공부_01] 웹퍼블리셔/웹디자이너에 대하여 오늘부터 내일배움카드로 국비지원 과정인 디지털 디자인(웹디자인) 구직자 양성과정 수업을 듣게 되었다😊 아주 기초적인 부분은 알고 있었던 부분인데 복습하게 되어 기초를 탄탄하게 배우는 시간이 되었다! >>다음 시간이 더 기대 된다 (도키도키)😣 앞으로 무슨 수업을 할 지 정말 궁금하고 빨리 배우고 싶은 마음이 가득하다 > 2021. 2. 10. 이전 1 다음
