전체 글137 [코딩 공부_74] 한화 솔루션/케미칼 클론코딩(미완성) 오늘은 한화 솔루션/케미칼 클론 코딩을 하였다 너무너무 빨라서 따라가기 너무 힘들었다,, 속도에 적응할 거 같으면 빨라지구 빨라지구 빨라진다 😂 집중해서해도 너무너무 빨랐따 ㅠㅠ 그래도 이만큼 결과가 나오니 뿌듯은 만땅! ** 홈페이지를 만들 때, 기본 재료 >> 폴더 : image / css 파일 : index.html / main.css / responsive.css / reset.css / layout.css / common.css 위 재료를 정리하면서 사용해야한다! 코딩은 정리가 반인 거 같다 엉망진창으로 정리를 해버리면 엄청 어려워지고, 정리를 가지런하게 예쁘게! 해두면 쉽게 할 수 있다!! 위 재료를 이용해서 한화 솔루션/케미칼 클론코딩을 해보았다!! 아직 미완성이다 header와 footer.. 2021. 5. 11. [코딩 공부_73] 반응형 웹, 넷플릭스 실습하기 반응형 웹, 넷플릭스 실습을 하였다 근데 화면 크기를 조정할 때마다 header:after로 그라데이션 준 부분이 자꾸 움직이는 것이었다.. 그래서 거의 3시간 넘게 그거 가지고 씨름하다가 도저히 못풀겠어서 그냥 잘래 하구 잤다 ㅎㅎㅋㅋ 오늘 승부를 보자하고 키고 10분도 안되서 해결했다,, 생각보다 너무 허무했다 ,,, 그냥 height를 100%줬으면 된건데 난 뭣하러 ......... ㅠㅠㅠ???? 그랬을까 싶다 .. 그래도 후련하다 하하 netflix 강철부대 Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem hic sapiente unde culpa asperiores repudiandae quas, voluptate voluptatem.. 2021. 5. 10. [코딩 공부_72] 반응형 웹 실습하기 3 오늘은 반응형 웹을 실습하기 위해 내 사랑 무민은 이용해서 간단하게 만들어 보았다 재밌지만 힘들다 media query를 사용할때 {} 열림 닫힘을 잘봐야될거같다 닫혀있는데 밑에다가 media query안에 넣어야할거 줄줄 적어놓고 어! 버그생겼다 !! 이러고 있었으니 .....ㅠㅠ menu1 menu2 menu3 2021. 5. 9. [디자인_21] 전통문양 패턴으로 이벤트 홍보 배너 만들기 2021. 5. 8. [코딩 공부_71] 반응형 웹 실습하기 2 반응형 웹을 실습하는 시간을 가졌다 요새 자꾸 이상한 오타로 시간을 지체하고 있다.. 수업시간에 하다보면 오타때문에 안되는 경우가 많은데 그럴때는 그냥 슥 넘기고 해야하지만 그게 잘안된다 😥 오류가 떴는데 그냥 넘기고 다른 걸 하는게 너무 힘들다 ㅠㅠ.. 그래서 시간이 더 오래 걸리는 거 같다.. * 알파카 헤더 실습할 떄 너무 힘들었다,, 작아졌을 때 btn-toggle 부분을 클릭하면 menu가 나와야하는데 안나와서 고생을 많이 했지만 역시 오타떄문이었다.. 노트북 키보드에서 그냥 컴퓨터 키보드라해야하나 그런 키보드로 바꾸고 난 뒤부터 오타가 엄청 나고 있다 ㅠㅠ.. 얼른 적응해야겠다.. 2021. 5. 8. [코딩 공부_70] **media query 순서 / 반응형 웹 실습하기_1 @media query를 사용할 때, 주의할 점!! ① css는 위에서 아래로 실행한다 > breakpoint도 순서를 지켜야 한다 ② media query의 조건이 맞으면 코드가 적용된다 > 순서에 맞게 작성 필요 ③ 데스크탑이 먼저 일 때는 max-width 사용하고, 모바일이 먼저 일 때는 min-width을 사용한다 * max-width 사용시 스크린이 큰게 위로 와야한다 * min-width 사용시 스크린이 작은게 위로 와야한다 desktop mobile 가로 배치(float, inline-block) 세로 배치(none, block) px % 긴 걸 줄바꿈(br) 피카츄 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum repu.. 2021. 5. 8. [코딩 공부_69] css의 클래스명에 대하여 네이밍 정하기? 코딩을 할 때 가장 중요한 부분이라 생각한다 특별하게 이 네이밍으로 하세요! 하는 건 없지만 기준없이 네이밍을 정하게 되면 스타일을 수정하거나 추가할 때, 헷갈리고 코드가 엉망이 될 수 있다 그리고 함께 작업하는 부분이라면 더더욱 기준없이 클래스명을 지어버리면 안된다!! [코딩 공부_35] bem class명 규칙 오늘은 css 클래스 네임을 어떻게 지으면 좋을지 고민하는 시간을 가져보도록 하자! 1. BEM의 기본 구조 - BEM은 Block, Element, Modifier를 뜻한다. - 저 세가지를 이용하여 각각 __와 --로 구분한다. bee-blog-0.tistory.com 전에도 클래스명 관련 글인 BEM 규칙에 대해 포스팅한 적 있지만 나는 코딩 할 때, camel case를.. 2021. 5. 8. [코딩 공부_68] 반응형 웹에 대하여 1. 반응형웹이 왜 필요할까 - 태블렛, 스마트폰과 같은 전자기기 사용이 늘어나면서 그에 맞는 크기로 웹을 보여주기 위해 필요해졌다. 2. 반응형 웹은 무엇인가 - 고정된 형태가 아닌 유동적으로 변하는 웹이다 3. 반응형의 핵심 포인트 - 고정(fixed) > 유동(fluid)으로의 변화 - breakpoint로 미디어에 따른 변화주기 4. 그러면 웹엔 반응형만 있는 걸까? - NO!! 적응형 웹도 존재한다 적응형 웹은 device(데스크탑, 타블렛, 모바일)별 독립적인 템플릿 제작 후 디바이스 환경에 따라 랜딩 되는 웹이다 반응형 웹에 대해 더 자세하게 알아보자 ! 1. 데스크탑, 태블렛, 모바일의 디바이스 크기 값은? - 데스크탑 : 1024px - 태블렛 : 768px - 모바일 : 320px 2... 2021. 5. 8. [코딩 공부_67] float으로 layout 설계하기 1. 레이아웃 설계하기 - layout이란, 웹 사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것 - layout의 핵심은 블록레벨 요소들을 원하는 위치에 배열하는 것이다 2. 레이아웃 side left right main article article2 article3 footer 이처럼 다양한 레이아웃이 있고, float을 이용하면 이런 레이아웃을 뚝딱 만들 수 있다는 장점이 있다 다음 시간엔 레이아웃을 이용한 그리드를 배운다 ! 정말 웹페이지에 대한 걸 다 배워가고 있다는 느낌이 든다 ㅠㅠㅠ 포트폴리..오........ 2021. 5. 8. [코딩 공부_66] float simple project-2 실습하기 코딩 수업을 할 때 노트북을 이용해서 코딩을 한다 그 전에는 타자 치는 일이 별로 없어서 노트북 거치대를 해도 딱히 신경 쓰이는 부분이 없었는데 타자 치는 일이 많아지다보니 노트북 거치대가 불편해져버렸다😥 그렇다고 노트북 거치대를 포기하면 내 목이 자라목이 될 거 같아서 다이소 키보드를 하나샀는데 이렇게 편할 지 몰랐다 ㅎㅎㅎ 다이소는 정말 저렴하고 가성비 최고인 거 같다! 나중에 고장나면 멋진 키보드를 장만하겠다!! 원래 영타도 평균 190타정도 나왔는데 손목에 편한 키보드를 써서 그런건가 평균 240타가 나온다 너무 행복하다! 이제 본론으로 들어가자면 float simple project 2번째를 실습하였다 travel101 취미 수익 창출 직무교육 데이터 개발 md 추천 여행지 Newyork Lor.. 2021. 5. 8. [코딩 공부_65] float simple project-1 실습하기 float simple project를 만들어 보았다 말 그대로 심플해서 좋았다 float이 포스트잇이야!만 생각하면 쉽게 이해할 수 있는 거 같다 새로운 걸 배울땐 머리가 너무너무 아픈데 계속 복습하다보면 아리쏭해도 머릿속에 조금씩 들어오는 거 같다 히히 beginning your journey Lorem, ipsum dolor. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam placeat beatae dolor doloribus aut illum dolorem sit odit minima, neque officiis nostrum id animi harum fugiat sint nobis sunt laudantium? get Ti.. 2021. 5. 6. [디자인_20] 인물 아트워크 만들기 인물 아트워크를 만들었다 호불호가 아주 많이 갈리는 방법이라고 선생님께서 말씀하셨는데 그런 거 같다 (나는 불호........ ㅎㅎ) 1. 인물사진을 가져온다. 2. 누끼를 따기 위해 퀵셀렉트 툴 클릭 > 크게 영약 잡아준 다음 > 툴옵션 : select and mask 클릭 > view mode: overlay 설정, 도구 refine edge tool 클릭(두번쨰 위치) 가장자리로 드래그해서 잡아준다 3. OK 버튼을 누르면 선택 영역 나올때는 ctrl+J 복사하기, 마스크 걸려있으면 마스크 썸네일에어 마우스 오른쪽 클릭 > apply layer mask 클릭 4. 펜툴 :path로 설정한 다음 나눌 부분을 인물 사진으로 선 그리고 나머지 바깥 영역은 빠르게 선택해서 영역을 잡아준다 ctrl_ente.. 2021. 5. 5. [코딩 공부_64] float란? 휴우!! 드디어 float까지 왔다!! 😎 나는 하루 수업을 안들어서 float에 대한 특성에 대해 잘모르고 그냥 따라하기만 했는데 이제 좀 이해가 간다 !! 하루 수업 안들었다구 바보가 되니 우울했다 ,, 1. float : 이미지/텍스트 배치하기 또는 레이아웃 배치하기 (참고) float로 배치하는 방법은 전통적이고 옛날 방식이다! flex나 grid가 최신이지만 아직 float를 많이 사용하는 편이다! - float는 띄우다는 뜻으로 img와 text를 같이 배치하기 위해 고안되었다. 즉 포스트잇처럼 고정시키고 옆에 글들이 배치되도록 설정이 가능하다 - markup의 위치가 중요하다 - float은 뒷따라오는 컨텐츠와 섞이게 한다 - clear로 섞이지 않게 할 수 있다 ① 특성 : 부모요소는 자식.. 2021. 5. 4. [코딩 공부_63] fullscreen-slider 만들기 궁극의 기술 개발을 향한 여정, 영자닷컴이 바꿀 미래를 주목하라. 매년 범람하는 새로운 기술 및 보안에 대응하여 각 분야의 전문인력구성, 연구개발, 기술력 향상을 최우선으로 합니다. IT 기술 성장의 중심 기업 ‘영자닷컴’ 공공분야, 대기업 중심의 IT컨설팅, SI구축, 웹기반 시스템구축, 어플리케이션 플랫폼 구축 등을 수행하는 기업입니다. 환경과 안전을 위한 기술적 가치를 추구하는 기업 중·소규모 사업장의 효율적인 화학안전 관리를 위한 Smart System을 개발하여, 환경과 안전을 위한 기술적 가치를 실현하고자 합니다. 2021. 5. 4. [코딩 공부_62] modal과 slider를 함께 응용하기 show x my skill set html5 Lorem ipsum dolor sit amet consectetur adipisicing elit. my skill set css3 Lorem ipsum dolor sit amet consectetur adipisicing elit. my skill set javascript Lorem ipsum dolor sit amet consectetur adipisicing elit. X 2021. 5. 3. [코딩 공부_61] modal, slider 만들기 후후 .. 정말 자격증 때문에 일주일동안 블로그에 소홀했었다 소홀한 만큼 자격증을 잘했어야했을텐데!! 아주 그냥 망해버렸다 !! 다시 자격증 공부 열심히 하구 ! 블로그도 열심히 챙겨야겠다 ^_^ 많이 사용하는 modal과 slider를 구현해보는 시간을 가져보았다 modal은 포트폴리오에 자주 출몰하는 녀석이라 한다 ... 곧 포트폴리오를 만들어야한다니 눈물이 나온다 😥 view x 파리행 티켓을 구매하시겠습니까? no yes 맨 윗부분엔 뭘 해야될지 적어두면 좋다고 한다! 하나의 문서니까 부연설명이 있으면 좋다는 이야기인거같다! modal을 하면서 가장 많이 헷갈렸던 부분이 셀렉터 지정하는 부분인 거 같다 분명 저번달쯤에 배운 거 같은데 잘 사용안하다보니 헷갈리는 듯하다 물결이 뭐였지! 플러스가 뭐였.. 2021. 5. 1. [코딩 공부_60] 메인 페이지 실습하기 web class back-end front-end publisher designer creative Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, eveniet voluptatibus. Aperiam quo ut ratione odio dolore molestiae ipsum labore rem, eos, perferendis iure officiis autem accusantium ducimus? Voluptates, a! join get your dream, go forward view calfornia office Lorem ipsum dolor sit amet consectetur adipisicing elit. Repu.. 2021. 5. 1. [코딩 공부_59] the space project-2, 코딩하기 로그인 회원가입 ENG The Space 회사소개 제품소개 고객지원 세계로 뻗어나가는 디지털 트랜스포메이션 솔루션 시시각각 변하는 현대사회에 최적화된 디지털 상품 정보 관리 시스템 보험, 금융 산업의 대표 기업이 선택한 Space Product를 확인해보세요 더보기 Space Product Space Product는 상품의 기준 정보와 업무 규칙을 통합 관리하는 디지털 상품 정보 관리 시스템으로 상품 기획, 개발, 릴리스, 운영 및 판매 분석에 이르는 상품 라이프 사이클을 더 효율적으로 수행할 수 있도록 합니다. 강력한 자체 개발 룰 엔진을 기반으로 기업 내∙외부 환경 변화에 신속한 대응이 가능한 상품 시스템의 구축이 가능해집니다. The Space는 혁신적입니다 금융 급변하는 금융 시장에서 기업이 시장.. 2021. 4. 27. [디자인_19] 잡지 레이아웃 설정하기 잡지 레이아웃을 설정하는 실습을 하였다 레이아웃 설정이였지만 .. 원고만 없는 완성이 아닌가 싶다 ㅎㅎ.. 2021. 4. 23. [디자인_18] 화장품 heap, 브랜딩 하기 저번주에 완료한 로고이다 ! 로고 만드는 건 너무너무 너무 힘들다!! 그래도 뿌듯하다 근데 화장품 로고 같은 느낌이 안드는게 흠인거 같다 ㅠㅠ... 2021. 4. 23. [코딩 공부_58] the space project-1, 기획하기 요번 시간은 project 기획부터 시작해서 코딩까지 하는 실습시간이었다 나는 the space라는 기업을 임의로 만들어서 페이지를 만들었다 자료가 없어서 내용은 lorem으로 했지만 만들때는 이노룰스(innorules.com/kr/index.php)라는 기업의 페이지를 참고해서 만들었따 ! 그부분은 다음 포스팅에서 이야기 해보도록 하겠다! 이제 xelf로 만드는 것도 재밌고 적응하게 되었따! 그룹화나 단축키같은 건 없지만 쉽고 간단하게 만들 수 있어서 좋다 ㅎㅎ 2021. 4. 23. 이전 1 2 3 4 5 6 7 다음
