실습 <Table> 나만의 달력 html table 배운내용을 이용해서 4월~7월 달력 만들기 도전!! table이 상당히 까다로운,, 그런 친구였다. 대략적인 순서 우선 테이블을 각 달마다 나눠서 총 4개의 테이블을 생성했다. 배치를위해서 april, may를 하나의 section으로 묶고, jun, july를 하나의 section으로 묶었다. 섹션안에서 float : left ; , float : right ; 를 사용... 실습실습 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 #... 실습네이버카피캣네이버카피캣네이버 210729 개발일지 📌 학습한 내용 네이버 뉴스 실습 상단 영역 class로 주요 레이아웃을 단순화 (반복적으로 사용하는 기능들을 css에서 미리 만들어 줌) -> 코드 분량을 간소화 시킬 수 있음 placeholder : <input> 영역에 어떠한 정보를 입력해야 하는 지 사용자에게 알려줄 때 사용하는 html 속성 메인 영역 👉 사이트 카피캣 실습시, JS 기능을 끄고 싶을 때, 부모가 position: ... CSS웹프로그래밍대구AI스쿨html실습CSS 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 7/28[수] 국내외 사이트 카피캣 (네이버 블로그 2.3편) 💡 학습한 내용 ✅ 네이버 블로그 2편 블로그 메인 오른쪽 영역 🐋결과물 ✔️ 글자 옆에 icon을 넣는 다양한 방법 중 하나. 블로그 메인 푸터 영역 ✅ 네이버 블로그 3편 블로그 챌린지 프로그램 🙅♀️ 학습한 내용 중 어려웠던 점 / 해결방법 오늘 배운 블로그 작업은 이전에 했던 작업들과 비슷했다. 비슷한 내용이 계속 반복되고 있지만 어떤 속성을 사용해야 하는지 빠르게 생각하지 못하는 ... 네이버블로그실습네이버블로그 실습 - 키즈가오(3) 📌학습 내용 실무 팁 (1) position에 대한 감이 생길 때까지는 큰 공간(div)을 작업할 때 일단 position: relative;로 설정해두고 배치 작업을 진행해도 괜찮음 (3) 한 프로젝트에서 id와 class 이름은 일관성 있게 지어져야 함 (대소문자, 숫자, 특수기호 사용법 등) 💡 설계:style.css 💡 NIGHT2 애니메이션: animation.css 💡 NIGHT2... 클론코딩대구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 210712 개발일지 📌 학습한 내용 미디어쿼리 실습 1. PC version & mobile version 메뉴바 2. Helbak 메인 페이지 3. Bootstrap Agency 메인페이지 - Portfolio PC version PC version 2 mobile version 미디어쿼리를 적용하는 방법 1. CSS 파일 안쪽에 미디어 쿼리 코드 작성 (실무에서 가장 많이 사용) @media (min-wid... 웹프로그래밍대구AI스쿨실습미디어쿼리대구AI스쿨
<Table> 나만의 달력 html table 배운내용을 이용해서 4월~7월 달력 만들기 도전!! table이 상당히 까다로운,, 그런 친구였다. 대략적인 순서 우선 테이블을 각 달마다 나눠서 총 4개의 테이블을 생성했다. 배치를위해서 april, may를 하나의 section으로 묶고, jun, july를 하나의 section으로 묶었다. 섹션안에서 float : left ; , float : right ; 를 사용... 실습실습 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 #... 실습네이버카피캣네이버카피캣네이버 210729 개발일지 📌 학습한 내용 네이버 뉴스 실습 상단 영역 class로 주요 레이아웃을 단순화 (반복적으로 사용하는 기능들을 css에서 미리 만들어 줌) -> 코드 분량을 간소화 시킬 수 있음 placeholder : <input> 영역에 어떠한 정보를 입력해야 하는 지 사용자에게 알려줄 때 사용하는 html 속성 메인 영역 👉 사이트 카피캣 실습시, JS 기능을 끄고 싶을 때, 부모가 position: ... CSS웹프로그래밍대구AI스쿨html실습CSS 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 7/28[수] 국내외 사이트 카피캣 (네이버 블로그 2.3편) 💡 학습한 내용 ✅ 네이버 블로그 2편 블로그 메인 오른쪽 영역 🐋결과물 ✔️ 글자 옆에 icon을 넣는 다양한 방법 중 하나. 블로그 메인 푸터 영역 ✅ 네이버 블로그 3편 블로그 챌린지 프로그램 🙅♀️ 학습한 내용 중 어려웠던 점 / 해결방법 오늘 배운 블로그 작업은 이전에 했던 작업들과 비슷했다. 비슷한 내용이 계속 반복되고 있지만 어떤 속성을 사용해야 하는지 빠르게 생각하지 못하는 ... 네이버블로그실습네이버블로그 실습 - 키즈가오(3) 📌학습 내용 실무 팁 (1) position에 대한 감이 생길 때까지는 큰 공간(div)을 작업할 때 일단 position: relative;로 설정해두고 배치 작업을 진행해도 괜찮음 (3) 한 프로젝트에서 id와 class 이름은 일관성 있게 지어져야 함 (대소문자, 숫자, 특수기호 사용법 등) 💡 설계:style.css 💡 NIGHT2 애니메이션: animation.css 💡 NIGHT2... 클론코딩대구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 210712 개발일지 📌 학습한 내용 미디어쿼리 실습 1. PC version & mobile version 메뉴바 2. Helbak 메인 페이지 3. Bootstrap Agency 메인페이지 - Portfolio PC version PC version 2 mobile version 미디어쿼리를 적용하는 방법 1. CSS 파일 안쪽에 미디어 쿼리 코드 작성 (실무에서 가장 많이 사용) @media (min-wid... 웹프로그래밍대구AI스쿨실습미디어쿼리대구AI스쿨