본문 바로가기

Archived

(18)
IntelliJ 와 Git Bash 연동하기 스프링 연습 프로젝트를 진행하다가 터미널에 깃을 띄우고 싶었다. 아래대로 따라하면 된다. 1. 기본 모습은 아래처럼 cmd 화면. 2. File>Settings 진입 3. shell path를 cmd.exe에서 "C:\Program Files\Git\bin\sh.exe" -login -i 로 변경. 4. 터미널 재시작
반응형 웹#5 px를 %로 바꾸기: 가변폰트 *사전지식 rem의 경우 최상위 .root의 font size를 상속하고, em의 경우 부모 요소의 폰트 사이즈를 상속한다. 가변폰트 반응형 웹에서 글자 크기를 상대적인 단위로 사용할 때, 상속 문제를 해결해주는 방법을 가변 폰트라고 함. (가변 폰트를 적용할 글자 크깃값)/(적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트 값 em 부모가 64px 이고 자식이 32px되려면 부모는 4em, 자식은 0.5em이다 왜냐면 32/64*0.2 = 0.5이기 때문이다. 혹은 자식을 50%라고 지정해줘도 괜찮다. 가변 폰트1 가변 폰트2 매번 이 난리를 치지 않기 위해 등장한 것이 rem rem rem 단위는 웹 문서의 시작인 html을 기준으로 한다. 상속 문제가 발생하지 않아서 유용! 가변 폰트1..
반응형 웹#4 px를 %로 바꾸기. 방법1: (가변 패딩을 적용할 패딩값)/(적용할 박스를 감싸고 있는 박스의 가로 너비) X 100 = (가변 패딩값) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eius labore perferendis quia, cumque recusandae. Ipsam voluptatem reiciendis aliquid, illo illum est unde placeat iure nobis ratione soluta atque aut!Quo, placeat. Accusantium autem error soluta architecto labore quidem, eius aliquid? Molestiae, assumenda ratione la..
반응형 웹 #03 px를 %로 바꾸기(1) 가변 그리드 공식 이해하기. -가변 그리드라는 기술? 정해져있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술. -( 가변 크기로 만들 박스의 너비)/(가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) X 100 = 가변 크기의 값. 예시 box1: 300px, wrap: 960px의 비율을 유지한다고 하자. (300/920)*100=31.25 가변 마진과 가변 패딩 이해하기 -(가변 마진을 적용할 마진 값)/(적용할 박스를 감싸고 있는 박스의 가로 넓이)X100 = 가변 마진값 예시 box1, box2: 300px (width) wrap: 960px (width) 의 비율을 유지한다고 하자. box1의 오른쪽에 가변 넓이 360px의 margin을 주자. 300/960*100=31.25 3..
반응형 웹 #2 기본 개념 이해(2) 반응형 웹 제작 핵심 기술 : 가변 그리드 가변 그리드는 웹 사이트를 제작할때 화면의 크기에 상관없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술. hello 미디어 쿼리 미디어의 화면 크기에 따라 웹사이트를 이에 맞게 변경하는 기술. *쿼리: 컴퓨터에게 질의 하는 것. hello 뷰포트 화면에 보이는 영역을 제어하는 기술. 미디어 쿼리로 화면 크기를 감지해야할 때 꼭 필요. 데스크톱은 사용자가 지정한 해상도가 보이는 영역이 되지만, 스마트 기기는 기본 설정값이 보이는 영역으로 설정됨. 따라서 미디어 쿼리를 사용해도 스마트 기기의 실제 화면 크기를 감지 못하므로 반응형 웹 제작시 반.드.시!! 필요!
반응형 웹 #1 기본 개념 이해(1) 모바일 기기에 적합한 뷰를 보여주고자. PC버전, 모바일버전 두개 따로 만들어야하는 수고를 덜기 위해 반응형 웹 등장. 1. 즉, 반응형웹은 비용 절감의 측면에서 등장. 2. 마케팅에서 최적화되어있다. 환경이나 기기에 따라 최적화된 구조의 웹사이트를 보여줌. -> 전달하고자 하는 내용 확실하게 표현 가능. 3. 검색 엔진 최적화 모바일 버전, PC 버전 주소가 두개일 경우, 검색 결과에서 상위권에 배치되기 힘들다. 하나의 주소(파일)로만 이루어져 있으면 검색결과에 좀 더 잘 노출 될 수 있다. 4. 미래지향적 어떤 기기가 나올지 모르는 상황에서 가장 좋은 접근법. 5. 예시 5.1 스키니타이 넥타이를 판매하는 회사. 쇼핑몰의 경우 결제 등 시스템이 복잡해서 반응형으로 개발이 어렵다. 스키니 타이는 이러한..
#0. Dummy text, dummy image 작성 방법 1. Dummy text만들기 1) html body 사이에 lorem 친 후 tab키 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis facere sit unde fuga quasi earum, autem error temporibus magnam molestias quisquam accusantium provident voluptatum, nemodolorem. Fugiat perspiciatis eum explicabo? 2) lorem5 입력후 tab치기 Lorem ipsum dolor sit amet consectetur. 여기서 숫자는 단어 개수. 이렇게 결과물 만들어줌. 2. Dummy Image 만들기 2.1 뒤의 ..
버전 표기법(SemVer): 소프트웨어 버전 네이밍이 만들어지는 방법 출처: https://youtu.be/FPSZ9ao9cFo 내가 너무 재밌게 따라가고 있는 니꼬 선생님! 유튜브도 항상 챙겨보는데 오늘에서야 이 비디오 클립이 있는걸 알았다. (왜지. 날짜는 8월인데... 왜 난 이제야 본 것...! 난 무엇을 한 것인가! - 응 GRE 공부한다고 난리칠 때였지..) 무튼 버전 관리법을 여기서 간단히 정리해보자-! version 16.8.6과 같은 네이밍 방식을 semver(센버)라고 한다. SemVer = Semantic Versioning Specification 이 방식을 따르는 2 회사 : React, Django 1. 16의 의미 거의 새로운 변화가 해당 라이브러리에 일어남. e.g. 장고 1.10에서 장고 2.1로 갔더니 코드 망가짐. -> 코드 업그레이드 해..