웹 프로그래밍

html이 무엇인지 어떻게 구성되는지 알게 된 첫 시간

설계도면 실습 📱카카오톡 친구 목록

css를 처음으로 시작했다

카카오톡 네이버 화면 만들기

레이아웃

레이아웃 정렬

css 레이아웃 실습

css animation

만들어진 애니메이션 코드를 활용할 수 있는 사이트animate.csscode.penanimate.css 사이트의 코드들을 활용하려면 해당 링크를 연결해주어야 함오늘은 짧은 분량의 강의 여서 앞서 배웠던 내용들을 복습하는 시간을 가졌다.position 속성이 너무 헷갈려

💛미디어 쿼리 반응형 적응형 웹사이트를 만들 때 사용 >적응형 : 뚝뚝 끊겨감 고정값 픽셀을 가지고 만드는거 반응형: %를 활용해서 만들어감 , 자연스러운 resize ->

미디어 쿼리를 활용한 메뉴판 만들기

키즈가오사이트

키즈가오 실습

키즈가오 사이트 만들기 실습 마무리

두번째 카피캣

naver 카피캣 실습

네이버 카피캣

네이버 쇼핑페이지 카피캣

네이버 카피캣 쇼핑페이지

네이버 웹툰 카피캣

네이버 웹툰 카피캣

💻 학습 내용 css | blog header & main_left 📝 마무리

네이버 블로그 카피캣 1,2

네이버 뉴스 헤드라인 카피캣

뉴스 페이지 카피캣

💻 학습 내용 🛫GIT-HUB HTML | naverentnews_haeder CSS | navernewsent_header HTML | naverentnewsmainleft(1)) [

💻 학습 내용 🛫GIT-HUB HTML | naverentnewsmainleft(2)) CSS | naverentnewsmainleft(2)) mainleft2 ![](https://images.velog.io/images/heo_jeongmin/post/d9dd9eec-0eb9-43c2-a427-47b7687838d1/%E1%84%89%E1%85%B...

💻 학습 내용 🛫 GIT-HUB HTML | naverentnewsmainright CSS | naverentnewsmainright entnewsmain_right ![](https://images.velog.io/images/heo_jeongmin/post/60d6962f-8dad-4be4-8508-b5c06468ead9/%E1%84%89%E1%8...

네이버 게임 header

네이버 게임 main_left

네이버 게임 카피캣

💻 학습 내용 🛫 GIT-HUB HTML | naveresportsheader CSS | naveresportsheader HTML | naveresportsmain_top [CSS | naver_es

💻 학습 내용 🛫 GIT-HUB HTML | naveresportsmain_left CSS | naveresportsmain_left esportsmainleft ![](https://images.velog.io/images/heo_jeongmin/post/776

💻 학습내용 🛫GIT-HUB HTML | naveresportsmain_right CSS | naveresportsmain_right main_right ![](https://images.velog.io/images/heo_jeongmin/post/4369819c-5ee6-4806-b328-05cdd72257ae/%E1%84%89%E1%85%B3%E1%...

네이버 오디오 카피캣

💻 학습 내용 🛫 GIT-HUB HTML | naveraudiomain_left CSS | naveraudiomain_left main_left ![](https://images.velog.io/images/heo_jeongmin/post/762c448f-2238-4430-b9ae-65dad4f5e3d6/%E1%84%89%E1%85%B3%E1%84%8F...

💻 학습 내용 🛫 GIT-HUB HTML | naveraudiomain_right CSS | naveraudiomain_right HTML | naveraudiofooter [CSS | naver_a

💻 학습 내용 🛫 GIT-HUB HTML | twitch_header CSS | twitch_header HTML | twitch_left [CSS | twitch_left](https://github.com/jjjeongmin/AI-school/

HTML | twitch_contentCSS | twitch_content🖤 트위치는 header영역을 제외하고 content 내부 에서만 스크롤이 만들어진다. 이럴 때는 overflow-y: auto; 코드를 작성해 주면 된다.➜ overflow-y: auto; :

HTML | twitch_content_2_footerCSS | twitch_content_2_footer🖤 이미지가 이동하는 효과 주는 방법 ⭐️ transition 태그 설명⭐️transform 태그 설명💛 트위치 카피캣이 모두 끝이 났다. 트위치를 카피캣 하면

⭐️ reset.css사이트 카피캣을 진행할 때 초기화 작업을 해줬는데 이게 미리 작성된 코드가 있는데 그게 바로 reset.css 라고 한다기존의 html태그가 갖고 있는 모든 걸 다 초기화 해준다.브라우저마다 고유의 css를 갖고 있는데 그걸 전부 다 초기화커스텀

💛 유튜브 카피캣을 오늘 시작하였다. 메인 페이지를 카피캣 하는데 오늘은 대충 큰 틀만 작성하는 부분이었다.큰 틀만 대충 작성하는 부분이라서 크게 어려운 부분은 없었다.position을 이용하여 공간의 크기를 설정했다.

HTML | youtube_top_navCSS | youtube_top_nav🖤 youtube_top_nav 부분을 left / center / right 3 군데로 나누었다.그 중 center 부분에 input 태그와 button 태그가 x축으로 정렬 되지 않고 b

youtub_left_nav오늘은 유튜브 레프트 부분과 메인 부분을 수업하였는데 트위치와 했던 방식이 비슷해서 따라하는데 큰 어려움은 없었다.

HTML | youtube_left_nav CSS | youtube_left_navHTML | youtube_mainCSS | youtube_main ⭐️ word-break 설명🖤 단어별로 줄바꿈을 하고 싶을 때 keep-all을 입력🖤 글자 단위로 줄바꿈을 하고

HTML | youtube_channelCSS | youtube_channelHTML | youtube_exploreCSS | youtube_explore💛 평소에 많이 사용하는 유튜브 사이트 카피캣을 마무리 하였다.카피캣을 여러번 진행하면서 position의 편리함

HTML | naver_mobile_1CSS | naver_mobile_1🖤 vh : 기기 화면의 높이값으로 100% 맞추겠다는 뜻이다.vh = viewport height 약자임vh는 화면의 기준으로 하기 때문에 반응형 웹사이트 제작 시에 유용하게 사용 꼭 widt

HTML | naver_mobile_2CSS | naver_mobile_2🖤 footer에서 before를 이용하여 만든 | 를 로그인, 이용약관 앞에서는 삭제하기 위하여 nth-child(1),nth-child(4)를 활용하여 삭제하려고 하였다.하지만 html 코드

🖤 자바스크립트는 인간에게 친숙한 언어라고 볼 수 있다. high level language 중 하나가 자바스크립트 언어이다.입문하는 단계에서 빠르게 습득할 수 있는 언어이다.🖤 하이브리드 앱자바스크립트 css 익히게 되면 안드로이드 앱, 앱스토어 앱을 출시할 수

console.log(typeof 10);console.log(typeof "Hello World");🖤 공통점 : 둘다 값이 없는 상태 🖤 차이점(가끔 면접 질문에서 물어보니까 기억해두자)null : 변수 초기화로 명시적으로 빈 값을 변수 안에 할당한 상태un