전체 글 (59) 썸네일형 리스트형 프론트엔드 - html, css (웹사이트 만들기4) 어제 블로그를 못써서 오늘 기록한다 어제는 남은 레이아웃작업을 마무리했다. 세번째 메인화면과 네번째 메인화면 라스트 메인화면과 푸터를 레이아웃 잡는 작업과, 필요한 이미지를 찾고 사이즈에 맞게 조절하는 작업을 실시 하였다. 항상 html code를 작성하고 이미지를 찾고 넣을때 너무 큰사이즈의 사진이 작은 픽셀 속에 들어갈때 깨지는현상이 있어서 포토샵으로 자르고 넣는것을 했는데 이번에 max-widht, max-height, overflow: hidden, 기능들로 그걸들을 해결 할 수 있었다. 생각해보니 굉장히 단순했다 최대 픽셀을 조절해주고 범위가 넘어버리는것들은 가려준다고 생각하면 됐던건데, 이제서라도 방법을 알았으니 다행이다 포토샵 일러스트에 투자하는 시간들이많아서 불편했는데 다행이다. 그럼 바로.. 프론트엔드 - html, css (웹사이트 만들기4) 오늘은 새로운 토이프로젝트를 실시하였다. 이젠 머릿속으로 컨셉을 혼자서 생각하고 코드에 옮겼다면 이제는 컨셉과, 디자인 또한 기록하기로 했다. 그 이유는 이것 또한 현업에서의 커뮤니케이션 능력에 도움이 될 것 같기 때문이다. 이번 토이프로젝트의 컨셉을 공개하겠다. 해당 컨셉을 생각하면서 토이 프로젝트를 실행하였다. 먼저 html code이다 HTML CODE Envira 강의 로드맵 멘토링 커뮤니티 채용 로그인 회원가입 메인 배너 텍스트 1 두꺼운 글씨체 메인 배너 텍스트 2 얇은 글씨체 커리큘럼 강의 취업 의지를 올리는 문구 지원 해주는 회사에 들어오라는 문구 상세설명 취업 알아보기 버튼 자격증 관련 문구 자격증 관련 문구 상세설명 자격증 관련 버튼 자격증 관련 아이콘 자격증 이름 관련 직업 바로가기 .. 프론트엔드 - html, css (웹사이트 만들기 3) 오늘은 반응형 미디어쿼리를 다 작성하는 시간을 가져보았다. 한번 미디어쿼리를 작성하고나니 어느정도 감이 잡힌 것 같다. 지금은 제일 작은 모바일버전 575px로 하고 있지만 더 점점 많은 형태의 버전을 만드는것도 익숙해져야겠다. 미디어쿼리를 작성 한 것 말고는 없기 때문에 html code에는 바뀐 점이 없다. 그럼에도 html code를 공개하겠다. HTML CODE Brend COFFEE COLD BREW BAKERY SHOP LOGIN ABOUT COFFEE BEANS & ROASTING 커피 본연의 맛을찾아 In search of natural born Sweetness See Detail 조화로운 열의 전달 Harmonious heat Delivery See Detail 블렌드? 상상만 했던 그.. 프론트엔드 - html, css (웹사이트 만들기 3) 오늘은 웹브라우저 전체 레이아웃작업을 맞치고 css코드까지 다 작성하였다. 남은것은 반응형 미디어 쿼리이다 만약 시간이 된다면 메인배너에 자동슬라이드로 자바스크립트를 추가해볼예정이다. 이제 레이아웃을 잡는 작업은 어려운을이 아니다 손쉽게 html로 남은서비스 부분 컨테이너를 만들고, footer부분도 어렵지 않게 코드를 만들수있었다. 그러면 바로 html code를 공개하도록 하겠다. HTML CODE SHOPWARE Store Features About Blog News Quick Delivery Quick Delivery Service Same-day delivery for orders before 6 p.m Discount Event Discount coupon eventSave at least 1.. 프론트엔드 - html, css (웹사이트 만들기 3) 오늘은 남아있은 레이아웃 작업과 필요한 이미지를 찾아오고 텍스트도 생각해내는 과정을 진행했다. 이미지속에 글씨를 position으로 넣는 것은 성공하였으나 해당 이미지에 텍스트가 추가 된 것은 디자인 요소로 좋아보이지 않기에 빼버리고 hover작용으로 transform을 사용하여 이미지 크기를 일정 크기 늘려주는 작업으로 대체하였다. 그럼 바로 오늘 작성한 html code를 확인 해 보겠다. HTML CODE SHOPWARE Store Features About Blog News Quick Delivery Quick Delivery Service Same-day delivery for orders before 6 p.m Discount Event Discount coupon eventSave at le.. 프론트엔드 - html, css (웹사이트 만들기 3) 오늘은 어제 작성한 메뉴바에 대해서 고칠 점이 생겨서 고치고, 새로운 레이아웃들을 생성하는데에 집중했다. 원하는 레이아웃까지 절반을 오늘 성공했다. 일단 어제 position:absolute를 이미지에 설정하니 전체 페이지가 이미지가 되어서 다른 div를 추가해도 가려지는 현상이 보였다. 그래서 해결한 방법이 이미지를 부모태그로 설정 후, 메뉴바를 position:absolute를 이용하여 부모요소에서 벗어나서 움직 일 수 있도록 설정 후에 top으로 위치시킨후 나머지는 margin값으로 자리값을 설정했다. 이렇게 하니 원하는대로 웹브라우저가 나타났다. 그리고 나머진는 레이아웃을 잡는 작업을 실행하였는데 좋은 결과를 도출했다. 여러번 해보니 어떻게 레이아웃을 잡아야하는지 이제서야 알 것 같다. 옛날에는 .. 프론트엔드 - html, css (웹사이트 만들기 3) 오늘은 새로운 웹브라우저를 개발하는 프로젝트르 진행했다. 이번 컨셉은 전자기기 웹브라우저이다. 컨셉 색깔은 전자기기에서 많이 보이는 led색깔 조합으로 갈 예정이다 (ex. 형광그린, 형광블루, 형광퍼플) 폰트는 전자기기 특성상 각이 져있지만 어느정도 유연함이 가지고 있는 글씨체를 선택했다 => Open Sans. 오늘은 메뉴바를 설정하고 메인배너위에 메뉴바가 올라가는 컨셉으로 진행했다. 처음 해보는 작업이어서 조금 시간이 걸렸지만 또 많은것을 습득한 시간이었다. 첫번째로 position의 사용 position:absolute를 사용해서 메인배너 이미지를 부모 요소기준 바디위에 설정을 하고, position:relative를 사용하여 메뉴바를 메인배너 이미지 위에 설정 해 주었다. 오늘 작성한 html .. 프론트엔드 - html, css (웹사이트 만들기 2) 오늘은 반응형 미디어쿼리를 만드는 작업을 했다. 저번 반응형 미디어쿼리를 망치고 이번에 잘 할 수 있을까 했지만, 잘하기 위해서 레이아웃을 공부한거니 일단 해보기로했다 결과는 이따가 공개!!!! 오늘 반응형 미디어쿼리를 만들면서 많이 달라진 부분이 있다. html코드에서도 많은 변동이 있었다 HTML CODE Brend COFFEE COLD BREW BAKERY SHOP LOGIN ABOUT COFFEE BEANS & ROASTING 커피 본연의 맛을찾아 In search of natural born Sweetness See Detail 조화로운 열의 전달 Harmonious heat Delivery See Detail 블렌드? 상상만 했던 그 맛! Blend : Mix & Match See Detail.. 이전 1 ··· 3 4 5 6 7 8 다음 목록 더보기