실습 <Table> 나만의 달력 html table 배운내용을 이용해서 4월~7월 달력 만들기 도전!! table이 상당히 까다로운,, 그런 친구였다. 대략적인 순서 우선 테이블을 각 달마다 나눠서 총 4개의 테이블을 생성했다. 배치를위해서 april, may를 하나의 section으로 묶고, jun, july를 하나의 section으로 묶었다. 섹션안에서 float : left ; , float : right ; 를 사용... 실습실습 구글 폼 만들기 앞에서 배운 html form을 이용하여 만든 구글폼이다. 아직 css를 완벽하게 할 줄 아는 것은 아니지만 css특강으로 배운 지식들로 끄적끄적 해봤는데 잘 만들어진 것 같아 뿌듯하다!! label과 radio , checkbox의 연결 체크박스를 클릭했을 때 뿐만 아니라 옆에 나와있는 한글을 클릭했을때도 박스가 체크되게 구현해야하는데, 제대로 구현이 안됐었다. 아마 수업도중 이것저것 하다... 실습실습 2021년 7월 20일 17일차 color: #000000; #main_header .search_wrap input:focus { #main_header .search_wrap button { main #news_wrap .news_lists { main #blog_wrap { main #blog_wrap .blog_header { main #blog_wrap .blog_header .left_header { main #... 실습네이버카피캣네이버카피캣네이버 210727 개발일지 📌 학습한 내용 네이버 블로그 실습 전체 코드 : 상단 영역 .blog-header-top 자체에 padding-top값을 넣기에는 .blog-heder-right 부분과 마찰이 생기기 때문에 (.blog-header-right부분은 padding의 영향을 받지 않도록 해야 함. 따라서 전체의 높이 값을 만들어 준것.) <button> : 회색 배경색을 디폴트로 가지고 있음. cursor: ... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 8/12[목] 국내외 사이트 카피캣 (네이버 이스포츠 2편) 💡 학습한 내용 ✔️ 네이버 이스포츠 왼쪽 영역 💨 위와 같은 형식으로 만드는 법 ! ❗️❕ fixed 된 메뉴 부분을 스크롤 할 때 아래 속성보다 위로 나오게 할려면 z-index를 최대치로 입력하는 것이 좋다. ❗️❕ 말 줄임표 만드는 법 ❌ 학습한 내용 중 어려웠던 점 / 해결방법 수업을 듣는 것에는 어려웠던 점이 없지만 나의 자세와 태도가 바뀐 것이 문제인 것같다. 매번 시작할 때는 ... 네이버이스포츠실습네이버이스포츠 7/30[금] 국내외 사이트 카피캣 (네이버 뉴스 2편) 💡 학습한 내용 🟣 네이버 뉴스 왼쪽 영역 ✔️ 말 줄임표 만드는 방법 🟣 네이버 뉴스 오른쪽 영역 ❌ 학습한 내용 중 어려웠던 점 / 해결방법 강의 중간에 어처구니 없는 실수를 했다. border 속성을 적용할 때는 border: solid 1px black 이런 식으로 기입을 해야 하는데 border:black만 기입을 해놓고 왜 적용이 안되는 거지 하고 있었다. 웹사이트를 보면서 먼저 ... 실습네이버뉴스네이버뉴스 210720 개발일지 📌 학습한 내용 네이버 메인 실습 2 1. 네이버 오른쪽 flex-wrap: wrap;이 적용된 상태에서, justify-content: space-between;을 사용했을 시, 컨텐츠의 갯수가 동일하지 않으면 좌우 끝으로 극단적으로 배치될 수 있다. (코드에서는 해당 방법 사용) 👉 float: left 사용 2. 네이버 하단 vertical-align: ;의 속성값으로 top, midd... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 210726 개발일지 📌 학습한 내용 네이버 웹툰 실습 2 전체 코드 : 웹툰 메인 오른쪽 영역 초기에 디폴트값으로 ol { list-style: none }을 줬기 때문에 나타나지 x -> { list-style: decimal; } 넣어줌( 그러나 이 숫자는 영역을 벗어나서 나타남) : 공간을 벗어나는 글자에 대해 '...'처리 < html 특수문자 > : 공백을 만들어주는 특수문자, 사용한 만큼... 대구AI스쿨CSS웹프로그래밍실습htmlCSS [Alongside] 예제로 배우는 C#_02 C#의 두 가지 실행 환경 Console Application CLI(Command-Line Interface) 환경 Windows Forms 앱 .NET WinForms 앱 제작이 가능한 템플릿 Windows Forms 파일 목록 Form1.cs Form 디자인 제작 영역 오른쪽 마우스 >> View Code: 코드 작성 영역 파일명을 바꾸면 전체 코드가 바뀐다 Program.cs Cons... 실습WinFormsCC [Alongside] 예제로 배우는 C#_04 예외 처리 사용자가 의도한 바와 다른 값을 입력하는 경우를 위한 처리가 필요 ex:) 계산기 프로그램에 아무 값도 입력하지 않는 경우 예외 처리를 하지 않으면 컴파일 에러가 난다 빈 값을 처리하는 방법을 제시하지 않았기 때문이다 조건문을 통해 예외 처리를 한다 MessageBox Windows의 에러창 .Show와 함께 사용 return return이 포함된 함수를 탈출한다 함수 선언문의 반... 실습WinFormsCC 210805 개발일지 Angular, React, Vue 와 같은 도구(자바스크립트 프레임워크)들에서 사용하는 CSS를 작성하는 방법(CSS-in-JS) 때문이다. CSS-in-JS : 자바스크립트를 기반으로 해 CSS를 적용하는 법 해당 도구들을 활용해 디자인을 적용하면 랜덤하게 숫자&알파벳 조합으로 클래스 명을 완성시킴. box-shadow : 해당 영역에 그림자 삽입 placeholder 속성값 색상 변경 ... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 210721 개발일지 📌 학습한 내용 네이버 쇼핑 실습 1. 상단 영역 2. 중간 영역 첫 번째 'list-item' '네이버 메인 실습'에서 main { padding-top: 20px;} 을 적용했기 때문에 자동으로 main 윗부분에 공백이 생김 <span> : inline 요소의 성격을 갖고 있어, margin-bottom 속성을 사용할 수 없음 width: auto; : 안에 있는 글자 컨텐츠로 width... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 7/29[목] 국내외 사이트 카피캣 (네이버 뉴스 1편) 💡 학습한 내용 ✅ 네이버 뉴스 상단 영역 💙 결과물 ✔️ 중앙정렬 하기 : 위아래 여백 없이 가로 중앙에 배치되는 가장 기본적인 서식 이미지 참고 사이트 : ❗️❕ TIP 💨 자주 사용하는 속성들을 CSS에 만들어 놓은 다음 HTML class에 입력하면 간편하게 사용할 수 있다. ✔️ 💨 i태그는 inline 요소이기 때문에 display: block;을 설정해야 공간에 대한 크기를 가질... 실습네이버뉴스네이버뉴스 210728 개발일지 📌 학습한 내용 네이버 블로그 실습 2 전체 코드 : 블로그 메인 영역 블로그 메인 오른쪽 border-width: ; : 테두리 두께 - border-width: 상하좌우; - border-width: 상하 좌우; - border-width: 상 좌우 하; - border-width: 상 우 하 좌(상단부터 시계방향); white-space: ; : 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 7/13 키즈가오 1편 실습 (1) 💡 학습한 내용 ✅ intro ✅ farm1 ✅ farm2 ✅ famr3 ✔️ 패럴랙스 : 스크롤에 따라 이벤트가 발생하는 기능 ✔️ <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 스마트폰으로 접속시 화면비율을 맞추기 위해 입력해야 하는 코드 ⭐️ 기록해두면 좋을 거 같은 부분 ✔️ body {overflow... 키즈가오실습실습 210827 개발일지 : if조건문을 보완하기 위함 (if문 안에 if문을 넣는 것) prompt : 브라우저에서 사용자에게 값을 전달받기 위한 팝업창을 띄우는 메서드. 모든 브라우저에서 사용 가능하며 팝업창의 형태와 디자인은 브라우저 마다 다름. alert : 브라우저에서 사용자에게 정보 전달만을 수행하는 메서드. parseInt : 문자 데이터 타입으로 전달된 숫자를, 숫자 데이터 타입(정수형)으로 바꿔줌. ... JavaScript대구AI스쿨웹프로그래밍지역변수스코프실습전역변수호이스팅조건문htmlJavaScript 7/12 미디어쿼리 실습 💡 학습한 내용 ✔️ Menu 만들기 💨 html 💨 css pc 작업 .media-menu { list-style: none; padding: 0; display: flex; align-items: center; .media-menu a { .media-menu li { border: solid 5px red; 💨 css media 작업 @media (min-width: 320px) and... CSS미디어쿼리실습CSS 실습 - HELBAK 실무 팁 (2) CSS 작업할 때 html, body { width: 100%; height: 100%; } 디폴트로 넣어주기 (5) class별로 역할을 명확히 구분할 것 (6) class 나열할 때 붙여 쓰는 것과 띄어 쓰는 것의 차이 — .payment-icon .one: payment-icon의 자식인 one을 선택 — .payment-icon.one: 여러 payment-icon 중... 클론코딩대구AI스쿨CSS실습htmlCSS 210714 개발일지 📌 학습한 내용 'Forest1' PC.ver 'Forest1' Animation 'Forest1' Mobile.ver 'Forest2' PC.ver margin-top 과 top의 차이 'Forest2' Animation 'Forest2' Mobile.ver 이전 요소로 인해 그 다음에 나오는 요소가 의도와는 다르게 나오는 경우가 있음. 'Forest3' PC.ver top, left, b... 대구AI스쿨CSS웹프로그래밍실습htmlCSS
<Table> 나만의 달력 html table 배운내용을 이용해서 4월~7월 달력 만들기 도전!! table이 상당히 까다로운,, 그런 친구였다. 대략적인 순서 우선 테이블을 각 달마다 나눠서 총 4개의 테이블을 생성했다. 배치를위해서 april, may를 하나의 section으로 묶고, jun, july를 하나의 section으로 묶었다. 섹션안에서 float : left ; , float : right ; 를 사용... 실습실습 구글 폼 만들기 앞에서 배운 html form을 이용하여 만든 구글폼이다. 아직 css를 완벽하게 할 줄 아는 것은 아니지만 css특강으로 배운 지식들로 끄적끄적 해봤는데 잘 만들어진 것 같아 뿌듯하다!! label과 radio , checkbox의 연결 체크박스를 클릭했을 때 뿐만 아니라 옆에 나와있는 한글을 클릭했을때도 박스가 체크되게 구현해야하는데, 제대로 구현이 안됐었다. 아마 수업도중 이것저것 하다... 실습실습 2021년 7월 20일 17일차 color: #000000; #main_header .search_wrap input:focus { #main_header .search_wrap button { main #news_wrap .news_lists { main #blog_wrap { main #blog_wrap .blog_header { main #blog_wrap .blog_header .left_header { main #... 실습네이버카피캣네이버카피캣네이버 210727 개발일지 📌 학습한 내용 네이버 블로그 실습 전체 코드 : 상단 영역 .blog-header-top 자체에 padding-top값을 넣기에는 .blog-heder-right 부분과 마찰이 생기기 때문에 (.blog-header-right부분은 padding의 영향을 받지 않도록 해야 함. 따라서 전체의 높이 값을 만들어 준것.) <button> : 회색 배경색을 디폴트로 가지고 있음. cursor: ... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 8/12[목] 국내외 사이트 카피캣 (네이버 이스포츠 2편) 💡 학습한 내용 ✔️ 네이버 이스포츠 왼쪽 영역 💨 위와 같은 형식으로 만드는 법 ! ❗️❕ fixed 된 메뉴 부분을 스크롤 할 때 아래 속성보다 위로 나오게 할려면 z-index를 최대치로 입력하는 것이 좋다. ❗️❕ 말 줄임표 만드는 법 ❌ 학습한 내용 중 어려웠던 점 / 해결방법 수업을 듣는 것에는 어려웠던 점이 없지만 나의 자세와 태도가 바뀐 것이 문제인 것같다. 매번 시작할 때는 ... 네이버이스포츠실습네이버이스포츠 7/30[금] 국내외 사이트 카피캣 (네이버 뉴스 2편) 💡 학습한 내용 🟣 네이버 뉴스 왼쪽 영역 ✔️ 말 줄임표 만드는 방법 🟣 네이버 뉴스 오른쪽 영역 ❌ 학습한 내용 중 어려웠던 점 / 해결방법 강의 중간에 어처구니 없는 실수를 했다. border 속성을 적용할 때는 border: solid 1px black 이런 식으로 기입을 해야 하는데 border:black만 기입을 해놓고 왜 적용이 안되는 거지 하고 있었다. 웹사이트를 보면서 먼저 ... 실습네이버뉴스네이버뉴스 210720 개발일지 📌 학습한 내용 네이버 메인 실습 2 1. 네이버 오른쪽 flex-wrap: wrap;이 적용된 상태에서, justify-content: space-between;을 사용했을 시, 컨텐츠의 갯수가 동일하지 않으면 좌우 끝으로 극단적으로 배치될 수 있다. (코드에서는 해당 방법 사용) 👉 float: left 사용 2. 네이버 하단 vertical-align: ;의 속성값으로 top, midd... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 210726 개발일지 📌 학습한 내용 네이버 웹툰 실습 2 전체 코드 : 웹툰 메인 오른쪽 영역 초기에 디폴트값으로 ol { list-style: none }을 줬기 때문에 나타나지 x -> { list-style: decimal; } 넣어줌( 그러나 이 숫자는 영역을 벗어나서 나타남) : 공간을 벗어나는 글자에 대해 '...'처리 < html 특수문자 > : 공백을 만들어주는 특수문자, 사용한 만큼... 대구AI스쿨CSS웹프로그래밍실습htmlCSS [Alongside] 예제로 배우는 C#_02 C#의 두 가지 실행 환경 Console Application CLI(Command-Line Interface) 환경 Windows Forms 앱 .NET WinForms 앱 제작이 가능한 템플릿 Windows Forms 파일 목록 Form1.cs Form 디자인 제작 영역 오른쪽 마우스 >> View Code: 코드 작성 영역 파일명을 바꾸면 전체 코드가 바뀐다 Program.cs Cons... 실습WinFormsCC [Alongside] 예제로 배우는 C#_04 예외 처리 사용자가 의도한 바와 다른 값을 입력하는 경우를 위한 처리가 필요 ex:) 계산기 프로그램에 아무 값도 입력하지 않는 경우 예외 처리를 하지 않으면 컴파일 에러가 난다 빈 값을 처리하는 방법을 제시하지 않았기 때문이다 조건문을 통해 예외 처리를 한다 MessageBox Windows의 에러창 .Show와 함께 사용 return return이 포함된 함수를 탈출한다 함수 선언문의 반... 실습WinFormsCC 210805 개발일지 Angular, React, Vue 와 같은 도구(자바스크립트 프레임워크)들에서 사용하는 CSS를 작성하는 방법(CSS-in-JS) 때문이다. CSS-in-JS : 자바스크립트를 기반으로 해 CSS를 적용하는 법 해당 도구들을 활용해 디자인을 적용하면 랜덤하게 숫자&알파벳 조합으로 클래스 명을 완성시킴. box-shadow : 해당 영역에 그림자 삽입 placeholder 속성값 색상 변경 ... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 210721 개발일지 📌 학습한 내용 네이버 쇼핑 실습 1. 상단 영역 2. 중간 영역 첫 번째 'list-item' '네이버 메인 실습'에서 main { padding-top: 20px;} 을 적용했기 때문에 자동으로 main 윗부분에 공백이 생김 <span> : inline 요소의 성격을 갖고 있어, margin-bottom 속성을 사용할 수 없음 width: auto; : 안에 있는 글자 컨텐츠로 width... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 7/29[목] 국내외 사이트 카피캣 (네이버 뉴스 1편) 💡 학습한 내용 ✅ 네이버 뉴스 상단 영역 💙 결과물 ✔️ 중앙정렬 하기 : 위아래 여백 없이 가로 중앙에 배치되는 가장 기본적인 서식 이미지 참고 사이트 : ❗️❕ TIP 💨 자주 사용하는 속성들을 CSS에 만들어 놓은 다음 HTML class에 입력하면 간편하게 사용할 수 있다. ✔️ 💨 i태그는 inline 요소이기 때문에 display: block;을 설정해야 공간에 대한 크기를 가질... 실습네이버뉴스네이버뉴스 210728 개발일지 📌 학습한 내용 네이버 블로그 실습 2 전체 코드 : 블로그 메인 영역 블로그 메인 오른쪽 border-width: ; : 테두리 두께 - border-width: 상하좌우; - border-width: 상하 좌우; - border-width: 상 좌우 하; - border-width: 상 우 하 좌(상단부터 시계방향); white-space: ; : 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 7/13 키즈가오 1편 실습 (1) 💡 학습한 내용 ✅ intro ✅ farm1 ✅ farm2 ✅ famr3 ✔️ 패럴랙스 : 스크롤에 따라 이벤트가 발생하는 기능 ✔️ <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 스마트폰으로 접속시 화면비율을 맞추기 위해 입력해야 하는 코드 ⭐️ 기록해두면 좋을 거 같은 부분 ✔️ body {overflow... 키즈가오실습실습 210827 개발일지 : if조건문을 보완하기 위함 (if문 안에 if문을 넣는 것) prompt : 브라우저에서 사용자에게 값을 전달받기 위한 팝업창을 띄우는 메서드. 모든 브라우저에서 사용 가능하며 팝업창의 형태와 디자인은 브라우저 마다 다름. alert : 브라우저에서 사용자에게 정보 전달만을 수행하는 메서드. parseInt : 문자 데이터 타입으로 전달된 숫자를, 숫자 데이터 타입(정수형)으로 바꿔줌. ... JavaScript대구AI스쿨웹프로그래밍지역변수스코프실습전역변수호이스팅조건문htmlJavaScript 7/12 미디어쿼리 실습 💡 학습한 내용 ✔️ Menu 만들기 💨 html 💨 css pc 작업 .media-menu { list-style: none; padding: 0; display: flex; align-items: center; .media-menu a { .media-menu li { border: solid 5px red; 💨 css media 작업 @media (min-width: 320px) and... CSS미디어쿼리실습CSS 실습 - HELBAK 실무 팁 (2) CSS 작업할 때 html, body { width: 100%; height: 100%; } 디폴트로 넣어주기 (5) class별로 역할을 명확히 구분할 것 (6) class 나열할 때 붙여 쓰는 것과 띄어 쓰는 것의 차이 — .payment-icon .one: payment-icon의 자식인 one을 선택 — .payment-icon.one: 여러 payment-icon 중... 클론코딩대구AI스쿨CSS실습htmlCSS 210714 개발일지 📌 학습한 내용 'Forest1' PC.ver 'Forest1' Animation 'Forest1' Mobile.ver 'Forest2' PC.ver margin-top 과 top의 차이 'Forest2' Animation 'Forest2' Mobile.ver 이전 요소로 인해 그 다음에 나오는 요소가 의도와는 다르게 나오는 경우가 있음. 'Forest3' PC.ver top, left, b... 대구AI스쿨CSS웹프로그래밍실습htmlCSS