기초과정 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 210806_[30]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_9_NAVER_game_2__게임 라운지 인기글 어제에 이어 네이버 게임 ( ) 페이지의 왼쪽 중간 영역에 대해서 학습하였다. 게임 라운지 인기글까지 작업을 하였고, 과거에 실습하였던 부분들과 비교하였을때 어려운점이나 특이점은 없었다. css code font-weight 주의할점 font-size와는 다르게 수치를 입력할때 (px)이 들어가면 안된다. css code css box model 레이아웃 강의 복습중 center 배치하는 수... 대구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 210706_[7]_대구 AI스쿨_일반과정_웹 프로그래밍_CSS_5_레이아웃_last 오늘은 layout의 마지막 학습으로 메뉴 버튼을 만들고, 사이트를 생성하였을때 여러 페이지로 이동할수 있는 기능을 만들었다. 그리고 css layout 짜는것을 도와주는 홈페이지를 통해 실습을 해보았다. 첫번째 결과물 두번째 결과물 세번째 결과물 github 링크: 네이버 living section을 실습하던 중 orange색으로 덮힌 layout이 code 자체가 많아지니 tag로 감싸는... 대구AI스쿨layoutCSS웹프로그래밍기초과정CSS 210831_[46]_대구 AI스쿨_일반과정_웹 프로그래밍_1_javascript_변수와 데이터 타입_start + 월말평가 부모요소를 기준으로 설정하여 오른쪽 이동을 하려면 relative로 설정을 하여야 하고 자식은 3차원 요소인 absolute로 하여 left: 50px;로 설정을 하여야 한다. 19번 문제 같은 경우 브라우저 뷰포트를 기준으로 하려면 부모가 absolute로 설정된 상태에서 브라우저에 고정이 되는 display값인 fixed가 적용되어야 한다. 자바스크립트는 원래 웹 사이트에 움직이는 효과를... JavaScript웹프로그래밍기초과정대구AI스쿨JavaScript 210727_[22]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_6_NAVER_blog_1 (2) 학습한 내용 button tag의 특성 button tag는 기본적으로 회색을 default값으로 가지고 있다. google에서 can i use 를 검색하면, 각각 문법속성들을 사용할수 있는지 여부를 확인할수 있는 site가 있다. (앞서 학습했던 내용) 그래서 구버전을 쓰는 사용자들의 편의를 위해서 float으로 번거롭지만 사용을 하고 있다. 여러 개의 아이템을 일정하게 정렬할 때... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습htmlCSS 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 210817_[36]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_12_NAVER_audioclip_2 (1) 페이지 실습 지난 시간에 이어 네이버 오디오 클립 ( )이라고 하는 웹북 리딩 서비스 페이지의 메인 왼쪽 영역 작업을 진행하였다. △ 원본 페이지 △ 실습 페이지 (2) 학습한 내용 button이 가려지는 문제 css code 개선된 결과 라이브온 작업 css code image-wrap을 relative로 지정하고 img를 absolute로 지정하여 위쪽에 덮이게 한다. x축 중앙정... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210730_[25]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_7_NAVER_news_2_final+월말평가 (1) 페이지 실습 네이버 뉴스 왼쪽 영역과 오른쪽 영역을 제작하고 추가로 footer영역에 대해 강의에는 없지만, 직접 실습해서 제작해 보았다. △ 좌측 헤드라인 뉴스와 정치란 우측 가장 많이 본 뉴스 △ 계속 연속되는 영역과 우측 광고란 △ 우측 TODAY란 △ main 영역의 끝인 언론사 목록, 분야별 목록 그리고 footer 영역 월말 평가 font-size로 조절 하여야 한다. 보자... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210809_[31]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_10_NAVER_game_3__왼쪽영역끝 (1) 페이지 실습 네이버 게임 ( ) 페이지의 왼쪽 영역에 대한 작업을 마무리지었다. 생생 주요 게임 뉴스 오리지널 시리즈 인기게임영상 이번달 출시 게임 급상승 공식 게임 카페 이번 실습에서 비슷한 틀을 가진 section들은 HTML 구조를 끌어서 변형하는 식으로 재탕(?)작업으로 한 부분이 많다. (2) 학습한 내용 인기게임 영상에서 (3x2) 배치 HTML code css code 이... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210714_[13]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_1_kidsgao 어제 학습했던 내용에서 추가적으로 학습을 진행하였다. 제작 과정은 동일하게 페이지별로 style.css 학습진행 순서는 어제와 동일하다. 1. HTML 작성 2. style.css (위치& 병합) 3. animation.css (애니메이션) 4. mobile.css (미디어쿼리) 각각 4가지의 process를 5가지의 구간으로 나누어서 진행하였다. (3) forest3 : 오른쪽 새 2마리 ... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습media querieshtmlCSS 210720_[17]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_3_NAVER_main_page_2_end 어제에 이어 네이버 메인 페이지 실습과정을 끝 마쳤다. △ 오른쪽 영역 △ footer 영역 로그인 영역 제작 로그인 버튼을 a tag로 제작하였고 inline 요소인데 display를 통하여 block으로 바꿔주었다. block의 성질 (아래 그림 보라색 참조)과 같이 div tag 안에 있는 로그인 칸을 쭉 채우기 위해 사용 쇼핑 타이틀 부분 ( 트렌드 쇼핑 ) 어제 학습한 것과 같이 t... 대구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 210806_[30]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_9_NAVER_game_2__게임 라운지 인기글 어제에 이어 네이버 게임 ( ) 페이지의 왼쪽 중간 영역에 대해서 학습하였다. 게임 라운지 인기글까지 작업을 하였고, 과거에 실습하였던 부분들과 비교하였을때 어려운점이나 특이점은 없었다. css code font-weight 주의할점 font-size와는 다르게 수치를 입력할때 (px)이 들어가면 안된다. css code css box model 레이아웃 강의 복습중 center 배치하는 수... 대구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 210706_[7]_대구 AI스쿨_일반과정_웹 프로그래밍_CSS_5_레이아웃_last 오늘은 layout의 마지막 학습으로 메뉴 버튼을 만들고, 사이트를 생성하였을때 여러 페이지로 이동할수 있는 기능을 만들었다. 그리고 css layout 짜는것을 도와주는 홈페이지를 통해 실습을 해보았다. 첫번째 결과물 두번째 결과물 세번째 결과물 github 링크: 네이버 living section을 실습하던 중 orange색으로 덮힌 layout이 code 자체가 많아지니 tag로 감싸는... 대구AI스쿨layoutCSS웹프로그래밍기초과정CSS 210831_[46]_대구 AI스쿨_일반과정_웹 프로그래밍_1_javascript_변수와 데이터 타입_start + 월말평가 부모요소를 기준으로 설정하여 오른쪽 이동을 하려면 relative로 설정을 하여야 하고 자식은 3차원 요소인 absolute로 하여 left: 50px;로 설정을 하여야 한다. 19번 문제 같은 경우 브라우저 뷰포트를 기준으로 하려면 부모가 absolute로 설정된 상태에서 브라우저에 고정이 되는 display값인 fixed가 적용되어야 한다. 자바스크립트는 원래 웹 사이트에 움직이는 효과를... JavaScript웹프로그래밍기초과정대구AI스쿨JavaScript 210727_[22]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_6_NAVER_blog_1 (2) 학습한 내용 button tag의 특성 button tag는 기본적으로 회색을 default값으로 가지고 있다. google에서 can i use 를 검색하면, 각각 문법속성들을 사용할수 있는지 여부를 확인할수 있는 site가 있다. (앞서 학습했던 내용) 그래서 구버전을 쓰는 사용자들의 편의를 위해서 float으로 번거롭지만 사용을 하고 있다. 여러 개의 아이템을 일정하게 정렬할 때... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습htmlCSS 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 210817_[36]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_12_NAVER_audioclip_2 (1) 페이지 실습 지난 시간에 이어 네이버 오디오 클립 ( )이라고 하는 웹북 리딩 서비스 페이지의 메인 왼쪽 영역 작업을 진행하였다. △ 원본 페이지 △ 실습 페이지 (2) 학습한 내용 button이 가려지는 문제 css code 개선된 결과 라이브온 작업 css code image-wrap을 relative로 지정하고 img를 absolute로 지정하여 위쪽에 덮이게 한다. x축 중앙정... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210730_[25]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_7_NAVER_news_2_final+월말평가 (1) 페이지 실습 네이버 뉴스 왼쪽 영역과 오른쪽 영역을 제작하고 추가로 footer영역에 대해 강의에는 없지만, 직접 실습해서 제작해 보았다. △ 좌측 헤드라인 뉴스와 정치란 우측 가장 많이 본 뉴스 △ 계속 연속되는 영역과 우측 광고란 △ 우측 TODAY란 △ main 영역의 끝인 언론사 목록, 분야별 목록 그리고 footer 영역 월말 평가 font-size로 조절 하여야 한다. 보자... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210809_[31]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_10_NAVER_game_3__왼쪽영역끝 (1) 페이지 실습 네이버 게임 ( ) 페이지의 왼쪽 영역에 대한 작업을 마무리지었다. 생생 주요 게임 뉴스 오리지널 시리즈 인기게임영상 이번달 출시 게임 급상승 공식 게임 카페 이번 실습에서 비슷한 틀을 가진 section들은 HTML 구조를 끌어서 변형하는 식으로 재탕(?)작업으로 한 부분이 많다. (2) 학습한 내용 인기게임 영상에서 (3x2) 배치 HTML code css code 이... 대구AI스쿨CSS웹프로그래밍기초과정htmlCSS 210714_[13]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_1_kidsgao 어제 학습했던 내용에서 추가적으로 학습을 진행하였다. 제작 과정은 동일하게 페이지별로 style.css 학습진행 순서는 어제와 동일하다. 1. HTML 작성 2. style.css (위치& 병합) 3. animation.css (애니메이션) 4. mobile.css (미디어쿼리) 각각 4가지의 process를 5가지의 구간으로 나누어서 진행하였다. (3) forest3 : 오른쪽 새 2마리 ... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습media querieshtmlCSS 210720_[17]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_3_NAVER_main_page_2_end 어제에 이어 네이버 메인 페이지 실습과정을 끝 마쳤다. △ 오른쪽 영역 △ footer 영역 로그인 영역 제작 로그인 버튼을 a tag로 제작하였고 inline 요소인데 display를 통하여 block으로 바꿔주었다. block의 성질 (아래 그림 보라색 참조)과 같이 div tag 안에 있는 로그인 칸을 쭉 채우기 위해 사용 쇼핑 타이틀 부분 ( 트렌드 쇼핑 ) 어제 학습한 것과 같이 t... 대구AI스쿨CSS웹프로그래밍기초과정홈페이지 실습htmlCSS