대구 ai스쿨

대구 ai스쿨의 html 두번째 수업을 시작했다. 이번 수업은 본격적으로 홈페이지를 뜯어보며 틀을짜는것을 중점적으로 해보았고, 실제 웹사이트들의 index들을 열어 비교해보았고, 이전에 수업했던 내용까지 간략하게 요약 및 복습하는 시간을 가졌다. 1) 학습한 내용

대구 ai스쿨의 초반부 커리큘럼이 모두 끝나고 본격적인 웹개발수업이 시작됬다. > 1일차 핵심내용 가장 많이 사용되는 웹프로그래밍 언어의 특징 웹프로그래밍의 전체적인 밑그림 및 추천 사이트 기초적인 HTML5 태그 > 가장 많이 사용되는 웹프로그래밍 언어의 특징(

ㄹ

4일차 css학습을 이어나갔다. 새로 알게된 내용은 가상선택자와 닷홈에서의 무료 호스팅과 파일질라를 통한 내 홈페이지 도메인만들기와 간단하게 네이버와 카카오톡 친구목록을 좀 더 구체적으로 만들어보았다. 1) 학습내용 가상선택자 가상선택자란 선택한요소에 어떠한 행

5일차 css 오늘의 학습은 레이아웃에 대해 배웠다. display 속성을 사용하여 웹안에서의 배치를 바꾸는 내용이 핵심이었다.marginpaddingbordercontentscontents : 열린태그와 닫힌 태그 안에 있는 내용물을 컨텐츠라고 알고있으면 된다.예를들

display 레이아웃을 계속 학습중이다. z축에 높이에 영향을 미치는 속성, 속성값으로는 숫자값만 전달하면된다숫자에는 단위가 생략되고 z인덱스가 적용되지 않은 최초의 상태는 0이다.z-index는 3차원적인 속성을 갖고있는 포지션값에서만 적용이 가능하다3가지 3차원속

레이아웃수업 마지막날이다. 혼자 독학할때 아리송한 문제들을 제법많이 해소했다. 덤으로 유레카라고 생각될만큼 좋은 flex사이트도 강사님께서 알려주셨다. 내 생각에 레이아웃은 사이트의 배치를 담당하는 분야인만큼 심도있고 탄탄하게 꾸준히 공부해야된다고 생각한다. 보기에

오늘 수업은 css animation에 대한 내용이었는데 수업이 2시간 40분 가량 평소 2배가량의 분량이라 집중하기 어려웠다. 그런와중에도 헷갈리는것 위주로 정리했고 알거나 복습한 내용들은 배제하고 정리했다. 이렇게 정리하니 다시 공부할때 눈에 더 잘들어오는것 같다.

수업분량을 잘못보고 8일차 수업에 어제것까지 한번에 정리해버렸다. 복습한다고 생각하고 간략하게 정리해보겠다.css 라이브러리https://animate.style/https://codepen.io/ 사용법은 어제 학습할때 익혔으며, 누군가가 만들어 놓

오늘의 학습내용은 mediaquery 의 내용이었다. mediaquery는 쉽게 설명하면 우리가보는 휴대폰 태블릿 pc 마다 보이는 사이트의 규격이나 양식이 바뀌는것을 코드에 적용시켜서 각각의 다른 기기에서도 자연스러운 결과를 보기위해 사용하는 것이다.미디어 쿼리의 기

MediaQuery 오늘 수업내용은 미디어쿼리 실습 및 복습이었다.미디어쿼리는 pc, 태블릿, 휴대전화의 화면의 크기별로 조정해 사이트를 좀 더 가독성있게 만들어주는 css속성이다. ( 컴퓨터 화면에서의 메뉴) (작은 화면에서의 메뉴) 넓은 화면에서와 좁은 화

11일여간 공부한 기본기로 첫 카피웹사이트 코딩을 시작했다.분량도 분량이지만 사실상 다 이해하고 넘어간다기보다 어느정도 경험한다는것에 의미를 두려고한다. 1\. 로고 만들기 로고만들기는 크게 두가지로 나뉘었는데, 만들어진 기본 kidsgao로고 이미지와 그 위에 고개를

