대구AI스쿨

간단한 요약 이번 2회차 수업의 경우 설계 도면 작성이 핵심이다. 좋은 집을 지으려면 그 설계 도면부터 탄탄하게 구성을 해야하는 것 처럼 웹사이트의 구축도 마찬가지이다. 약간의 차이점은 웹사이트의 경우 언제든 수정이 가능하다는 장점은 있지만, 그래도 기존의 합의된 설계

평소 개발 공부를 하며 notion에 필요한 부분을 정리해놨지만, 이번 대구AI스쿨을 계기로 누구에게나 열려있는 공간에 정리해두는 것도 재미있어보여 velog를 시작하게 되었다. 기록을 남기면서 어떤 식으로 짜임있게 정리해야 일목요연하게 정보 전달이 될 지 생각하며,

간단한 요약 css 관련 기본을 배우는 시간이다. 워낙 다양한 기능이 많았기에 이전에 배우지 못한 내용들도 많았다. 배운 내용 style.css 연결 태그 사용 시 속성은 연결되는 파일의 형태를 알리는 역할 속성은 연결되는 파일의 text는 css형식임을 알려줌

요약 배운 내용 1. 가상 선택자 우리가 선택한 요소에 어떠한 행동 및 규칙에 의해 디자인을 적용하는 방식 매우 다양한 선택자가 있음 tag, id, class 처럼 html문서 상에 있는 것이 아닌, 어떤 상태를 지정하는 것이 가상 선택자 a) :link && :v

간단한 요약 배운 내용 1. layout tips 태그는 default로 margin과 padding 값이 있기에, 시작부터 0을 주고 시작하는 것이 하나의 팁이 될 수 있다. 를 통해 padding값에 의해 왜곡되지 않는 content사이즈를 유지할 수 있다. 이렇

간단한 요약 배운 내용 1. z-index default z-index값은 0 3차원 적인 속성이므로, 3차원적 position 속성에서만 적용됨 2. siblings 간 구조 작업 tip 첫 번째 sibling의 position에 따라 siblings간 겹칠 지 아

요약 여태까지 배운 css에 대한 기본 지식을 실습하는 시간 배운 내용 1. display: inline-block; 메뉴와 같은 list들을 row 정렬하고 싶을 때, inline-block을 사용하면, 고유의 margin 값이 있어 list 사이에 빈 공간이 생길

간단한 요약 배운 내용 1. transform 1-1. rotate : X에는 양/음 숫자, 선택 요소에 회전효과를 줌 1-2. scale : X/Y축으로 크기를 크게/작게 조절 가능 X, Y에 소수점도 적용 가능 (비율로 적용되기 때문) 1-3. skew : X/Y

간단한 요약 배운 내용 1. 모바일 버전 웹사이트 pc 버전과 모바일 버전의 구조가 많이 다를 경우, naver처럼 모바일 버전 웹사이트를 따로 제작하는 경우도 있음 2. Media Query 유저가 사용하는 브라우저의 크기에 따라 다른 css styling을 적용할

모바일 크기에서 메뉴 버튼들의 y축 정렬디바이스 크기에 따른 nav 메뉴들의 줄 변화main태그는 익스플로러에서 지원하지 않는 태그이므로, <main role="main"></main>과 같이 사용해야 함img태그 사용 시 생기는 공백은 vertical-al

실질적 웹사이트를 구축해보는 연습이다. javascript를 제외한 html/css의 많은 부분을 연습할 수 있던 강의였다.overflow-x: hidden;은 X축 기준으로 현재 화면을 벗어나는 부분은 hidden처리 함즉, 내용이 화면을 X축으로 벗어나더라도 가로

쭉 Kidsgao 웹사이트 제작 수업을 진행하였다. 특별히 새로운 부분은 없었으며 배웠던 내용을 연습하는 과정이 대부분이었다.img의 src를 잘못 작성하였을 경우, alt=""의 내용이 그 자리를 대신하게 됨같은 값의 z-index라면, 후에 코딩된 요소가 상대적으로

오늘은 Kidsgao 웹사이트를 마무리하는 수업이다.각 서랍장을 대표하는 parents의 경우, 웬만하면 position: relative;로 기준점을 마련하는 것이 접근하기 가장 편하고 안전한 방법특정 조건에서(ex: 다른 display 사이즈) float적용을 원래

