전체 글
IT 5분 잡학사전 2주 챌린지 3일차.
IT 5분 잡학사전 2주 챌린지 3일차.
2023.08.28[ IT 5분 잡학사전 2주 챌린지 3일차 ] *오류를 고치기 전에 오류가 왜 생겼는지를 알아야 할것.초보가 절대 안 하는 것이 하나 있는데 - 오류메세지 읽기. 실수 1. 공부만 하고 실제로 무언가 만들어 보지 않는것.실수 2. 항상 프로그래밍을 할 준비를 더 해야 한다고 생각함.뭐든지 간에 만들기 시작하면 일단 완성된 결과물이 눈앞에 나타난다.자신의 성과를 측정하고 싶다면 일단 뭐든지 좋으니 만들어보자(: *세상에서 가장 난해한 프로그래밍 언어 (ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 여기서 위로받음) Brainfuck-> 사용하는 사람의 두뇌 한계를 시험할 정도로 난도가 높다.-> 너무 미니멀리즘하기에.ArnoldCShakespeareLOLCODEemoji-gramming *2가지 방법으로 번역되는 프로그래..
IT 5분 잡학사전 2주 챌린지 2일차.
IT 5분 잡학사전 2주 챌린지 2일차.
2023.08.27[ IT 5분 잡학사전 2주 챌린지 2일차 ] > 책에서 기억하고 싶은 내용논리적으로 생각하기를 좋아하고 문제 해결을 즐기는 성향 -> 개발자의 삶은 정말 외로운 싸움의 연속(:코드가 왜 작동하지 않는지 고민하다가 자괴감but 다시 코드 수정 ㅋㅋㅋㅋ (공감..): 프로그래밍을 하는 과정자체는 괴롭지만, 성취감은 엄청나다는 것✨프로그래밍은 이해하는 과정이 암기보다 훨씬 중요: 새로운 프로그래밍 지식을 공부시, 과정을 이해하는 데 시간을 많이 소요함. 천재만 개발자가 될 수 있는게 아니다.이 세상엔 보통 실력을 가진 개발자가 훨씬 많고,이런 사람들이 세상을 만든다.*개발에서는 재능이 아니라 포기하지 않는게 더 중요하다.: 끈기, 성실함이 재능을 이긴다. (개발은 재능의 세계가 아니라 근면 성실의 세계!..
IT 5분 잡학사전 2주 챌린지 1일차.
IT 5분 잡학사전 2주 챌린지 1일차.
2023.08.25[ IT 5분 잡학사전 2주 챌린지 1일차. ] - 책 인증 (밀리의서재) To be a growing & glowing designer✨모든 일이 다 잘될거라는 확신이 드는 이 순간,오늘 해야할 아이들 + 새롭게 시작하는 요 아이에게도감사함을 전하고 싶다☺️
저작권 없는 무료 이미지 사이트 + 누끼 투명 배경 [상업용 무료]
저작권 없는 무료 이미지 사이트 + 누끼 투명 배경 [상업용 무료]
2023.01.08저작권 없는 무료 이미지 사이트 추천 1. Unsplash: 개인적으로 가장 많이 애용했던 사이트. 고화질 이미지 다운 가능. Beautiful Free Images & Pictures | UnsplashBeautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.unsplash.com무료이미지사이트 추천2. Pexels : Unsplash 다음으로 추천하고 싶은 사이트. 이미지 외에 동영상도 무료 다운 가능. 무료이미지, 저작권 없는 이미지, 무료 이미지 사이트 | Pexels www.pexels.com누끼 투명 배경3. Burst by S..
animation fill mode 연습
animation fill mode 연습
2022.07.09none forwards both both animation-fill-mode의 속성값이 없을 때는 none animation-fill-mode:forwards 속성값일 때는 100%스타일에서 끝나서 멈춤 animation-fill-mode:backwards 속성값일 때는 0%속성값을 먼저 가지고 있다가 animation-delay 가 되고 play animation-fill-mode:both 속성값일 때는 0%속성값을 먼저 가지고 있다가 animation-delay가 되고 play가 된 후 100%스타일에서 끝나서 멈춤
2D transform / animation 속성 활용
2D transform / animation 속성 활용
2022.07.07[ 2D transform 속성의 활용 ] transform:translate(가로이동거리px, 세로이동거리px) transform:translateX(가로이동거리px) transform:translateY(세로이동거리px) 나는 텍스트다 나는 텍스트다 나는 텍스트다 나는 텍스트다 transform:scale(가로비율, 세로비율)-->1이 100%기준으로 0.5면 50%, 1.5이면 150% transform:scaleX(가로비율)..
웹폰트(TTF, OTF, WOFF, SVG, EOT) / transition
웹폰트(TTF, OTF, WOFF, SVG, EOT) / transition
2022.07.06웹폰트란? 디자인글꼴을 다운받아서 디자이너의 컴퓨터에 설치하고 설치한 글꼴을 사용자의 컴퓨터에도 사용자가 웹페이지에 접속하는 순간 자동으로 다운을 받아 설치하여 해당 폰트가 구현되도록 하는 것 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet non consequatur iusto minima pariatur, laboriosam modi, asperiores possimus maiores rerum distinctio ducimus esse ad veniam deserunt cum mollitia. Quibusdam, vitae. 디자인글꼴을 다운받아서 디자이너의 컴퓨터에 설치하고 설치한 글꼴을 ..
gnb 연습 / navigation bar
gnb 연습 / navigation bar
2022.07.05intro home event product limited party cover : 그림을 늘려 이미지로 최대한 배경을 채우는 것contain : content area 안에서 최대한 fit하게 맞추는 것 menu1 ..
Sprite 속성 / Sprite animation 연습
Sprite 속성 / Sprite animation 연습
2022.07.02[ Sprite ] 여러개의 이미지 소스를 하나의 이미지로 합친후( 비슷한 성격의 배경 이미지를 하나의 파일로 제작 후에 )background-position 등의 css속성을 통해 배경이미지를 렌더링하는 방법이다. 이미지가 많은 웹 페이지는 여러 서버 요청을 로드하고 생성하는 데 시간이 오래 걸릴 수 있으나, 이미지 스프라이트를 사용하면 이미지 다운로드에 걸리는 시간과 http요청 수가 감소하고 웹 프론트엔드의 성능을 최적화한다(: [ Sprite 속성연습에 사용할 배경이미지 첫번째 ] [ Sprite 속성연습에 사용할 배경이미지 두번째 ][ 위에 이미지를 이용하여 sprites로 가져오기 ] ******** 이미지의 시작은 x좌표 : 0, y좌표 : 0 이다.Image Sprite 중에..
position : absolute / fixed / relative / static / z-index
position : absolute / fixed / relative / static / z-index
2022.06.30[ Position 속성 ] # absolute : 절대적인 # fixed : 고정된 # relative : 상대적인 # static : 정지된 [ position_absolute 속성값 ] box1 box2 box3 box4 box5 position: aboslute;속성은 부모에 position설정값이 없을 때에는 브라우저의 를 기준으로 자리를 잡는다. 그런데 부모요소에 position속성값이 생기면(static을 제외) 부모를 기준으로 자리를 다시 재정렬한다!! # 절대위치(absolute position)은 고정위치가 view port를 기준으로 위치를 결정하는 것과 비슷하게 동작한..
상태선택자 / 반응선택자 / 구조선택자 / placeholder / nth-child
상태선택자 / 반응선택자 / 구조선택자 / placeholder / nth-child
2022.06.29[ 상태선택자 ] 거의 쓰진 않지만 일단 알아두자. # 비밀번호는 내가 못바꾸게 해놓고 싶을 때?사용할 수 없게 하는 속성은 disabled="disabled"속성명과 속성값이 같으면 하나만 써도 가능! # input : disabled 는사용할수 없게 한 속성을 선택하는 상태선택자임. # placeholder 속성: 가상의 값을 넣어주는것. # 커서가 들어가 있는 상태를: focus라고 함. 이름: 아이디: 비밀번호: # 사실 위에것들 잘 안씀. 그나마 쓰게 되는건input:focus 사용선택자다.padding을 줘서 박스크기를 크게 한다던지...아니면, 글씨의 색깔을 다르게 줘서 내가 뭔가 입력하는 것들을다른색상으로 입력이 된다던지...혹은 bo..
레이아웃 연습하기 / Z 레이아웃
레이아웃 연습하기 / Z 레이아웃
2022.06.28# 사람의 눈이 많이 가는데 컨텐츠를 배치:): F레이아웃 # F레이아웃을 가지고있는 web site많음~ 요즘 트렌드는 메인에 큰 이미지라던지 큰 동영상이라던지.. 그런것들 배치하는 구조+_+: Z레이아웃 F보다 최근들어 더 많이 만들어지고 있다.웬만한 트렌드를 반영하는 웹사이트 (특히, 반응형 웹)들은carousel을 쓰면서 이미지를 크게 배치하고 있다. 사람들의 시선을 끌기위해. # 그런데 하나만 배치하기에는 그 공간이 아까우니까...여러개를 배치할 수 있는 방법으로 버튼형식 -> indicator button. 주력하는 아이템 or 프로모션을 할때최대한 많은 참여를 끌기위해(창출되는 이익을 위해)상단에 carousel로 배치하고있는것:) 레이아웃을 짤 때,어떤 레이아웃을 짤건지도 생각해봐야하는..