배이글

프로덕트 디자이너가 알면 좋은 CSS
01. CSS도 파일이다!index.html과 style.css 라는 이름의 파일을 일반적으로 많이 사용함. 02. CSS 파일 위치**head 태그 안에 link라는 이름으로 위치 CSS파일의 위치 "> ㄴ> ./style.css ㄴ> index.html과 같은 경로에 위치해야 함 03. CSS 만들기 h1 { color : brown ; ㄴ선언 (declaration) : 속성과 값을 합한 부분 } 1) 선택자 (selector): 어떤 HTML 요소에 스타일을 적용할지 선..

디자이너가 공부하는 HTML, OG Tag, Git을 통한 배포까지
강의 듣고 필기한 내용 정리 01. html 기본 태그들로 구조 잡고 홈페이지 내용 삽입하기index.html 02. OG Tag*** head 태그 안에 삽입하기 meta property="og:title" content="멋쟁이민주처럼"> meta property="og:description" content="개발연습중.."> meta property="og:image" content="./thumbnail.jpg"> title, description 적어주고 이미지 주소도 써주기.html과 같은 파일 안에 있다면 ./파일명.확장자 형태로! 03. 대망의 배포1) 깃허브 레포 생성레포 이름은 깃허브아이디.github.io(근데 꼭 이렇게 해야되는걸까? .. 선생님이 그렇게 하라고 하셨다..) ..

프로덕트 디자이너가 알면 좋은 HTML
HTML : 텍스트에 생명을 불어넣는 것 내용ㄱ 안녕하세요 :) ㄴ여는태그 ㄴ닫는태그 1. HTML 속성class="memo">안녕하세요 :) : HTML 속성 속성이름="속성값" => 여러 속성을 작성할 때는 한 칸씩 띄고 작성하면 됨 2. HTML 주석: 작성은 되어있는 코드를 브라우저에 뜨지 않도록 무시 임금님 귀는 당나귀 귀! --> but.. 브라우저에 나오지 않는다고 주석을 남용하면 안됨.html 파일은 주석을 포함한 모든 정보를 가져오기 때문에, 보안에 유의해야 함. 3. HTML 문서구조: Boilerplate라고 통칭함. : html문서라는 것을 선언. 일반적으로 제일 첫줄에 기록. : 어떤 언어로 시..

디자이너의 git & github 고군분투 정복기 2
01Git 동작 흐름과 구성 요소 [local 영역] = 자기자신- working directory : 현재 작업중인 프로젝트가 위치한 디렉토리. 모든 작업은 여기서부터 시작. 내가 작성한 코드들이 담긴 파일이라고 보면 됨. (명령어 init)- staging area : commit 할 파일의 예비 저장소. *commit : 소스가 변경되거나 새로 작성이 되면 사진찍듯이 로컬 저장소에 저장됨. 이 1건의 커밋으로 변경되는 것을 버전이라고 함.- local repository(저장소) : 존재하지만 눈에 보이지는 않음. working directory로부터 커밋한 내용들이 저장. 특정 시점의 변경사항으로 돌아갈 수 있음. (복원 가능) [remote 영역]- github 등 외부에 위치한 원격 저장소..

디자이너의 git & github 고군분투 정복기
01Git : 소스 이력 추적을 위한 버전 관리 시스템Github : git 프로젝트를 관리하는 저장소 제공 02Git 설치법 1) 터미널 실행2) xcode-select --install 입력 후 실행3) brew 설치4) git credential manager 설치 ...라고 한다. 차근차근 따라해보자.. 1) 터미널 및 터미널 대체제 설치 후 실행 강의에서는 터미널 대신 iTerm을 설치하라고 했는데, 나는 과외쌤ㅋ인 멋쟁이 서버개발자님의 추천을 받아 Warp 라는 다른 프로그램을 설치했다! (왜 굳이 터미널 두고 다른걸 쓰는지 궁금해서 과외쌤 및 개발자 칭긔들에게 물어봤다.)iTerm, Warp 이 두 프로그램은 Mac의 기본 터미널 대신 활용할 수 있는 터미널 프로그램들이며, 다양한 확..

디자이너가 이해하는 HTML, CSS, JavaScript
01HTML, CSS, JS HTML : 구조 / 내용CSS { } : 브라우저에 내용이 보여지는 모양과 스타일JS { ; } : 사용자의 액션에 따라 동적으로 보여지는 이벤트 / 반응 02HTML (.html)= HyperText Markup Language문서 작성 시, MS에 word를 많이 사용함.word에서는 텍스트의 서식을 설정할 수 있는데, 이런 텍스트들의 역할이 다 정해져 있음! (본문, 제목 등)html은 이런 워드와 구성이 비슷함. HyperText : 웹에서 다뤄지는 텍스트들이 정적 X, 링크를 가지는 형태.Markup : 텍스트의 구조 혹은 의미를 부여- Tag라는 형식 사용 (여는 태그, 닫는 태그)- ex. 제목 이런거~ 03CSS= Cascading Style S..

디자이너가 이해하는 IP, Port 그리고 DNS
01네트워크란?막연한 느낌이지만, 웹서비스의 밑바탕이자 구조이기 때문에 알아둘 필요가 있다! 컴퓨터가 두 대 있다. 이 두 대를 연결한다면?-> 서로 필요한 데이터를 송/수신 할 수 있다. = 상호작용 가능-> 두 대 이상의 컴퓨터가 연결된 체계를 네트워크라고 한다. (인터넷이 연결되지 않아도요!) 그러니, 네트워크란?두 대 이상의 컴퓨터가 연결된 통신망이다.어떻게 데이터가 오가는지 이해하는 것이 핵심! 02네트워크의 구성요소 개별 컴퓨터 : host여러 대의 컴퓨터를 하나의 네트워크망 안에 연결하기 위해서는, 이를 묶어주는 장비가 필요 : 스위치하지만, 스위치는 다른 네트워크에는 접근할 수 없다.그래서 라우터(aka 공유기)가 등장! (차별점 : 서로 다른 네트워크 간의 통신이 가능.) 네트워크와 ..