반응형 웹사이트를 제작하는 실습을 했다. 순서는 모바일 웹사이트부터 제작 후 PC 웹사이트 순이다.어떤 한 가로 영역을 3등분 할 때, float: left; width: 33.333%;로만 나누어 줘도 정확히 3등분 가능 이들의 parents 영역에 대해 width:

오늘은 naver 웹페이지의 header와 main의 왼쪽 부분의 Layout 및 css 작업을 실습하였다.width뿐만 아니라 크기를 결정하는 곳에서 calc(100% - 52px)라는 식의 방법을 사용하면 조금 더 유연하게 크기를 입력할 수 있다.XXX:focus

오늘은 전반적인 네이버의 홈페이지 클로닝을 했다. layout은 80%정도 일치하게 했으며, 디테일한 이미지 및 아이콘은 제외했다.역시 어려웠던 내용은 없었다. 반복 및 숙달의 과정이기에 배웠던 내용을 상기시키는 중이다.layout과 큰 그림들의 css로 구조화하는 작

어제에 이어 역시.. 네이버 관련 페이지 layout 작업 연습을 하였다.어려웠던 내용은 전혀 없었다.어제에 비해 상대적으로 더 할만했다. 조금 더 쉬웠던 layout이었거나, 아니면 내 실력이 늘었거나. 후자였으면 좋겠다.차곡차곡 여기에 업로드 중이다. 어서 더욱 많

