본문 바로가기

Web

(23)
포트폴리오 웹사이트 만들기 (0) 긴 프로젝트가 될 것 같은데, 나의 웹사이트를 만들어볼까 한다. 아마 깃헙 페이지로 할 것 같은데 10월 말까지 완성하는 것을 목표로 간단한 웹사이트를 만들어볼까 한다. 우선 8월 중순까지는 좀 바빠서 피그마로 UI부터 제작해보려 한다. 어디까지 공개할지는 모르겠지만, 블로그에도 조금씩 공유해보겠다. 디자인을 쉰 지가 꽤 되어서, 부족한 부분이 많으리라 생각이 든다. 댓글을 통한 조언은 언제나 환영한다. 이후에는 웹사이트를 만들어볼 생각인데, 나태해질 것을 방지해 현업에서 일하고 계신 분께 혹시 감독을 해주실 수 있냐 부탁을 드려놓은 상태이다. 글이 너무 안올라온다면, 댓글로 채찍질해주는 것도 매우매우 환영한다.
[HTML/개념] 개념 정리 03 - html5, DIV, SPAN, HTMl 엔티티, 시맨틱 마크업, 에밋 1️⃣ HTML5 - HTML을 정의하는 가장 발전된 표준: HTML은 기본적으로 HTML의 작동 방식에 대한 지침 - 새로운 요소, 속성, 행동을 가진 새로운 버전의 HTML 언어 - HTML의 작동 방식을 설명하는 문서(브라우저는 이것을 구현) https://html.spec.whatwg.org/ HTML Standard html.spec.whatwg.org - 구버전을 사용하기 위해서 다른 버전을 사용할거라고 지정해줄 수 있지만, HTML5 자체를 끌 수는 없음 2️⃣ DIV, SPAN - 주어진 요소가 문서의 콘텐츠 흐름에 들어가게 하는 방법 1) 인라인: 콘텐츠가 있는 영역만 차지 ex) 2) 블록 요소: 한 줄을 차지 ex) h, 문단 - 그룹화해서 다른 스타일을 지정하는 방법(CSS 이용) ..
[HTML/개념] 개념 정리 02 - 목록, <a> 태그, 이미지, 주석 * 본 포스팅은 udemy [The Web Developer 부트캠프 2022] 강의를 듣고 작성하였습니다. 목록 - 숫자로 된 목록 ordered list 과 순서 없이 점으로 된 목록 unordered list - 두 태그 모두 중첩된 태그로 이루어져 있음 - 내부에 , , 태그 사용 가능 - 목록 내의 단일 아이템을 표시하는 태그 - 안에는 다른 태그들을 넣을 수 있음. li 태그, b 태그 등 태그 - 하이퍼링크 - 다른 웹페이지나 현재 페이지의 다른 위치, 주소 등으로 연결 - 연결을 위해서는 href 속성이 필요함 => a 태그 안에 들어가야 함! - 현재는 파일 프로토콜을 사용하고 있기 때문에 http를 넣어줘야 함 - 인라인 태그에 속함 => 새로운 줄에 만들어지지 않음 이미지 - 닫는 태..
[HTML/개념] 개념 정리 01 - Header, html 구조, VS Code 자동정렬 * 본 포스팅은 udemy [The Web Developer 부트캠프 2022] 강의를 듣고 작성하였습니다. HTML - 콘텐츠의 구조. 마크업 언어, 완전한 프로그래밍 언어는 아님. - 웹 페이지라는 문서에 마크업을 하기 위한 언어 또는 구문 - 논문에서 탄생함 HTML ELEMENTS 태그를 사용 제목 Heading - 한 페이지 당 h1은 오직 하나만 있어야 함. 또한 항상 최상위 제목이 되어야 함 - h1과 h2 없이는 h3가 존재할 수 없음 HTML 상용구 HTML Skeleton - 모든 html 페이지에 들어가야 함 - : html5를 사용하고 있다는 표식. html 의 최신 규격을 사용한다는 뜻 - 루트 요소. 문서의 최상위 요소. doctype을 제외한 모든 내용이 이 안에 들어가야함 -..
Visual Studio Code (VS Code) 설정 - 편집기 테마, 폰트 변경 우선 설정에 들어간다. 왼쪽 하단에 톱니바퀴 모양의 설정 아이콘을 선택해줘도 되고, 맥의 경우에는 cmd + , 를 눌러줘도 된다. 편집기 테마를 바꾸려면, 워크벤치(Workbench)의 칼라 테마(Color Theme)를 선택해주면 된다. 이 외에도 확장 기능이나 Visual Studio Code 웹사이트의 확장 메뉴를 통해 추가 테마를 설치할 수도 있다. 예를 들어서 나는 atom one dart theme를 다운받았는데, 설치되자마자 프로그램 상에서 해당 테마를 사용할 것인지 물어본다. 이렇게 해도 되고, 또는 아까 설정 메뉴에 다시 들어가서 선택할 수도 있다. 설치한 확장 프로그램에 따라서는 아이콘을 바꿀 수도 있다. 또다른 확장 프로그램이 궁금하다면, 아래 유튜브를 통해서도 확인 가능하다. ht..
[디자인] 폰트 추천 모음 구독하고 있는 디자인 인스타그램 계정이 있는데, 인스타 스토리로 폰트 추천을 받았고 많은 분들이 좋은 폰트들을 많이 추천해주셔서 기록해보고자 포스팅을 남긴다. 여기 있는 모든 폰트들은 인스타그램 @designus___ 에 올라온 스토리 글을 참고하였다. * 모든 폰트의 저작권은 사용 전 다시 한 번 확인바랍니다. - 프리텐다드 Pretendard https://cactus.tistory.com/306 Pretendard Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가.. cactus.tistor..
[Udemy] The Web Development 부트캠프 2022 공부 시작 오랜 숙원 사업이었던, 나만의 웹사이트 만들기. 웹 개발자가 되지 않더라도, 개인적으로 웹/앱/다른 응용콘텐츠들 중에 웹이 가장 기본이 된다고 생각을 하고 있고, 언젠가는 내 작업물들을 담은 포트폴리오 웹사이트를 제작하고 싶었었다. 그 일환으로 작년 이맘때쯤 웹 프론트엔드+백엔드 국비지원 학원을 다녔었는데, DB 들어갈 때 쯤 그만두게 되었고 이후엔 다른 일들로 바빠서 잠시 미뤄뒀었다. 그러다가 이번에 좋은 기회로 유데미에서 웹 개발 코스를 수강할 수 있게 되었다. 유데미 강의들은 할인 기간을 잘만 노리면 만원 대에 질높은 강의들을 수강할 수 있는데, 그래도 이 만얼마 하는 돈도 무시 못하니까.. 이렇게 무료로 들을 수 있는 기회를 적극 이용해서 이번 기회에 웹 개발을 처음부터 끝까지 공부해보고자 한다...
[JAVA/알고리즘] 자연수 뒤집어 배열로 만들기 https://programmers.co.kr/learn/courses/30/lessons/12932 코딩테스트 연습 - 자연수 뒤집어 배열로 만들기 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한 조건 n은 10,000,000,000이하인 자연수입니다. 입출력 예 n return 12345 programmers.co.kr import java.util.*; class Solution { public int[] solution(long n) { ArrayList answer = new ArrayList(); while (n > 0) { answer.add((int) (n % 10)); n /= 10; } r..