키즈가오 실습을 계속 진행하고있다. 우선 진도나간 내용안에서 간략하게 정리할부분을 요약하고 넘어가려한다.z-index는 코드의 우선순위를 정해주는 기능을 하는 속성이다.그러나 오늘 실습에서 같은 z-index값을 줬을 때 가장 최근에 입력한 값이 우선순위가 높다는것을

키즈가오 카피 마지막수업을 했다. 이제 기본적인 틀이나 규칙적인 패턴을 파악하는데 적응되서 처음에는 막막하고 어렵게만 느껴졌던것이 한결 편하게 다가왔다.우선 진도나간 내용안에서 간략하게 정리할부분을 요약하고 넘어가려한다.bottom: initial;이니셜은 바텀값을 가

덴마크 쇼핑몰 'helbak' 의 카피캣을 했다. 저작권에 들어가는 내용을 제외한 기본적 틀을 placeholder image를 사용해서 완성했다.https://www.helbak.com/덴마크 쇼핑몰 레이아웃 카피캣 작업이 웹사이트는 자연스러운 반응형 웹사이

네이버 카피캣 (1/2) 키즈가오와 마찬가지로 홈페이지 카피캣이 수업내용이었다.크롬 확장 프로그램 (개발에 도움되는)wappalyzer - 사이트에 사용된 언어나 프레임워크를 알수있음 (보안된것제외)CSS viewer (클릭으로 css속성값을 볼 수 있음)새롭게 알게된

네이버 홈 카피캣 (2/2) 로그인 창 및 하단부분 실습1\. 로그인, 배너로그인 창2\. 쇼핑몰, 리스트3\. 하단 (footer)글자사이에 칸막이 만들기어제 수업했던 네이버 홈페이지 카피캣을 마무리했다.딱히 없었다.x강사님께서 css의 숙련도를 체크하는 법을 알려주

네이버 메인 이후 네이버 카테고리안에 있는 네이버 쇼핑몰사이트 일부를 카피캣했다.새롭게 알게된 내용max-width: 최대 너비값을 지정한다. (예를들어 창 조절을 할때 width 값이 max-width값 이상 커지지 않고 반대로 min-width값은 min-width

네이버 홈페이지 안 쇼핑몰 카테고리 카피캣!1) list-wrap2) footer wrap사이트를 채울 무료 이미지 사이트https://pixabay.com/상업적인 용도로도 사용가능 https://unsplash.com/사이트 완성단계에서는 id와

네이버 웹툰 사이트 카피캣1) 네이버 웹툰 상단2) 네이버 웹툰 배너3) 네이버 웹툰 메인 클래스 명이 너무 길어지는것과 열고 닫는 태그가 무수히 많아지니 한번 실수하면 찾는게 너무어려웠다.노력매일을 거듭할수록 좀 더 익숙하고 편하게 다가가는것 같다.

네이버 웹툰 (3/4),(4/4) 실습새롭게 알게된 내용= 줄바꿈을 주지않겠다. = 텍스트가 오버플로우되면 …표시로 바꾸겠다.Html 특수문자 사용하기 - 참고링크https://postitforhooney.tistory.com/entry/HTML-HTML-%

네이버 블로그 카피캣 (1/2)새롭게 알게된 내용클릭할 수 있는 효과이다.Display: flex 는 explorer 하위버전을 지원하지 못한다.네이버는 하위버전까지 지원하기 위해서 float을 가지고 사이트 배치작업하는것이 일반적이다.사이트를 만들때는 최신버전의 상위

4) 학습소감

네이버 뉴스 카피캣복습 및 새롭게 알게된 내용Sub nav 파트일때 sub nav 는 마진오토값이 지정된Container 안에 있었다 이때 나는 구분하기 편하기 위해서 미리 배경색을 흰색을 주려했지만, 사실상 중간 박스부분만 적용이되고 왼쪽 오른쪽 테두리부분은 적용되지

네이버 뉴스 카피캣 (2)복습 및 새롭게 알게된 내용월말평가를 통해 새롭게 알게된 내용을 위주로 추려봤다.우선는 700이하의 값들에 색을 저장하는걸로 기억했는데,700미만의 값 즉 699px의 width값까지가 적용범위였다.그리고 display의 속성중 잘못된것을 고르

