국비 개발교육 일지

드디어 오늘 국비지원 교육 1일차!!! 과연 첫날부터 뭘 공부하게 될지 설렘설렘했었는데 큰 기대 없었던 강사님은 의외로 재밌고 엄청 친절하신 분이셔서 걱정을 반은 덜었다!! 웹디자인에 대한 설명을 조금 들은 후, 첫 포폴을 위한 리서치에 착수 했다. 디비컷과 지디웹에서

오늘은 어제 예고한 대로 adobe XD 툴을 배웠다.Adobe suite들에 조금 쪼는 편이라 어제 자기전에 유투브로 20분 짜리 crash course로 예습 아닌 예습을 했다 !! 2일차지만 이런 사소한 노력을 하고있는 내 자신, 너무 멋져 !!! :)일단 XD를

✅ 구성 요소 추가✅ 애니메이션 하는 법✅ 프로토타입 툴오늘도 계속된 Adobe XD 교육하지만 어제는 디자인 툴에서 놀았다면 오늘은 프로토타입 툴까지 확대되었다 !그리고 디자인 툴에서도 오늘은 움직이게 하는 것들을 조금 배워보았다.첫번째는 구성 요소 추가하기.XD는

내 프로젝트를 위한 와이어프레임 만들기안의 세부사항 꾸며 넣기오늘은 9시-1시까지 통으로 프로젝트를 위한 기획을 만드는 시간을 가졌다.맥북이라 Adobe XD를 설치할 수가 없어서 뒤쳐질까봐 걱정이 되어 어제 남아서 상단,메인,컨텐츠의 메인프레임을 거의 끝내두고 간 덕

프로토타입 완성하기담주 월요일에 발표할 UI/UX 요구분석 ppt 만들기어제 이렇게 만들었던게오늘은 대변신 했다 !!<<<사진첨부>>> (ㅠㅠ사진 왜 안가지고 왔니이이이잉)사실 어제 와이어프레임을 다 잡고 난 후엔 디자인적인 요소를 넣으며예쁘게(!!)

오늘 한 것 어제 발표 못한 사람들 마저 발표 UI/UX 요구분석 NCS 책 강의 서브 페이지 작업 저번주에 올리지 못했던 메인 화면 디자인 완성본 !! (찐찐막은 아니라고 한댜..왜냐믄 해나가면서 계속해서 수정하기 때문 !) 메인에 이어서 이제는 서브페이지를 작업

html 문서는 제일 먼저 html 문서임을 선언하고, 크게 head와 body로 나뉜다. head 밑에 꼭 title과 style을 넣어준다. style에 body의 height를 지정함으로써 페이지의 길이가 길어져 스크롤이 생긴다 ! 그리고 이제 저 <바디>와

cellpadding - specifies the space between the cell content and its borders.cellspacing - specifies the space between the cells.colspan - to merge colu

보통 인라인보다 외부 스타일시트를 사용하는데 선언을 할때 reset 과 main으로 나뉘는데, reset 을 먼저 ! 배치해줘야 한다.reset.css 는 전체적인 스타일을 선언하기 위한 스타일시트이다.찐 스타일시트는 main.css 에 들어가게 된다.The div t

오늘은 태풍 힌남누로 휴강 !!!css 공부하면서 하루 보내는중..!CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있음.

진짜 있는 페이지를 만들고 있으니까 이쯤하니 제법 진짜 웹사이트 같아 보인다 ! 물론 메인 페이지뿐이라 눌러도 서브 페이지가 나오진 않지만...!사실 float가 헷갈리고 있었는데 오늘 완전히 이해를 했다 ! 이미지나 텍스트를 가로 방향으로 나란히 놓고 싶을 때 사용하

오늘은 수업에서 만들던 '마운티아'의 footer 를 완성하면서 새로운 페이지 '변호사닷컴' 만들기로 넘어갔다. 그래서 연휴동안 '마운티아' 홈페이지를 혼자 만들어보기로 했다 !! :)왜 Header 를 짤때 width 값을 직접 정하는 대신 100%를 쓸까? 상단의

오늘은 이란 웹사이트의 틀을 마무리하고 상단과 컨텐츠 1 부분을 완성했다. 내가 혼자서 할 땐 나는 틀을 다 만들어 놓고 시작하기 보다는, 틀 만들고, 내용 넣고를 위에서 밑으로 내려오면서 쭉- 같이 하는 편이다. 어느 게 나에게 더 효율적일지 앞으로 좀더 비교해봐

