웹프로그래밍 210729 개발일지 📌 학습한 내용 네이버 뉴스 실습 상단 영역 class로 주요 레이아웃을 단순화 (반복적으로 사용하는 기능들을 css에서 미리 만들어 줌) -> 코드 분량을 간소화 시킬 수 있음 placeholder : <input> 영역에 어떠한 정보를 입력해야 하는 지 사용자에게 알려줄 때 사용하는 html 속성 메인 영역 👉 사이트 카피캣 실습시, JS 기능을 끄고 싶을 때, 부모가 position: ... CSS웹프로그래밍대구AI스쿨html실습CSS 210728_[23]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_6_NAVER_blog_2_end 오늘은 블로그 메인 오른쪽 영역, 메인 푸터 영역. 블로그 챌린지 프로그램 영역에 대한 제작은 진행하였다. 메인 오른쪽 영역 △ 오른쪽 로그인 영역 △ 로그인 영역 밑에 부분 메인 하단 영역 △ footer 영역 블로그 챌린지 프로그램 △ 하단 영역은 blog main page와 동일하게 적용 HTML code CSS code 블로그 상세 페이지에서 border값 설정 css code HTM... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습htmlCSS #11_미디어 쿼리 실습 media query 속성을 사용하여 브라우저 크기 변화에 따라 메뉴의 정렬방식을 변경한다. 모바일 버전의 margin값이 사라지지 않은 것은 가상 선택자의 오타 때문이다. 브라우저 화면이 모바일 버전의 영역으로 줄어들면 로고영역과 메뉴영역이 아래위로 배치되도록 하여 화면이 줄어들어도 메뉴의 가독성이 줄어들지 않는다. position속성과 flex속성을 적절히 사용하여 오브젝트들을 배치할 수... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS Dev Log #4 - 7월 1일 ✅ 가상선택자 ✅ 프로젝트에 폴더를 설정하는 법 ✅ 서버에 올려서 도메인 주소로 확인하는 법 ✅ 카카오 친구 리스트에 디자인 입히기(실습) ✅ 네이버 리빙 게시판에 디자인 입히기(실습) 1. 가상 선택자 가상 선택자란 선택한 요소에 어떠한 행동과 규칙에 의해서 디자인을 적용하는 방식이다. 종류는 크게 두가지로 나누면 행동과 관련된 디자인의 가상 선택자와 일정한 규칙을 바탕으로한 디자인의 가상... 대구AI스쿨CSS웹프로그래밍개발일지htmlCSS 210802_[26]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_8_NAVER_ent-news_1_상단_왼쪽영역 (1) 페이지 실습 네이버 연예 뉴스의 상단작업과 왼쪽 영역에 대한 작업을 진행하였다. (2) 학습한 내용 상단 영역 기초 작업 이전에 학습하였던 뉴스의 상단과는 다르게 연예 영역은 따로 container를 지정해줄 필요가 없다. (wide하게 x축으로 뻗어 있음) HTML code 상단 header영역에서는 크게 ent-header-left ent-header-center ent-heade... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210813_[35]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_11_NAVER_esport_3_End___12_NAVER_audioclip_1 (1) 페이지 실습 NAVER e스포츠 오른쪽 부분 제작으로 마지막 작업을 하였고, 네이버 오디오 클립 ( )이라고 하는 웹북 리딩 서비스 페이지의 상단 영역 작업을 진행하였다. △ e스포츠 오른쪽 영역 △ 네이버 오디오 클립 상단 영역 (2) 학습한 내용 google 웹폰트 사용 fonts.google.com에는 무료로 사용할 수 있는 여러가지 웹 폰트를 제공하므로 웹 문서에 링크해서 쉽게... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 웹 프로그래밍 #2 [21.6.29] 1. 이미지를 임시로 채워넣는 방법을 배웠다 뒤에 숫자 150은 크기를 설정하는 부분 2.Inline, Block 속성 html에서 사용되는 태그가 Inline 속성인지 Block 속성인지 구분해서알아둬야 한다 Inline : x축으로 나란히 배열되며 공간에 대한 크기 설정이 되지 않음 Block : 줄 바꿈이 일어남 3. section/article 태그는 h태그와 함께 section, a... 웹프로그래밍대구AI스쿨대구AI스쿨 210806_[30]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_9_NAVER_game_2__게임 라운지 인기글 어제에 이어 네이버 게임 ( ) 페이지의 왼쪽 중간 영역에 대해서 학습하였다. 게임 라운지 인기글까지 작업을 하였고, 과거에 실습하였던 부분들과 비교하였을때 어려운점이나 특이점은 없었다. css code font-weight 주의할점 font-size와는 다르게 수치를 입력할때 (px)이 들어가면 안된다. css code css box model 레이아웃 강의 복습중 center 배치하는 수... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210720 개발일지 📌 학습한 내용 네이버 메인 실습 2 1. 네이버 오른쪽 flex-wrap: wrap;이 적용된 상태에서, justify-content: space-between;을 사용했을 시, 컨텐츠의 갯수가 동일하지 않으면 좌우 끝으로 극단적으로 배치될 수 있다. (코드에서는 해당 방법 사용) 👉 float: left 사용 2. 네이버 하단 vertical-align: ;의 속성값으로 top, midd... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 210810_[32]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_10_NAVER_game_4_end (flex에 대한 심화내용) (1) 페이지 실습 네이버 게임 ( ) 오른쪽 영역에 대한 작업으로 게임 페이지에 대한 마무리 작업을 하였다. 최근 방문 css 인기 게임 라운지에서의 정렬 HTML code css code 숫자아래 등락을 나태난 css code game footer 부분 css code a tag에 after 가상 클래스를 주어 세로 작대기를 만들었다. 일단, 가상선택자(pse... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210726 개발일지 📌 학습한 내용 네이버 웹툰 실습 2 전체 코드 : 웹툰 메인 오른쪽 영역 초기에 디폴트값으로 ol { list-style: none }을 줬기 때문에 나타나지 x -> { list-style: decimal; } 넣어줌( 그러나 이 숫자는 영역을 벗어나서 나타남) : 공간을 벗어나는 글자에 대해 '...'처리 < html 특수문자 > : 공백을 만들어주는 특수문자, 사용한 만큼... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 210706_[7]_대구 AI스쿨_일반과정_웹 프로그래밍_CSS_5_레이아웃_last 오늘은 layout의 마지막 학습으로 메뉴 버튼을 만들고, 사이트를 생성하였을때 여러 페이지로 이동할수 있는 기능을 만들었다. 그리고 css layout 짜는것을 도와주는 홈페이지를 통해 실습을 해보았다. 첫번째 결과물 두번째 결과물 세번째 결과물 github 링크: 네이버 living section을 실습하던 중 orange색으로 덮힌 layout이 code 자체가 많아지니 tag로 감싸는... 대구AI스쿨layoutCSS웹프로그래밍기초과정CSS 210719_[16]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_3_NAVER_main_page_1 2. whatfont : site의 글자들의 폰트에 대한 정보를 알 수 있다. 3. color zilla : site의 쓰여진 색상에 대한 정보를 알 수 있다. 7. css viewer : 개발자 도구를 열어보지 않고 css에 대한 정보를 알 수 있다. 위에 tool들을 활용하면, 웹 프로그래밍에 보조 수단으로 유용하게 사용할 수 있다. ▽ 스크린샷에는 다 나타나지 않았으나 오늘 읽을만한 글... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습htmlCSS 210716_[15]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_2_helbak_덴마크쇼핑몰_layout 오늘은 반응형 웹사이트 (Responsive Web)인 helbak이라고 하는 여태껏 많이 실습에 간접적으로 참고하였던 덴마크 쇼핑몰 site의 layout을 직접 짜는 실습을 하였다. HTML 작성 style.css (스타일 및 미디어 쿼리) 키즈가오 사이트와 다른점은 animation을 넣는게 아니라 파일자체가 두개밖에 없고 style.css에 미디어쿼리 코드를 같이 썼다는 점이다. HT... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습media querieshtmlCSS [대구AI스쿨] 개발일지 16일차 210719 어떤 웹 사이트에 들어가서 이 웹사이트가 어떤 기술 스택으로 만들어졌는지 확인할 수 있다. CSS Viewer 웹사이트에 적용된 css코드들을 간편하게 확인할 수 있다. 어떤 색상을 사용했는지 확인할 수 있음. 기본적인 html을 작성해 준다. 기본적인 css를 작성해 준다. 디폴트 설정값에 추가해야할 css input과 button태그는 둘 다 inline-block요소 이므로(기본 마진과... CSS웹프로그래밍대구AI스쿨htmlCSS [대구AI스쿨] 개발일지 29일차 210805 game.html파일을 새로 만든다. 1) 네이버 게임 header영역 css↓ 박스 쉐도우 제네레이터 : input태그의 placeholder 글자색 변경은 가능한지? ( ::placeholder 라는 css속성을 통해 가능하다) → : 콜럼 하나만 해도 괜찮은지도 시험해 볼것 (X, 콜럼 하나는 안됨) absolute 포지션일 때는 margin: 0 auto;로 x축 중앙정렬을 할 수 없... CSS웹프로그래밍대구AI스쿨htmlCSS Dev Log #2 - 6월 29일 Inline: 글자가 한 줄로 병렬 되는 것 Block: 글자가 줄 바꿈 되어 나타나는 것 Inline: 공간에 대한 크기를 설정할 수 없다. Block: 공간에 대한 크기를 설정할 수 있다. Inline: 상하 배치 작업을 할 수 없다. Block: 상하 배치 작업을 할 수 있다. margin-top, margin-bottom, padding-top, padding-bottom을 사용 할 ... 대구AI스쿨웹프로그래밍개발일지TILhtmlTIL
210729 개발일지 📌 학습한 내용 네이버 뉴스 실습 상단 영역 class로 주요 레이아웃을 단순화 (반복적으로 사용하는 기능들을 css에서 미리 만들어 줌) -> 코드 분량을 간소화 시킬 수 있음 placeholder : <input> 영역에 어떠한 정보를 입력해야 하는 지 사용자에게 알려줄 때 사용하는 html 속성 메인 영역 👉 사이트 카피캣 실습시, JS 기능을 끄고 싶을 때, 부모가 position: ... CSS웹프로그래밍대구AI스쿨html실습CSS 210728_[23]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_6_NAVER_blog_2_end 오늘은 블로그 메인 오른쪽 영역, 메인 푸터 영역. 블로그 챌린지 프로그램 영역에 대한 제작은 진행하였다. 메인 오른쪽 영역 △ 오른쪽 로그인 영역 △ 로그인 영역 밑에 부분 메인 하단 영역 △ footer 영역 블로그 챌린지 프로그램 △ 하단 영역은 blog main page와 동일하게 적용 HTML code CSS code 블로그 상세 페이지에서 border값 설정 css code HTM... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습htmlCSS #11_미디어 쿼리 실습 media query 속성을 사용하여 브라우저 크기 변화에 따라 메뉴의 정렬방식을 변경한다. 모바일 버전의 margin값이 사라지지 않은 것은 가상 선택자의 오타 때문이다. 브라우저 화면이 모바일 버전의 영역으로 줄어들면 로고영역과 메뉴영역이 아래위로 배치되도록 하여 화면이 줄어들어도 메뉴의 가독성이 줄어들지 않는다. position속성과 flex속성을 적절히 사용하여 오브젝트들을 배치할 수... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS Dev Log #4 - 7월 1일 ✅ 가상선택자 ✅ 프로젝트에 폴더를 설정하는 법 ✅ 서버에 올려서 도메인 주소로 확인하는 법 ✅ 카카오 친구 리스트에 디자인 입히기(실습) ✅ 네이버 리빙 게시판에 디자인 입히기(실습) 1. 가상 선택자 가상 선택자란 선택한 요소에 어떠한 행동과 규칙에 의해서 디자인을 적용하는 방식이다. 종류는 크게 두가지로 나누면 행동과 관련된 디자인의 가상 선택자와 일정한 규칙을 바탕으로한 디자인의 가상... 대구AI스쿨CSS웹프로그래밍개발일지htmlCSS 210802_[26]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_8_NAVER_ent-news_1_상단_왼쪽영역 (1) 페이지 실습 네이버 연예 뉴스의 상단작업과 왼쪽 영역에 대한 작업을 진행하였다. (2) 학습한 내용 상단 영역 기초 작업 이전에 학습하였던 뉴스의 상단과는 다르게 연예 영역은 따로 container를 지정해줄 필요가 없다. (wide하게 x축으로 뻗어 있음) HTML code 상단 header영역에서는 크게 ent-header-left ent-header-center ent-heade... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210813_[35]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_11_NAVER_esport_3_End___12_NAVER_audioclip_1 (1) 페이지 실습 NAVER e스포츠 오른쪽 부분 제작으로 마지막 작업을 하였고, 네이버 오디오 클립 ( )이라고 하는 웹북 리딩 서비스 페이지의 상단 영역 작업을 진행하였다. △ e스포츠 오른쪽 영역 △ 네이버 오디오 클립 상단 영역 (2) 학습한 내용 google 웹폰트 사용 fonts.google.com에는 무료로 사용할 수 있는 여러가지 웹 폰트를 제공하므로 웹 문서에 링크해서 쉽게... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 웹 프로그래밍 #2 [21.6.29] 1. 이미지를 임시로 채워넣는 방법을 배웠다 뒤에 숫자 150은 크기를 설정하는 부분 2.Inline, Block 속성 html에서 사용되는 태그가 Inline 속성인지 Block 속성인지 구분해서알아둬야 한다 Inline : x축으로 나란히 배열되며 공간에 대한 크기 설정이 되지 않음 Block : 줄 바꿈이 일어남 3. section/article 태그는 h태그와 함께 section, a... 웹프로그래밍대구AI스쿨대구AI스쿨 210806_[30]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_9_NAVER_game_2__게임 라운지 인기글 어제에 이어 네이버 게임 ( ) 페이지의 왼쪽 중간 영역에 대해서 학습하였다. 게임 라운지 인기글까지 작업을 하였고, 과거에 실습하였던 부분들과 비교하였을때 어려운점이나 특이점은 없었다. css code font-weight 주의할점 font-size와는 다르게 수치를 입력할때 (px)이 들어가면 안된다. css code css box model 레이아웃 강의 복습중 center 배치하는 수... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210720 개발일지 📌 학습한 내용 네이버 메인 실습 2 1. 네이버 오른쪽 flex-wrap: wrap;이 적용된 상태에서, justify-content: space-between;을 사용했을 시, 컨텐츠의 갯수가 동일하지 않으면 좌우 끝으로 극단적으로 배치될 수 있다. (코드에서는 해당 방법 사용) 👉 float: left 사용 2. 네이버 하단 vertical-align: ;의 속성값으로 top, midd... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 210810_[32]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_10_NAVER_game_4_end (flex에 대한 심화내용) (1) 페이지 실습 네이버 게임 ( ) 오른쪽 영역에 대한 작업으로 게임 페이지에 대한 마무리 작업을 하였다. 최근 방문 css 인기 게임 라운지에서의 정렬 HTML code css code 숫자아래 등락을 나태난 css code game footer 부분 css code a tag에 after 가상 클래스를 주어 세로 작대기를 만들었다. 일단, 가상선택자(pse... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210726 개발일지 📌 학습한 내용 네이버 웹툰 실습 2 전체 코드 : 웹툰 메인 오른쪽 영역 초기에 디폴트값으로 ol { list-style: none }을 줬기 때문에 나타나지 x -> { list-style: decimal; } 넣어줌( 그러나 이 숫자는 영역을 벗어나서 나타남) : 공간을 벗어나는 글자에 대해 '...'처리 < html 특수문자 > : 공백을 만들어주는 특수문자, 사용한 만큼... 대구AI스쿨CSS웹프로그래밍실습htmlCSS 210706_[7]_대구 AI스쿨_일반과정_웹 프로그래밍_CSS_5_레이아웃_last 오늘은 layout의 마지막 학습으로 메뉴 버튼을 만들고, 사이트를 생성하였을때 여러 페이지로 이동할수 있는 기능을 만들었다. 그리고 css layout 짜는것을 도와주는 홈페이지를 통해 실습을 해보았다. 첫번째 결과물 두번째 결과물 세번째 결과물 github 링크: 네이버 living section을 실습하던 중 orange색으로 덮힌 layout이 code 자체가 많아지니 tag로 감싸는... 대구AI스쿨layoutCSS웹프로그래밍기초과정CSS 210719_[16]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_3_NAVER_main_page_1 2. whatfont : site의 글자들의 폰트에 대한 정보를 알 수 있다. 3. color zilla : site의 쓰여진 색상에 대한 정보를 알 수 있다. 7. css viewer : 개발자 도구를 열어보지 않고 css에 대한 정보를 알 수 있다. 위에 tool들을 활용하면, 웹 프로그래밍에 보조 수단으로 유용하게 사용할 수 있다. ▽ 스크린샷에는 다 나타나지 않았으나 오늘 읽을만한 글... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습htmlCSS 210716_[15]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_2_helbak_덴마크쇼핑몰_layout 오늘은 반응형 웹사이트 (Responsive Web)인 helbak이라고 하는 여태껏 많이 실습에 간접적으로 참고하였던 덴마크 쇼핑몰 site의 layout을 직접 짜는 실습을 하였다. HTML 작성 style.css (스타일 및 미디어 쿼리) 키즈가오 사이트와 다른점은 animation을 넣는게 아니라 파일자체가 두개밖에 없고 style.css에 미디어쿼리 코드를 같이 썼다는 점이다. HT... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습media querieshtmlCSS [대구AI스쿨] 개발일지 16일차 210719 어떤 웹 사이트에 들어가서 이 웹사이트가 어떤 기술 스택으로 만들어졌는지 확인할 수 있다. CSS Viewer 웹사이트에 적용된 css코드들을 간편하게 확인할 수 있다. 어떤 색상을 사용했는지 확인할 수 있음. 기본적인 html을 작성해 준다. 기본적인 css를 작성해 준다. 디폴트 설정값에 추가해야할 css input과 button태그는 둘 다 inline-block요소 이므로(기본 마진과... CSS웹프로그래밍대구AI스쿨htmlCSS [대구AI스쿨] 개발일지 29일차 210805 game.html파일을 새로 만든다. 1) 네이버 게임 header영역 css↓ 박스 쉐도우 제네레이터 : input태그의 placeholder 글자색 변경은 가능한지? ( ::placeholder 라는 css속성을 통해 가능하다) → : 콜럼 하나만 해도 괜찮은지도 시험해 볼것 (X, 콜럼 하나는 안됨) absolute 포지션일 때는 margin: 0 auto;로 x축 중앙정렬을 할 수 없... CSS웹프로그래밍대구AI스쿨htmlCSS Dev Log #2 - 6월 29일 Inline: 글자가 한 줄로 병렬 되는 것 Block: 글자가 줄 바꿈 되어 나타나는 것 Inline: 공간에 대한 크기를 설정할 수 없다. Block: 공간에 대한 크기를 설정할 수 있다. Inline: 상하 배치 작업을 할 수 없다. Block: 상하 배치 작업을 할 수 있다. margin-top, margin-bottom, padding-top, padding-bottom을 사용 할 ... 대구AI스쿨웹프로그래밍개발일지TILhtmlTIL