새롭게 알게된 내용 및 복습내용이 코드를 사용하면원하는 위치에 도달했을때 말줄임 표시를 구현할수있다.네이버 뉴스 - TV연예 카피캣1) TV연예 nav2) TV연예 media3) TV연예 main 본문없었습니다.동영상을 멈추지 않아도될만큼 이제 어느정도 따라가는것

1) 네이버 TV연예 리스트오늘은 배웠던 내용을 기반으로 조금씩 차이점이있는 리스트들을 만드는 수업을 했습니다.없었습니다.배우면서 자바스크립트에 관심이 생기고 완전한 사이트를 만들어 보고 싶다고 생각했습니다!

네이버 뉴스 - TV연예 마무리1) 네이버 tv연예 오른쪽딱히 없었습니다.레이어에 플렉스값을 주면 무조건적으로 플렉스값에 따라 레이어가 움직인다고만 생각했는데 크기조정또한 무시못할 중요한 요소라고 깨달았습니다.

4) 학습소감

네이버 게임 (2)1) naver game banner2) naver game section-1딱히 없었습니다.하면할수록 발전해나가고 이해하는 속도가 빨라지기 시작했습니다.

네이버 게임 (3) 4) 학습소감

네이버 게임 (3) -완-NAVER GAME RIGHT WRAP딱히 없었습니다.x4) 학습소감

네이버 E스포츠 홈페이지(1)1) nav 바2) header part딱히 없었습니다.x

네이버 e스포츠 (2)1) e-sport main lists딱히 없었습니다.x4) 학습소감

네이버 e스포츠 (완)네이버 오디오 클립 (1) - 대체공유일 진도1) e-sport 우측 파트border-radius의 새로운 적용 방법 원래는 모든방향의 radius를 적용해야하는줄 알았지만 코드내용을 조금 바꿈으로써 부분적으로 효과를 줄 수 있었다.magin: 0

네이버 오디오 클립 (2)1) audio clip main 부모간의 마진 병합현상이 헷갈려서 다시 복습하는 기회가 있었습니다.position: relative; 를 부모태그에게 부여하는것을 까먹어서 자주 돌아갔습니다.absolute 가 어디로든 배치하기 편하다는 장점이

네이버 오디오 클립 (3)34일차 네이버 e-sport Github

twitch ( 1 )1) twitch header nav수업은 input부분의 크기와 색만 잡았지만 twitch 사이트를 보고 focus됬을때 효과, border색변화를 적용했다.hover 됬을때도 테두리가 옅은 회색으로 바뀌는것도 적용해보았다.수업 마지막쯤에 min

Twitch (2)1) twitch left nav (1)2) twitch left nav (2)왼쪽 nav바를 상단과 하단에 딱맞춰 고정시키는 방법등 3차원적인 속성이면 다가능하다.Top: 사이트마다 상단 네비바 width만큼bottom: 0; bottom값을 0 으

Twitch (3)1) twitch main banner!2) twitch main section네비게이션 바를 피해서 남은 공간에 스크롤을 적용하는법.content { position: absolute; top: 50px; bottom: 0; l

Twitch (4)1) twitch main section (2)2) twitch category section 3) twitch footertransform 사용시 hover:transform혹은 focus:transform의 값을 정해두고 그 원본코드에다가 tran

CSS - Tutorial 1) 학습한 내용 2) 학습내용 중 어려웠던 점 3) 해결방법 4) 학습소감

YouTube (1)1) 상단 nav , 좌측 nav, main overflow-y: auto; - 좌측 nav에 개별적인 공간과 스크롤을 만듬딱히 없음4) 학습소감

YouTube (2)1) YouTube nav-top없음4) 학습소감

YouTube (3)

YouTube (4)

javascript그 전에 한 내용들이나 튜토리얼 부분은 github에 올려두었습니다.전체적으로 함수를 쓰는것 자체에 의문점이 많았습니다.MDN 을 참고하거나 강의를 복습했습니다.4) 학습소감