box-shadow > 그림자 넣기 기능 border-radius > The value(5px; in this case) applies to all four corners, which are rounded equally. > (top-left & bottom-ri

오늘은 만들고있던 <변호사닷컴>을 각자 혼자서 마무리 하고 제출했다. 나는 비교적 빠르게, 쉽게 진행되었던 것 같다 ! 그래서 얼른 마무리하고 강사님이 연습해보라고 올려두신 새로운 사이트를 만들었다. 남아서 만들고 갔더니 상단, 메인이미지, 컨텐츠 1번까진 완료

오늘은 xd 서브 페이지 다 만들었던 걸 강사님의 피드백을 받아서 수정했다.그리고 반응형 웹을 위해서 가로 1000px (태블릿) 과 680px (모바일)두가지 버전을 만들기 시작했다 !1000px 짜리는 비교적 크기가 비슷해서 살짝살짝씩만 수정해서 비교적 빨리 끝났는

9/20 화요일어제(월요일) 강사님 개인 사정으로 휴강이였다.오늘은 html5를 배웠다. 그래서 semantic tag에 대해서 정리를 해보았다.시맨틱(semantic) = 의미를 부여 했다는 뜻HTML5에서는 태그만 보고도 문서를 쉽게 이해 할 수 있도록 의미를 가지

오늘은 또 새로운 사이트를 만들었는데, semantic 태그를 이용해 html5의 형태로 만들어보았다. 벌써 혼자서 복습하며 만들어본 사이트가 3개가 되니 이제 html, css 는 곧잘 하게 되었다 ! html5는 아직 조금 낯설긴한데, 한번 혼자 만들어보면 또 금방

어느 웹사이트에서나 이렇게 아이디,비번, 개인정보를 입력하는 창을 쉬이 볼 수 있다. 바로 form문 이다.이번엔 fieldset 과 legend 를 이용한 form문이다.The fieldset tag is used to group related elements in

transition을 사용해 메뉴에 커서가 올라갔을시에 서브메뉴까지 촤라락 펼쳐지며 보일 수 있게 만들 수 있다.

구글폰트 사용하기 1. @import > reset.css 에 @import를 가져다두고, font-family 에서 설정해서 쓰면 된다. 2. link > @import와 link 둘다 google font 에서 제공하는 걸 copy and paste 해서 쓰면

em,rem은 이해하기 쉬웠는데, vw,vh는 조금 낯설었다. 하지만 요즘 반응형 웹을 한창 배우고 있어서, vw와 vh를 사용하면 반응형 웹을 만들때 되게 유용하겠다 싶긴했다. 아직 개념만 배우고 직접 반응형 웹에 활용 해보진 못했지만..! 궁금하다.

flex wrap: nowrap;defaultwill not wrap flex wrap: wrap;will wrap, if necessaryflex wrap: wrap-reverse;will wrap, if necessary, in reverse orderalign-i

오늘은 진도를 나가지 않고 어제배운 display:flex;를 복습하고 새로운 사이트를 스스로 코딩했다.혼자서 display:flex;를 사용해보았는데, 개인적으로는 margin,padding을 덜 사용해도 돼서 좀 편했던 것 같다.(혼자서 사용을 시도 했다는 것에 굉

레벨 요소 이렇게 태그들은 인라인과 블록 레벨 이라는 default가 주어지는데 자유자재로 원하는대로 배치해주기 위해서 display 를 사용한다. 요소의 배치 - 상대적 박스를 원하는 곳에 배치하는 방법을 배웠는데, 솔직히 이건 따라가면서도 너무 어려워서 이해를

웹의 동작(동적) 구현하기 위한 언어웹 브라우저에서 동작 (단, node.js는 서버에서 동작)html문서 내에서 <script> ~ <script> 태그 안에 작성 \- 외부 자바스크립트 연결도 가능대소문자를 구별객체(object) 기반의 스크립트 언어웹

새 터미널에 npm initconsole.log('node test') 확인하는 방법: 터미널에 node 파일명터미널에 ctrl + c => 서버 실행 중지

FileSystem 모듈파일 처리와 관련된 모듈node.js 에서 가장 중요하고 기초가 되는 모듈메소드readFile(): 파일을 비동기적으로 읽음readFileSync(): 파일을 동기적으로 읽음writeFile(): 파일을 비동기적으로 씀writeFileSync()