기기에 따라 뷰포트가 다른 걸 어떻게 해야할까?

오랜만에 쓰는 블로그 글 2022.1월 웹디자인 스터디 중이다. 반응형 적응형이 아닌 아직 초기단계이므로 데스크탑(PC)전용으로 제작하고 있다. 웹디자인은 위처럼 많은 페이지를 만들지 않고 마무리하였고, 이제 코딩을 하는데 처음부터 난관에 봉착했다. PC는 당연히 1920*1080일거라는 생각으로 웹페이지 크기를 1920*1080으로 만들었는데 코딩을 하면서 웹브라우저의 크기를 재보니 내 기기에서는 넘쳐흐르는 크기였다. 왜지?? pc는 다 1920..아닌가? 그래서 rectangle을 만들어서 width를 조정해가며 크기를 맞춰보았다. 웬걸. 1440정도였다. 브라우저가 크롬이어서 위의 헤더나, 우측의 스크롤 범위를 고려하더라도 1920*1080은 절대 될 수없었다. 왠지 피그마에 데스크탑 사이즈가 14..

2022.01.26

생활코딩 WEB2 - JavaScript 01 ~ 05

Html과 css로는 정적인 문서밖에 할 수 없다. 그냥 정보만 올리기에는 이걸로 충분하지만 웹페이지와 상호작용하기 위해서는 추가적인 언어가 필요하다. 바로 javascript. === 1===2 비교연산자는 좌항과 우항이 있다. 좌항과 우항을 합하여 어떠한 값을 낸다. 비교연산자 "="은 좌항과 우항의 관계에 따라 T/F의 값을 내는데 이 값이 불리언(boolean)이다. 1. 문자열 Str 2. 숫자 Number 3. 불리언 Boolean 17. 조건문의 활용 night와 day의 버튼을 하나로 하고 화면이 day상태일때 night상태의 버튼을 누르면 night상태의 화면과 day버튼으로 전환되는 토글 버튼을 만들자.

2021.10.05

개자이너 되기 프로젝트...

디자이너도 코딩 공부해야할까? 디자인과로 들어온지 2년되던 해.. 커리큘럼이 거즘 디자인학부였던 학교에서 난 여태 전공을 확정하지 못했다. 4가지 트랙 중 시각도 해보고, 영상, 3D, 공간까지 겪어본 결과. (제품 제외) 공간은 해볼 엄두가 나지 않았고, 시각도 좋지만 영상, 3D부문이 재밌어보였으므로 영상을 공부했었다. 그러나 고된 영상제작과정 + 기술적인 한계 + 전공을 잘 살릴 수 있을까의 대한 고민 + 3D와 영상특화가 되어있지 않은 커리큘럼으로 점점 흥미가 떨어져갔다. 다른 학교로 넘어갈만큼의 재미도 못 느꼈고. 나중에 영상을 하고싶은 마음이 팍 식으면서 다음으로 관심있던 웹을 전공하고 싶었다. 그래서 2학년에 "서비스디자인공학"에 복수전공을 신청하고 3학년에 들면서 브랜딩과 uxui를 경험했..

2021.08.04

웹/앱 디자인의 단위 개념 총정리

어도비XD에서 디자인을 하고 코딩으로 구현할 때 항상 애매한 구간을 마주하게 된다.. 그건 바로 폰트 사이즈는 pt인가 dp인가 px인가...... 화면은 안드로이드를 기준으로 할 땐 dp를 사용하는데 아이콘도 dp니까 폰트도 dp인가...???? 그럼 코딩으로 옮길 땐 어떻게 해야하지?? 그래서 dp sp pt px 등등의 개념을 공부해보자 아래 내용은 youtube Ami Design Tv의 내용임. https://youtu.be/TqJm2TM9JnA 운영체제 디자인 단위 정리 DP, SP는 안드로이드에서 많이 사용하는 단위, PT 는 IOS에서 사용하는 단위이다. 1. DP (Device-independent Pixel) 디바이스 크기에 의존하지 않은 픽셀 단위 디바이스가 아무리 달라도 보이는 크기..

2021.07.18

기본 HTML 문서 형식의 완성

모바일 웹 화면 구성 요소 1. HTML (Hyper Text Markup Language) - 기본적인 포맷형식을 가지고 있음. 2. CSS (Cascading Style Sheet) - HTML에 스타일을 지정 (디자인) 3. JavaScript - 동적인 구현을 담당. - 자바의 문법이 어려운 부분이 있어서 JQuery Plugins을 이용함. HTML 기본 골격 //html5 버전임을 표시 //기본 골조 //본문형식

2021.07.13

생활코딩 WEB2 - CSS 01 ~ 10

html의 태그에 css를 넣어보자 생활코딩 짱짱 여기서 글자색을 바꾼다면? 생활코딩 짱짱 head에 css 언어를 삽입해보자. 그런데 문단이 1억개가 있다면 어떡할까? 그럼 1억개의 속성을 다 적어줘야 할까? 아니다. CSS의 중요한 2가지. 효과; 와 선택자{ } css selector 선택자 예를 들어 를 기본적으로 전부 black; 으로 만들어두고 이미 클릭한 것은 gray. 현재 보는 창은 red로 설정한다고 가정하자. 그럼 일단 는 black이니까 a { color: black; } .... 첫번째 두번째 세번째 그럼 grey와 red를 어떻게 설정할까? .class 와 #id 먼저 grey부터, class라는 속성이 등장한다! a { color: black; } .select { color:..

2021.07.13