본문 바로가기

전체 글40

생활코딩 WEB2 - CSS (3) 2022-01-11 반응형 디자인 / CSS 코드의 재사용 반응형 디자인 화면의 크기에 따라서 각 요소들이 반응하여 동작하는 디자인을 뜻한다. 미디어 쿼리(Media Query) 어떤 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능하다. 화면 크기에 따라서 특정 요소를 보이거나 안 보이게 하려면 우선 이것의 크기가 어느 정도인지 알아야 한다. 웹페이지에서 오른쪽 클릭을 통해 구글개발자 도구의 검사를 들어가보자. 화면 크기를 조정할 경우 상단 우측 모서리에 화면 크기가 나온다. 특정 요소를 화면 사이즈에 따라 보이거나 안보이게 하는 코드는 아래와 같다. /* screen width < 800px n보다 작다면 최대가 n이란 뜻 */ @media (max-width : 800px) /* scr.. 2022. 1. 11.
VS Code HTML 자동완성 템플릿 사용하기 HTML을 작성하다 보면 항상 동일하게 입력해야하는 부분이 있다. 그걸 Visual Studio Code에서 매번 칠 필요없이 양식을 불러올 수 있는데 어떻게 하는지 알아보자. 1. 하단에 HTML로 설정이 되어 있는지 확인 필요 우선 사용하고자 하는 HTML 파일을 생성한 후, VS Code 하단에 설정을 확인해보자. HTML 이라고 제대로 설정되어 있으면 괜찮지만 그렇지 않으면 HTML 으로 바꿔줘야 한다. 2. ! + Tab 혹은 html:5 입력 ! + Tab 혹은 html:5 를 작성하게 되면, VS Code에 입력되어 있던 기존 HTML 템플릿이 자동완성된다. 3. 템플릿 수정하기 그럼 이 자동완성 된 템플릿은 어떻게 수정할까? VS Code 하단에 위치한 설정 아이콘을 눌러 사용자 코드 조각.. 2022. 1. 11.
생활코딩 WEB2 - CSS (2) 2022-01-10 박스모델 / 그리드 Padding 부분의 숫자를 더블 클릭하고 방향키 위,아래를 이용해 숫자를 변경할 수 있다. 실시간으로 바로바로 바뀌는 값을 확인 가능! #grid { display: grid; grid-template-columns: 160px 1fr; } #article { padding-left: 25px; } 가방 후보군 DANKER (댄커) DANKER (댄커) DANKER (댄커) 1. DANKER (댄커) (U0323CBP92) 🔗 브랜드 : DANKER (댄커) 가격 : 80,460 비고 : 노트북수납칸이 있음 그럼 하단 에 id값 article을 추가해주고, 웹페이지를 보면서 적당한 padding-left 값을 style에 추가해주도록 하자. #ol → #grid .. 2022. 1. 10.
생활코딩 WEB2 - CSS (1) 2022-01-09 CSS 등장 이전의 상황 / CSS의 등장 / 혁명적 변화 / CSS 속성을 스스로 알아내는 방법 / CSS 선택자를 스스로 알아내는 방법 CSS의 시작 HTML에 디자인 태그를 추가하지만 한계를 깨닫고, 디자인에 최적화 된 완전히 새로운 언어를 만들은 것이 CSS 이다. 박스모델 우리가 원하고자 하는 레이아웃의 화면분할을 위해서 박스모델을 사용한다. Margin은 다른 Box Model과의 거리간격 Border은 Box Model의 경계선 Padding은 Context와 Border 와의 거리간격 Context는 Box Model의 내부 페이지 오른쪽 클릭을 했을 때 나오는 '검사'를 클릭하면 Box Model을 확인할 수 있다. 미래의 가방 후보군 1. DANKER (댄커) (U0.. 2022. 1. 9.
JS Code Extension 플러그인 추천 1. Material theme 작업환경 테마 설정 가능 2. Material icon theme 파일 종류 별로 아이콘 가시성 증대 3. Prettier 코드 포맷 설정. Cmd + , 로 이동 4. bracekt pair colorizer 코드 괄호마다 색상 표시 5. Indent-rainbow 들여쓰기 부분마다 색상 표시 6. Auto rename tag 열린태그 수정 시 닫힌태그 자동 수정 7. CSS Peek HTML에 적용 된 CSS 바로찾기 가능 (Cmd + click) 8. HTML CSS Support 만들어놓은 CSS를 HTML에서 사용 가능 9. Live Server 웹에서 프로젝트 확인 가능. 커맨드 팔렛트에 >live Server: Open with Live Server 입력하고 .. 2022. 1. 8.
Bitnami MAMP로 HTML 연결하기 1. bitnami MAMP 설치하기 https://bitnami.com/stack/mamp MAMP MAMP packaged by Bitnami provides a complete, fully-integrated and ready to run MAMP development environment. In addition to PHP, MySQL and Apache, it includes FastCGI, OpenSSL, phpMyAdmin, ModSecurity, SQLite, ImageMagick, xDebug, Xcache, OpenLDAP, ModSec bitnami.com 사이트에 접속해서 아래쪽으로 내리면 이렇게 버전별로 다운로드 버튼이 있다. 최신버전으로 다운로드를 해주자. 다운로드를 다 받으면 .. 2022. 1. 7.
GitHub로 HTML 업로드부터 삭제, Pages 배포와 404에러 대처 2020-01-06 웹호스팅 (GitHub Pages) 1. 깃허브에서 New repository 생성하기 깃허브 상단의 내 사진 옆에 보면 + 아이콘이 있다. 그걸 클릭하면 드롭다운 메뉴가 나오는데 그 중에서 New repository를 선택해 준다. 2. Repository 내용 입력하고 만들기 Owner는 나로 자동 선택되어 있고, Repository name은 비어있으니 꼭 써주도록 하자. Initialize this reposityory with: 은 옵션이다. 선택하지 않아도 Repository는 생성할 수 있다. 하지만 Add a README file을 선택하여야 마음대로 파일을 업로드 할 수 있으니 선택하자. 3. 파일 올리기 Repository를 생성하고 나면 이런 화면이 뜨는데 파일을 .. 2022. 1. 6.
생활코딩 WEB1 - HTML & Internet (3) 2022-01-05 부모 자식과 목록 / 문서의 구조와 슈퍼스타들 / HTML 태그의 제왕 / 웹사이트 완성 1. 속해 있는 태그들 opentutorials parent 태그에 대해서 child 태그를 자식태그라고 부른다. 이처럼 한 태그에 대해 속해 있는 태그들이 있다. 1.금호 2.은하 3.동해 4.마요 태그는 태그를 꼭 필요로 한다. 목차는 영어로 list이고, 리스트를 만드는 태그는 이다. 그런데 누군가가 와서, 2.은하를 빼라고 한다. 그럼 우리는 중간에 끼여있는 2.은하를 빼고 다시 숫자를 붙여야 하는 상황이 되는데, 이럴 경우를 위해 이 존재한다. 정의와 쓰임새 태그는 순서가 있는 리스트를 정의한다. 순서가 있는 리스트는 숫자나 알파벳일 수 있다. 태그는 각각의 항목 리스트에 사용 된다. T.. 2022. 1. 5.
생활코딩 WEB1 - HTML & Internet (2) 2022-01-04 혁명적인 변화 / 통계에 기반한 학습 / 줄바꿈 / HTML이 중요한 이유 / 최후의 문법 속성과 img 1. 태그 공부하기 https://www.w3.org/ World Wide Web Consortium (W3C) Happy holidays from the World Wide Web Consortium! 13 December 2021 | Archive As 2021 is drawing to an end, and the impact of the global pandemic continues to be a weighty blow, this is the second year the W3C community has not really seen each other. Yet, www.w3.o.. 2022. 1. 4.
생활코딩 WEB1 - HTML & Internet (1) 2022-01-03 프로젝트의 동기 / 기획 / 코딩과 HTML / HTML 코딩 실습 환경 준비 / 기본 문법 - 태그 JAVA를 독학해보려고 하다가 알게 된 생활코딩! https://opentutorials.org/course JAVA 첫 강의를 보려는데 선행 학습으로 WEB1 강의를 우선 보면 좋다고 적혀있어서 시작하게 되었다. 아직까지는 목표로 하는 방향성(프론트엔드/백엔드)이 없어서 이것저것 다 해보면 좋을 것 같다고 생각하기에 완강을 목표로 시작해본다. 이 강의를 완강할 때 쯤이면 나는 무엇을 할 수 있을까? 부디 지치지 않고 매 강의에 흥미를 느끼며 개발을 사랑하는 개발자가 될 수 있기를 바란다 💫 오늘의 배움 Hypertext Markup Language (HTML) is the stand.. 2022. 1. 4.

티스토리툴바