웹프로그래밍 6.29 웹프로그래밍 학습소감 이론 위주의 수업이 아니라 실제 사이트들의 구조를 직접 잡아보며 감을 익혀가서 좋았습니다. Inline과 Block 요소 inline : 한줄로 출력, 공간에 대한 크기 설정X(CSS), margin&padding값 (상하배치) X block : 줄바꿈되어 y축으로 정렬, 공간 크기 설정 O, margin&padding값 (상하배치) O Inline Inline Inline Blco... 웹프로그래밍2일차HTML구조잡기웹프로그래밍대구AI스쿨HTML구조잡기 210727 개발일지 📌 학습한 내용 네이버 블로그 실습 전체 코드 : 상단 영역 .blog-header-top 자체에 padding-top값을 넣기에는 .blog-heder-right 부분과 마찰이 생기기 때문에 (.blog-header-right부분은 padding의 영향을 받지 않도록 해야 함. 따라서 전체의 높이 값을 만들어 준것.) <button> : 회색 배경색을 디폴트로 가지고 있음. cursor: ... 대구AI스쿨CSS웹프로그래밍실습htmlCSS #43_유튜브 페이지 실습 과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권37 유튜브1_210613(1/3) 주제 : html / css 유튜브 페이지 또한 직전에 작업했던 트위치 페이지와 같이 상단영역과 왼쪽 영역이 스크롤에 상관없이 고정되어 있는 것을 알 수 있다. 유튜브 페이지의 경우 y축 스크롤의 범위가 매우 넓기 때문에 왼쪽 영역이 고정되어 항상 메뉴를 확인할 수 있는 이런 구조가 더 적합한것 ... 대구 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 Dev Log #3 - 6월 30일 ✅ html 태그 구조 - 부모, 자식, 형제 관계 ✅ 선택자 - type, id, class, attribute 선택자 부모가 컬러라는 유전자를 갖고있다면 자식에게 전달, 상속시킬 수 있다. 👉 html 태그 👉 css 태그 한 부모의 자식 스타일 값을 지정할 수 있다. 👉 css 태그 type, id, class, attribute 선택자 총 4가지 케이스 ✔️ type 선택자 : htm... 대구AI스쿨CSS웹프로그래밍개발일지TILhtmlCSS 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 210805 개발일지 Angular, React, Vue 와 같은 도구(자바스크립트 프레임워크)들에서 사용하는 CSS를 작성하는 방법(CSS-in-JS) 때문이다. CSS-in-JS : 자바스크립트를 기반으로 해 CSS를 적용하는 법 해당 도구들을 활용해 디자인을 적용하면 랜덤하게 숫자&알파벳 조합으로 클래스 명을 완성시킴. box-shadow : 해당 영역에 그림자 삽입 placeholder 속성값 색상 변경 ... 대구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 [대구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 210721 개발일지 📌 학습한 내용 네이버 쇼핑 실습 1. 상단 영역 2. 중간 영역 첫 번째 'list-item' '네이버 메인 실습'에서 main { padding-top: 20px;} 을 적용했기 때문에 자동으로 main 윗부분에 공백이 생김 <span> : inline 요소의 성격을 갖고 있어, margin-bottom 속성을 사용할 수 없음 width: auto; : 안에 있는 글자 컨텐츠로 width... 대구AI스쿨CSS웹프로그래밍실습htmlCSS [대구AI스쿨] 개발일지 19일차 210722 1) 네이버 쇼핑 메인 (2) 메인태그 litst_wrap에 이어서 작성 css↓ 첫번째 줄의 쇼핑리스트들은 첫번째줄의 내용을 조합하여 html을 작성해 준다. 완료되었으면, list_item에서 가이드로 작성했던 배경색을 삭제한다. 2) 브랜드 로고 하단 리스트 main태그에 이어서 작성 css↓ 3) footer css↓ 1) pixabay 상업적인 용도로도 사용 가능하다 네이버 쇼핑에 ... CSS웹프로그래밍대구AI스쿨htmlCSS 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 [대구AI스쿨] 개발일지 10일차 210709 Adaptive Layout (적응형 웹사이트) : 브라우저의 크기를 줄이면 뚝뚝 끊기면서 웹사이트의 레이아웃 구조가 바뀜. Responsive Layout (반응형 웹사이트): 브라우저의 크기를 줄이면 자연스럽게 리사이징 되다가 모바일 버전의 레이아웃 형태로 바뀜. 1-2) 미디어 쿼리를 사용할 때 주의할 점 ① background-color를 반드시 설정하기 ② 반드시 viewport 메... CSS웹프로그래밍대구AI스쿨htmlCSS
6.29 웹프로그래밍 학습소감 이론 위주의 수업이 아니라 실제 사이트들의 구조를 직접 잡아보며 감을 익혀가서 좋았습니다. Inline과 Block 요소 inline : 한줄로 출력, 공간에 대한 크기 설정X(CSS), margin&padding값 (상하배치) X block : 줄바꿈되어 y축으로 정렬, 공간 크기 설정 O, margin&padding값 (상하배치) O Inline Inline Inline Blco... 웹프로그래밍2일차HTML구조잡기웹프로그래밍대구AI스쿨HTML구조잡기 210727 개발일지 📌 학습한 내용 네이버 블로그 실습 전체 코드 : 상단 영역 .blog-header-top 자체에 padding-top값을 넣기에는 .blog-heder-right 부분과 마찰이 생기기 때문에 (.blog-header-right부분은 padding의 영향을 받지 않도록 해야 함. 따라서 전체의 높이 값을 만들어 준것.) <button> : 회색 배경색을 디폴트로 가지고 있음. cursor: ... 대구AI스쿨CSS웹프로그래밍실습htmlCSS #43_유튜브 페이지 실습 과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권37 유튜브1_210613(1/3) 주제 : html / css 유튜브 페이지 또한 직전에 작업했던 트위치 페이지와 같이 상단영역과 왼쪽 영역이 스크롤에 상관없이 고정되어 있는 것을 알 수 있다. 유튜브 페이지의 경우 y축 스크롤의 범위가 매우 넓기 때문에 왼쪽 영역이 고정되어 항상 메뉴를 확인할 수 있는 이런 구조가 더 적합한것 ... 대구 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 Dev Log #3 - 6월 30일 ✅ html 태그 구조 - 부모, 자식, 형제 관계 ✅ 선택자 - type, id, class, attribute 선택자 부모가 컬러라는 유전자를 갖고있다면 자식에게 전달, 상속시킬 수 있다. 👉 html 태그 👉 css 태그 한 부모의 자식 스타일 값을 지정할 수 있다. 👉 css 태그 type, id, class, attribute 선택자 총 4가지 케이스 ✔️ type 선택자 : htm... 대구AI스쿨CSS웹프로그래밍개발일지TILhtmlCSS 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 210805 개발일지 Angular, React, Vue 와 같은 도구(자바스크립트 프레임워크)들에서 사용하는 CSS를 작성하는 방법(CSS-in-JS) 때문이다. CSS-in-JS : 자바스크립트를 기반으로 해 CSS를 적용하는 법 해당 도구들을 활용해 디자인을 적용하면 랜덤하게 숫자&알파벳 조합으로 클래스 명을 완성시킴. box-shadow : 해당 영역에 그림자 삽입 placeholder 속성값 색상 변경 ... 대구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 [대구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 210721 개발일지 📌 학습한 내용 네이버 쇼핑 실습 1. 상단 영역 2. 중간 영역 첫 번째 'list-item' '네이버 메인 실습'에서 main { padding-top: 20px;} 을 적용했기 때문에 자동으로 main 윗부분에 공백이 생김 <span> : inline 요소의 성격을 갖고 있어, margin-bottom 속성을 사용할 수 없음 width: auto; : 안에 있는 글자 컨텐츠로 width... 대구AI스쿨CSS웹프로그래밍실습htmlCSS [대구AI스쿨] 개발일지 19일차 210722 1) 네이버 쇼핑 메인 (2) 메인태그 litst_wrap에 이어서 작성 css↓ 첫번째 줄의 쇼핑리스트들은 첫번째줄의 내용을 조합하여 html을 작성해 준다. 완료되었으면, list_item에서 가이드로 작성했던 배경색을 삭제한다. 2) 브랜드 로고 하단 리스트 main태그에 이어서 작성 css↓ 3) footer css↓ 1) pixabay 상업적인 용도로도 사용 가능하다 네이버 쇼핑에 ... CSS웹프로그래밍대구AI스쿨htmlCSS 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 [대구AI스쿨] 개발일지 10일차 210709 Adaptive Layout (적응형 웹사이트) : 브라우저의 크기를 줄이면 뚝뚝 끊기면서 웹사이트의 레이아웃 구조가 바뀜. Responsive Layout (반응형 웹사이트): 브라우저의 크기를 줄이면 자연스럽게 리사이징 되다가 모바일 버전의 레이아웃 형태로 바뀜. 1-2) 미디어 쿼리를 사용할 때 주의할 점 ① background-color를 반드시 설정하기 ② 반드시 viewport 메... CSS웹프로그래밍대구AI스쿨htmlCSS