네이버 쇼핑 페이지의 아주 간단한 버전을 마무리 작업했다.두 siblings가 있다면 먼저 나오는 element(보통 overlay element)에 absolute, 뒤 이은 element에 relative를 주게 되면 overlay 효과를 구현할 수 있다. (이 때

오늘은 네이버 웹툰 웹페이지의 전반적인 클론 제작을 하였다.특별히 다른 내용은 없었으며, 계속된 연습이었다.역시 어려웠던 내용은 없었다. 미리 수업을 당겨 들어둔 만큼, 다음 시간에는 조금 더 디테일을 다듬어 볼 계획이다.페이지 하나에 이렇게 많은 디테일이 필요할 줄

지난번 네이버 웹툰 페이지 1차 완성본에서 조금 더 실제 웹페이지와 닮게 수정을 몇가지 하였다.대부분 헤드라인의 디자인의 디테일이 바뀌었다. 먼저, fontawesome을 통해 화살표 아이콘을 추가했고, 선택된 li요소의 색상을 실제 페이지와 같이 맞춰주었다. 다른 자

오늘은 네이버 블로그 웹페이지를 제작했다.늘 그렇듯 이미 배운 내용으로 진행했기에 어려웠던 점은 없었다.음...분명 더욱 디테일하게 구현할 수 있는 부분들이 많은데, 예를 들면 icon을 import하여 넣어주기(내가 추가해둠), 간단한 사진들 또한 복사+붙여주기 등실

오늘은 블로그의 세부 페이지인 "챌린지 프로그램" 섹션을 클론 제작했다. 아래 처럼 제작을 하였으며, 내가 조금 더 수정을 했다. 예를 들면, fontawesome에서 필요한 icon을 가져오거나, 선택된 요소의 색상 변경, 그리고 조금 더 진짜 블로그 웹사이트와 같도

오늘은 네이버 뉴스 웹페이지를 클론 제작하였다. 전반적으로 간단한 layout이어서 힘들지 않았다.아래와 같은 결과물이다.아래와 같이Flex 설정을 미리 셋업해두어 클래스로 이용하는 방법이 나름 신선하고 유용했다.역시 어려웠던 내용은 없었다.flex의 활용 방법을 알

오늘 분량을 어제 미리 다 들어두었기에, 기존 naver news에 조금 더 내가 원하는 스타일 및 요소들을 추가했다.전반적으로 fontawesome에서 적절한 아이콘을 찾아 업데이트했다. 검색란의 돋보기 아이콘, 주식관련 부분의 arrow 표시, header란의 메뉴

오늘은 뉴스 상세 페이지 중 하나인 네이버 연예 페이지 작업을 했다.실무에서 종종 쓰일 듯 한 Tip이다. 요소에 아래의 코드를 상황에 맞게 적용하면 될 듯 하다.header 영역 로그인 옆 간단한 아이콘은 미리 추가해두었음어려웠던 것은 아니지만, 말 줄임 표시를 자동

오늘은 네이버 엔터테인먼트 페이지를 완성한 상태에서 조금 더 수정을 해주었다.하나 유용한 팁을 얻었는데, a태그 바로 아래에 a태그를 사용하면 안된다는 것header에 NAVER로고 추가 (링크가능)플레이 버튼 영상 img위에 추가arrow icon 필요한 곳곳에 추가

오늘은 미리 앞의 진도를 나가보았다. 네이버 게임 페이지를 클로닝했다.평소에 늘 shadow 속성에 대해 부담이 있었는데, 이 사이트에서 편하게 다룰 수 있게 되었다.진행하면서 수정하고 싶은 부분이 꽤 있었지만 해당 작업은 내일 할 예정이다.Naver 링크 만들기, e

오늘은 어제 제작한 네이버 게임 페이지를 조금 더 실제 페이지와 비슷하게 디자인 수정을 했다.Naver 링크 만들기, event 내 글씨 white로, 광고라고 따로 표시해주기, 각종 아이콘들 추가하기, header 바로 아래 margin-bottom 따위로 간격 주기

오늘은 네이버의 이스포츠 페이지를 클로닝했다. 이전에 했던 것들과 비교했을 때, 상대적으로 덜 복잡했다.상단에 좌우 화살표 추가광고 배너 추가마우스 hover할 때 밑줄 추가재생 아이콘 추가스크롤 다운할 때 e스포츠 경기 일정/결과파트 fixed 처리전혀 어려웠던 것은

오늘은 네이버 e스포츠 페이지의 몇몇 수정을 했다.Naver 링크를 추가하여 index.html과 연결하기상단에 좌우 화살표 추가추가한 화살표 a로 처리마우스 hover 효과재생 아이콘 추가역시 하던 내용들이기에 어려웠던 점은 없었다.github에 늘 업데이트 하는 중

오늘은 네이버 내의 오디오클립이라는 페이지를 클로닝했다.이전에 한 것들보다 더 간단한 형태라 쉽게 진행이 되었다.Placeholder 추가빠진 icon들 추가실제 웹사이트와 맞지 않는 아이콘 제거nav란의 각 카테고리 hover했을 때 효과 추가언급했든 더 간단한 형태

오늘은 어제 클로닝한 페이지에서 원하는 부분을 다소 수정을 하였다.mouse hover를 nav의 각 요소에 했을 때 이펙트 추가돋보기 icon을 검색란에 추가오류가 있던 각 요소의 간격 및 배치 약간의 수정재생버튼 icon 추가과하게 있던 버튼들 삭제 후 배치 수정좌

오늘은 네이버 오디오 클립의 상세페이지 중 하나인 카테고리 페이지를 클로닝했다.이미 수정한 header부분을 그대로 사용하는 것도 있고, 실제 페이지랑 크게 다른 점이 없어 추가할 점은 딱히 없는 듯 하다.처음에 각 a에 들어가는 이미지의 배치가 조금 난해할 줄 알았는

오늘은 트위치의 메인 페이지를 클로닝하였다.로그인 아이콘 추가하기더보기란 화살표 추가하기클로닝해야 할 디테일한 부분들이 많았다. 그래서 다소 복잡한 면은 있었지만 결국 반복적인 작업이어서 어려운 것은 없었다.github에 차곡차곡 쌓이는 중이다.

간단한 요약 오늘은 css와 관련한 팁들 위주로 공부했다. 배운 내용 1. reset css 여기 meyerweb에서 한번에 css를 reset하도록 미리 정의해둔 코드를 쉽게 복사/붙이기로 이용 가능하다. 간편하게 이용하기 위해선, 아래처럼 내가 제작하는 css 파

간단한 요약 오늘은 대망의 유튜브 클로닝을 진행했다. 우선 유튜브의 메인 페이지만 완성했다. 진행한 것 어려웠던 점 상대적으로 조금 더 복잡한 layout인 점을 빼면 크게 어려웠던 점은 없었다. 내일은 실제 웹사이트와 더욱 비슷하도록 사소한 디자인의 수정을 해

오늘은 유튜브의 서브 페이지를 클로닝했다. 채널을 클릭했을 때 나오는 페이지와 왼쪽 탐색을 클릭했을 때의 페이지다.채널 페이지탐색 페이지물론 홈을 클릭했을 때 메인 페이지로 이동하게끔 연결해두었다.메인 페이지에서 조금의 수정을 더하는 것이라 어려운 점은 없었다. 어서

오늘은 m.naver.com 즉 모바일 버전의 네이버 웹페이지를 클로닝했다. 단, 강의 보지 않고 스스로 모든 걸 클로닝 해봤다.현재 보통 vscode에서 작업할 때 신경쓰지 않고 있던 내용이지만, 모바일 웹페이지를 제작할 때는 반드시 <meta name="vie

오늘은 나머지 모바일 네이버 페이지의 하단 부분을 클로닝했다.스크롤바를 숨기기 위해서 아래 내용을 참조했다. 실제 배포를 해야 하는 경우엔 아래의 코드를 전부 신경써야 할 것이다.PC버전 클릭하면 이전에 클로닝한 pc버전과 연결되도록 했다.또한 상단의 별 로고와 가장

드디어 자바스크립트 공부 시작!!!!!!!기존엔 ios와 안드로이드 앱을 제작하는 언어가 달랐지만(물론 지금도 다른 언어로 개발 가능), 이제 웹 개발 언어(html, css, JS)만 가지고도 모든 영역의 앱을 개발할 수 있다.노드js를 이용해 서버개발작업도 제작 가

어제에 이어 자바스크립트 기본을 공부했다.null은 값에 빈 값을 할당한 상태null은 데이터 타입이 object임(이는 수정할 수 없는 버그 때문임 by official documents)!null => true, !!null => false10 + null => 1

어제에 이어 자바스크립트 기본 내용을 공부하였다.위의 object에서 어디 사는 지 불러오고 싶다면, 아래처럼 가능. 두 가지 모두 알아야 함.1) student.city2) student'city'작성되는 방식은 대표적으로 아래와 같다. 하는 일은 함수와 거의 같지만

오늘은 if 조건문, 반복문, 호이스팅에 대해 알아 보았다.형태: if (조건) { 조건이 true일 경우 실행되는 코드 }즉, 조건이 false가 되는 형태 예를 들면, null, undefined, 0, 빈문자열들과 같은 조건들은 if 조건을 false로 만들어

저번 시간에 이어 JS의 기본적이고 중요한 특징을 배우는 시간이다.초기 변수와 조건을 설정해준다.조건을 만족할 때 원하는 행동을 작성해준다.조건이 무한루프에 빠지지 않게 신경써준다.필요한 요소는 while iteration과 같다.사용하는 형식만 다르다.for loop

배웠던 기본적인 자바스크립트 지식을 활용하여 몇가지 간단한 application들을 만들어 봤다.버튼 클릭할 때마다, 무작위의 색상 hex code에 따라 배경 색상이 바뀌게 된다.버튼 클릭할 때마다, 무작위의 quote가 화면에 출력된다.form을 submit 이벤트

객체지향 프로그래밍 (Object Oriented Programming)에 대하여 알아 보았다.class를 이용하여 만들어낸 것들을 instance라고 함흔한 비유: 붕어빵틀과 붕어빵 -> 붕어빵틀: Class / 붕어빵: instances우리가 Class를 생성할 때

오늘은 Class, prototype을 이용하여 배열 속 요소의 글자들을 하나씩 출력해주는, 타이핑 효과를 보여주는 Typewriter 앱을 개발해보았다.해당 method의 기능은 mdn에서 더 자세하게 참고할 수 있다.str.substring(이상, 미만)의 형태로

오늘은 DOM에 대해 알아 보았다.in JavascriptElement: html의 태그들을 말한다.attribute: id, class, src, href, alt 등 html 태그 내에 우리가 정의해주는 것들text: html의 열린태그 닫힌태그 내에 들어가는 내용

같이 진행할 기업이 어디인지, 어떤 의뢰를 하였는지 파악아직 기업의 구체적인 기획안을 확인해보지 못한 상황이라 웹빌더에 관하여 팀에서 의견을 나눔웹페이지 제작 진행에 사용할 웹빌더를 잠정적으로 정해둔 상태직접 우리가 배운 지식을 실제 프로젝트에 쓸 수 있다는 기대감 및