WEB2 CSS – 12. 미디어 쿼리 소개

이 비디오에서는 매우 중요한 요소에 대해 논의하고자합니다 현대 웹 애플리케이션을 개발할 때, 최근의 "반응 형 디자인" 이것은 우리가 작업 한 예제 웹 사이트입니다

추가 기능을 추가하기 위해 코드를 약간 수정했습니다 먼저 화면의 크기를 조정하겠습니다 화면의 크기가 감소함에 따라, 거기에 있던 선은 사라졌다 레이아웃이 조금 바뀌었다 줄을 다시 만들어 봅시다

화면 크기가 일정 수준에 도달하면, 페이지가 다시 이렇게 보입니다 즉, 웹 페이지의 각 요소 화면의 크기에 반응한다 화면에 맞게 레이아웃을 변경하는 방법 이를 반응 형 웹 또는 반응 형 디자인이라고합니다 그것에 대해 생각할 때, 웹은 어려운시기를 겪었다 웹은 모든 종류의 정보 시스템에서 작동하며, 운영 체제와 상관없이, 그것은 PC, 스마트 폰, 또는 앞으로 나타날 가상 현실의 어떤 형태 든, 웹은 모든 종류의 시스템에서 작동하는 정보 시스템입니다

그리고 이것은, 그것은에 작동 할 수 있어야합니다 다양한 형태의 화면 이것은 웹 제작자는 웹 페이지를 만들려고 애썼다 다른 화면과 호환되는 웹 개발에 커다란 장애물이되었습니다 그리고 수년 동안, 그것은 웹의 주요 단점으로 여겨져 왔습니다 그러나 인간은 항상 해결책을 찾는다 삶을 웹에 바친 사람들 기술 개발에 힘써왔다

다양한 환경에 적응할 수있는 그 결과, 우리는 이제 "반응 형 디자인"의 출현을보고 있습니다 최신 동향으로 그렇다면 반응 형 디자인이란 무엇입니까? 반응 형 디자인에서, 웹 페이지의 각 요소는 화면 크기에 응답합니다 그에 따라 작동합니다 이제 핵심 아이디어에 대해 이야기 해 봅시다 웹을 통해 반응 형 디자인을 구현할 때, 또는 CSS 이를 "미디어 쿼리"라고합니다

다른 새 파일을 만들어 보겠습니다 파일 이름은 "mediaquery"입니다 mediaqueryhtml 기본 HTML 코드를 추가합니다 mediaquery

html 파일을 열어 보겠습니다 우리는 거기에 갈 지금 내가 할 일은 특정 HTML 요소 숨기기 및 숨기기 화면의 크기에 따라 하기 위해서, 의미없는 div 태그를 추가 할 것입니다 그런 다음 텍스트를 추가해 보겠습니다 반응 형 그런 다음 div 태그로 래핑했습니다 그리고 div 태그를 더 눈에 잘 띄게하려면, 이 웹 페이지의 모든 div 태그에 대해 테두리 추가 : 5px 녹색 또는 10px로 만들어 보겠습니다

이제 더 좋아 보인다 글꼴 크기를 늘려 봅시다 글꼴 크기 60px 좋아요, "반응 형" div 태그를 숨김 상태로 만들 수 있다면 화면의 크기에 따라 숨겨 지거나, 그게 무슨 뜻 이죠? 이는 우리가 다른 디자인을 적용했다는 것을 의미합니다 화면 크기에 따라 그리고 이것은 "미디어 쿼리"가 필요한 곳입니다 그러나 그것은 파악하기가 조금 어려운 개념입니다

그래서 나는 단계별로 설명하고 싶다 내가하고 싶은 일이 화면 크기가 800px보다 큰지 아닌지 여부 div 태그의 숨김 여부를 결정합니다

하기 위해서, 먼저 화면의 크기를 알아야합니다 따라서 Google 개발자 도구에서 검사를 선택하십시오 이 도구가 표시됩니다 그럼 여기, 화면의 크기를 볼 수 있습니다 해 보자 만나다? 화면 크기가 그곳에 나타납니다

그래서, 우리는 무언가를 일으킬 것입니다 화면의 크기에 따라 – 화면 크기가 800px보다 큰지 여부에 따라 800px보다 작거나 이렇게하려면 먼저 알아야 할 것이 있습니다 화면 크기가 인 경우 화면 너비가 800px보다 큼, 우리는 무엇을 원합니까? div 태그의 경우, 디스플레이를 추가하고 싶습니다 : none 즉, 화면 폭이 800 화소보다 큰 경우, div 태그의 표시를 none으로 만들고 싶습니다 그래서, 너는이 부분에서 나를 따라 간다 그렇지? 하지만 여기에 문제가 있습니다 이것은 정확하게 미디어 쿼리가 아닙니다 아이디어를 얻는 데 도움이되도록 작성한 가짜 코드입니다

그래서 미디어 쿼리와 교환해야합니다 미디어 입력 그리고 괄호 사이, 이 구와 같은 의미를 갖는 내용 추가 이 시점에서 이것에 대해 생각해보십시오 화면 너비가 800 픽셀보다 큰 경우, 즉 화면 너비가 800 픽셀 이상임을 의미합니다 그렇지 않니? 최소값은 "최소값"입니다 그리고 나서 "너비" : 800px

그리고이 문구는 위의 문구와 같은 의미입니다 그런 다음 이전 구문을 삭제 해 봅시다 그리고 중괄호를 추가하십시오

이렇게 그래서 우리는 우리가 원하는 것을 요구하는 코드를 작성했습니다 화면 너비가 800px 이상인 경우, 800px 이상 중괄호에있는 div 태그가 실행됩니다 페이지를 새로 고침 해주세요 화면에서 보지, 그렇지? 현재 화면 크기는 725 픽셀입니다 이와 같이 화면을 확장 할 때, 너비가 800px에 도달하는 시점에서

그것은 당신이 보는 것처럼 사라진다 그 이유는 div 태그가 실행 되었기 때문입니다 알았어? 그리고 여기는 "최소"

최소값은 최소값이며, 최대 값은 max입니다 이 말처럼 최대 800px라고하면 그게 무슨 뜻입니까? 그 의미는 화면 너비가 800px보다 작습니다 좋아, 어떻게 작동하는지 보자 리로디드 이 화면에서, 화면이 커질 때 너비가 여전히 나타납니다 그리고 화면을 작게 만들면 800px보다 작아 질 때까지 보시다시피 숫자가 사라진다

따라서 미디어 쿼리를 사용하면 많은 것을 할 수 있습니다 스크린 너비로 방금 한 것 이외에 나는 이것을 언급하지 않았다 스마트 폰에 대해 생각해보십시오 세로 모드와 가로 모드가 있습니다 그 종류의 것들 그리고 화면의 다른 특성에 따라, CSS의 특정 부분을 트리거 할 수도 있습니다

특정 조건이 충족 될 때에 만 이것이 우리가 말하는 "미디어 쿼리" 미디어 쿼리는이 세상에서 정말로 중요한 기술입니다 다양한 형태의 화면이 존재하는 곳 이 비디오에서 미디어 쿼리에 대해 배웠으므로, 내 수업의 모토에 따라 : "일단 작은 것을 배웠다면, 그것을 최대한 활용하십시오 " 이제 미디어 쿼리에 대한 지식을 사용합시다 예제 페이지 개선

[자막ON] [Coding Tutorial] 햄버거 버튼 만들기 Part3 (CSS 디자인, 제이쿼리)

HTML 구조를 <div class="mobile-btn"></div> 요렇게만 해도 만들 수 있어요 하지만 햄버거 버튼만 만들게 아니고 실전에서는 펼쳐지는 메뉴도 만들어야 하니까 <span>을 사용해서 만듭니다

[영어공부] (동사) inherit 물려받다, 유전되다, 상속하다 우리는 부모님들한테 상속받은게 거의 없지만 그래도 하고 싶은거 하면서 재밌게 열심히 살아봅시다~!! 인라인 요소 : 크기가 못 가져요 위아래 마진 못 가져요 그래서 display 속성을 block 또는 inline-block으로 변경해야 합니다 너무 너무 중요합니다~!!!! [영어공부] transparent 투명한, 속보이는, 솔직한 배경색상의 값으로 transparent를 사용할 수 있습니다 none을 사용하면 안됩니다

왜? none은 색상값이 아니니까요~ background-color: transparent 대신에 opacity: 0 로 해보세요 문제가 생깁니다 한번 해보세요 CSS 실력이 좋으면 제이쿼리 실력의 기본은 충분히 빨리 익힐 수 있습니다 CSS first~!!! cursor: pointer를

mobile-btn span에 넣어 보세요 작동은 되나 뭔가 이상한 점을 발견하실 거에요 어떤 현상이 일어나는지 확인하신 분은 댓글로 알려주세요 영상 함께 보시는 분들과 팁을 공유해요~ㅎㅎ 수고하셨습니다~!! 지금은 미래 비전이 불투명해서 불안하시겠지만 제 영상의 프론트엔드 퍼블리싱을 공부하시는건 앞으로 먹고 사는데 꽤 경쟁력 있는 스킬을 가지시는 겁니다 밥 잘 챙겨 드시고 화이팅~!!

드리블 탑 디자인 앱 만들기 Part #1 레이아웃 코딩

자 우리 첫 시리즈에서는 디자이너들의 성지라 불리는 드리블 닷컴에서 앱 컨셉으로 멋진 디자인을 하나 선정해서 디자인을 직접 앱으로 까지 구현에 보는 시리즈를 진행할 예정입니다 그러면 시작해 보겠습니다 우선 구글에서 Dribbblecom을 검색합니다 그리고 ui 로 검색을 하셔서 상단에 보이는 것 중에 네 번째 작품 아주 멋진앱이죠 정재성님이 제작하신 한국 분이신 것 같네요 제작하신 멋진 디자인을 직접 앱으로 구현을 해 보도록 하겠습니다 우선 GIF스크러버로 이미지를 따구요 첫번째 시간은 현재 보이는 이 화면 Html과 CSS로 우선 구성을 할 거구요 뒷 시리즈에서 자바스크립트와 프로그래밍을 이용해서 실제 앱으로 만드는 과정을 진행할 예정입니다 기본적인 개발은 크롬의 개발자 도구를 이용해서 진행이 될 예정이구요 깃 허브에서 무료로 제공하고 있는 아톰이란 에디터의 일부 도움을 좀 받을 예정이예요 atom

io 에 접속하셔서 무료로 다운로드 받아서 사용하실 수 있습니다 자 그럼 시작해 볼까요 우선 작업 폴더를 하나 만들어 보겠습니다 Dribbble Todo 라는 폴더를 만들고 일단 폴더엔 index html 아 이래서 계속해요 cml tel 써서 본 모양 잡으시구요 타이틀은 드리블 투두리스트 라고 정하고 그 다음에 스타일 파일을 하나 만들어 주겠습니다 스타일 점 CSS 그리고 링크 스타일 시트 stylecss 여기 세팅이 되었습니다 그럼 이번에는 만든 파일을 탐색기에서 열어 주시면 작업 준비 가 되었죠 F12를 눌러서 개발자 모드를 실행해 주시고 모바일 모드 아이폰X사이즈로 선택을 하셔서 작업 준비를 합니다 개발자 도구에 소스탭에서 애드 폴더를 추가 하시면 작업 한게 바로 적용이 되요 이렇게 선택을 하시고 권한을 승인 해주시면 이렇게 바로 들어왔죠 이렇게 되고 태그를 만들어 볼게요 div 컨테이너 를 먼저 만드시구요 상단에 헤더 영역 컨텐츠 영역, 카드 영역까지 총 3개의 div 를 만들게요 컨텐츠 카드 에어리어 세 가지 영역을 만들고 새로고침 보이시죠 영역이 그럼 이쪽에 소스를 추가해 놨기 때문에 이쪽에 스타일을 플러스 버튼을 누르고 계시면 스타일 시트를 고를 수가 있어요 그러면 스타일에 컨테이너가 추가됐고 소스에 확인를 해보시면 스타일의 추가된 게 보이시죠 이런식으로 작업은 계속 진행 될 예정 입니다 그러면 기본적으로 html , body 가로 세로 사이즈를 지정 해주시고요 마진은 0으로 기본을 잡아주면 됩니다 보이시죠 순서는 바꿀게요 컨테이너 컨테이너 싸이즈도 세로 사이즈를 지정해 줍니다 영역이 넓어진게 보이시죠 컨테이너에는 배경색을 이쪽에 개발자 도구를 띄워서 배경색을 캡쳐 합니다 실제 배경색은 아래쪽에 그라데이션이 들어가 있어서 아래쪽을 다시 복사를 해서 배경을 linear gradient 라고 해 주시고 이렇게 코마를 이용해서 직접 입력해주시면 이렇게 그라데이션이 배경이 똑같이 적용이 됩니다 그러면 일단은 준비가 됐어요 화면 크기를 좀 비슷하게 맞춰주시고 이번에는 전체 컨테이너에 이제 컬러를 포인트 컬러를 흰색으로 지정해주세요 헤더를 꾸며 보겠습니다 왼쪽 가운데 오른쪽 총 세개의 div를 만들어 줄게요 레프트, 타이틀, 라이트 가운데영역에는 투두라고 입력을 해주겠습니다 새로고침을 눌러보시면 글씨가 작죠 모바일 사이즈에 맞는 뷰 포트를 지정을 안해줘서 그런건데요 다른 사이트에 보시면 뷰 포트 샘플이 있어요 복사해서 메타 뷰포트 태그를 넣어주시면 커졌죠? 안쓰는 창은 닫아 주시고 화면에 보이는 아이콘은 폰트어썸 사이트에서 제공하는 폰트를 이용할 예정입니다 폰트어썸닷컴 이라고 입력을 하시고 폰트어썸을 사용하기 위해서는 스타트를 누르셔서 링크를 만들어 주셔야 되요 링크 주소가 나오죠 클릭해서 복사 네 준비가 됐습니다 그럼 바로 아이콘을 검색해서 사용하실 수 가 있어요 메뉴 이 부분을 클릭 에서 복사 하시면 되구요 복사해서 붙여놓고 이번엔 오른쪽에 써치 마찮가지로 이부분 클릭해서 붙여 넣으시고 F5를 눌러서 확인 아이콘이 나오는게 보이시죠 이번엔 아이콘이 나왔으니 스타일링을 해볼게요 패딩 20px 그리고 디스플레이 플렉스 가로배열로 만들어 주시구요 그다음 헤더 아래에 있는 div에는 공통적으로 torx 꼭 초 속성으로 예 안녕 을 해주시면 3개가 나란히 이렇게 가로배치 가 됐습니다 헤더에 레프트는 text-align left 그리고 타이틀은 text-align center 그리고 라이트는 text-align right 이렇게 붙여 주시면 구성이 됬죠 그러면 이번에는 글씨체를 먼저 초반에 맞춰줄게요 구글에서 구글폰트라고 검색 하시면 네 구글에서 제공하는 폰트를 사용할 수 있는데 이중에 가장 비슷한 모양의 roboto를 추가를 해주시면 사용할 수 있습니다 기본 폰트웨이트는 400 이고, 그담에 500을 추가로 이렇게 해주시면 링크 소스가 나오네요 링크 소스는 헤더에 붙여주시고 아래쪽에 폰트패밀리를 복사해서 사용하시면 폰트 패밀리는 html body 에 넣어줄게요 새로고침을 하시면 바뀐게 보이시죠 그러면 이번에는 하단에 컨텐츠 영역을 만들어 볼게요 컨텐츠 영역은 처음에 my image 이미지가 들어갈 자리구요 그리고 중간위치에 큰 글씨 영역이죠 h2 Hello Jane 그다음에 아랫쪽에 p 태그로 그리고 제일 아래 p 태그에는 투데이라는 클래스를 입력하겠습니다 모양이 나왔죠 우선 콘텐츠 영역부터 디자인 해줄게요 여백을 패딩 40픽셀을 주시고 마이 이미지 컨텐츠 안에 있죠 마이이미지는 백그라운드 흰색을 주시고 가로 50px, 세로 50px border-radius로 원형으로 만들어 주시고 그리고 그림자를 만들어 줍니다 10px 만큼 내려온 그림자를 이런 느낌으로 예 이정도 모양이 되겠네요 안의 이미지는 구글에서 iu 를 검색해서 이미지를 하나 골라볼게요 copy image adress background image url 복사한 것을 붙여 넣으시고 background-size : 100px background-position 이정도로 맞춰 주겠습니다 그리고 h2 h2는 폰트 사이즈를 좀 키우구요 30정도로 font weight 두께는 기본 400 이정도 해주시면 될 것 같아요 이번엔 p 태그 p 태그는 마진을 없애주시구요 컨텐츠의 p 태그만 따로 스타일링을 해줄게요 투명도를 05 정도 주시고요 이후에 배경 색에 계속 바뀔 거라 색상을 직접 지정하지 않고 반투명 주었어요 그리고 하단에 따로 투데이라고 클래스를 준 영역있죠? 그부분은 폰트 크기를 12px 정도 주시고 투명도를 다시 진하게 해주시구요 마진을 50 정도 좀 줄일게요 싸이즈를 45 정도로 해 주겠습니다 모양이 대충 나오죠 그리고 이번에는 하단에 카드영역 카드영역은 전체 영역과 그리고 카드 위치를 잡는 카드에이리어를 이렇게 카드라고 먼저 해주고요 그리고 실제 카드 안의 디자인 영역은 inner라고 지정을 해주겠습니다 그럼 inner안에 좌측에 카드아이콘 모양 만들어 주시고 오른쪽에 셋팅 버튼 만들어 주신 다음에 하단의 내용을 하나로 묶을게요 bottom 이라고 하나 묶고 그 안에 p 태그를 9 tasks h2 , personal 여기까지 준비가 됐고 이 아래 영역은 스테이터스 라고 하나로 묶어 주시구요 스테이터스에 오른쪽에 숫자 영역과 왼쪽에 실제 바영역 그려야겠죠 왼쪽은 트랙이라고 할까요 트랙과 트랙 안에 있는 바 그리고 오른쪽에 83 클래스를 'per'라고 따로 주겠습니다 html 은 준비가 됐어요 이제 그러면 카드 영역을 우선 크기를 잡아볼게요 어 크기 확인을 위해서 임시로 백그라운드를 반투명을 줘 보겠습니다 그러면 상단 여백에 있는게 보이실 상단 여백은 컨텐츠에서 만들어 준 거라 padding-bottom 만 좀 줄이구요 세로 사이즈를 잡아야 겠죠 세로 사이즈는 전체 영역의 100% 에서 상단 영역이요 빠진 만큼 딱 계산 할 거에요 그래야 나중에 이렇게 화면아 움직였을 때 틀어지지 않고 아래쪽 영역에 맞게 조절이 되기 때문에 칼큘레이터 ( calc )를 사용해서 100% 마이너스 300px 상단 영역에 맞게 조절을 해볼게요 345 정도가 적당 하겠네요 상단 영역을 제외한 나머지 영역을 꽉 채우겠단 뜻이에요 이정도로 잡아주시고 이번엔 카드 실제 안쪽 영역을 잡아줘 보겠습니다 카드도 마찬가지로 임시로 사이즈 확인을 위해서 임시 배경색을 반투명으로 지정을 하시구요 세로는~ 100% 마찮가지로 가로도 지정 해주세요 그 상단에 카드에어리어 영역에서 하단 여백을 만들어 줄 거에요 패딩을 상단은 0 그리고 좌우 양쪽에 40씩 주시구요 하단은~ 50 정도 하단 영역 이 위로 안 올라오죠 이거는 보더 박스(border-box) 설정을 안해서 그런건데요 박스사이징을 다시 소스를 돌아와서 스타일 제일 위에 별은 박스사이징(box-sizing) 보더 박스(border-box)로 지정을 해주시면 위에 올라온 게 보이시죠 보더 박스를 설정하면 사이즈 설정 된 안쪽으로 패딩 영역이 들어와서 전체 지정한 사이즈의 영향을 미치지 않고 스타일링을 할 수 있습니다 자 이번엔 카드는 배경색을 흰색으로 만들어주시고 아 죄송 합니다 카드의 inner 영역에 스타일링 해줄 거예요 카드

흰색으로 만들어 주시고, 세로 사이즈는 꽉 채워주시고 그리고 컬러는 회색으로 지정해 주겠습니다 여백을 위해서 패딩을 입력을 해주시고 border-radius를 이용해서 라운드를 만들어 주시면됩니다 이제 임시로 적용한 백그라운드 필요가 없으니까 두개 다 삭제를 할게요 이렇게 삭제를 하구요 이번에는 그림자도 만들어 줍시다 이런식으로 그림자를 만들어 주고요 모양이 만들어졌죠? 이번엔 아이콘을 만들어 줄게요 아까와 마찮지로 폰트 어썸에서 user라고 검색을 하시면 비슷한 모양의 아이콘이 나오죠 복사 해서 카드아이콘 영역 그리고 오른쪽에 dot 라고 입력을 해 주시고 마찮가지로 비슷한 아이콘을 복사 해주시면 됩니다 자 볼까요? 들어왔죠? 그럼 이번엔 카드 아이콘을 모양을 만들어 보겠습니다 카드 아이콘은 우선 테두리를 만들어 주시구요 좀 연하게 만들어 줄게요 가로사이즈 50, 세로 사이즈도 50px border-radius로 원형으로 만들어 주시고 텍스트를 가운데로 line-height를 이용해서 가운데로 만들어 주시구요 그리고 사이즈를 좀 키울게요 폰트사이즈를 키우구요 컬러는 배경색의 중간정도 색상으로 이렇게 지정 해주시면 모양이 만들어집니다 그리고 float left로 왼쪽으로 이번엔 셋팅 버튼 float right로 오른쪽으로 붙여주시고 양쪽으로 조절이 됐죠 그리구 이번엔 카드의 bottom 인데요 position absolute를 이용해서 바닦으로 붙여주세요 bottom zero 카드 바깥으로 빠져 나오는게 보이시죠 그거는 바로 상단에 있는 inner의 포지션 relative를 이용해서 이렇게 안쪽으로 모양을 잡아줄 수 있습니다 다시 bottom 으로 와서 가로 사이즈를 100%로 만들어 주시고 좌측으로 붙이고 여백을 만들어 주겠습니다 네 이제 모양 잡는건 준비가 됐어요 이번엔 카드안에 있는 h2는 마진을 줄여 볼게요 10으로 줄여 주시고 컬러도 좀 진하게 더 진하게 할까요 이 정도가 괜찮겠네요 스테이터스도 만들어 줍니다 스테이터스는 float right로 오른쪽으로 붙여주시고 그리고 폰트 크기는 20px 그리고 가상 엘리먼트를 추가를 해 줄거에요 단위가 % 이다 보니까 ::after 를 이용해서 content % 를 입력해주시면 예 나온 게 보이시죠 나중에 개발에서 스크립트로 숫자 만 바꿔줄 예정이라 이렇게 작업을 했습니다 이번엔 트랙 트랙은 background를 회색을 주시고 세로 사이즈는 4px 정도 오른쪽이 숫자 영역을 뺀 만큼 가로를 좀 조정을 할게요 calc 를 이용해서 30px 정도를 빼주시면 됩니다 자 그리고 다시 'per'로 와서 margin-top 마이너스 값을 이용해서 자리를 잡아줍니다 이번엔 바 영역인데 바의 길이는 따로 inline으로 입력을 해 줄게요 html에서 직접 이미 라인으로 스타일 width 83% 이렇게 해 주는 이유는 나중에 개발 적용할 때 보시면 카드마다 숫자에 따라서 바의 길이가 달라질거예요 그래서 감안을 해서 미리 인라인으로 이렇게 길이를 잡아 줬습니다 스타일은 스테이터스에 그리고 세로는 4 px 잡힌게 보이시죠 또 배경색은 전체 배경색을 이용할 겁니다 컨테이너에서 사용했던 배경색을 복사해서 붙여 넣으시고 그라데이션이 새로 방향인데 여기서는 가로 방향이죠? linear-gradient에 가로 방향으로 to left 라고 입력해주시면 준비가 됐습니다 이렇게 크기가 늘어나면 아래쪽으로 늘어나는게 보이시죠 완성된 카드를 두개를 더 만들 거에요 영상에 보시면 이렇게 총 3개가 보이죠 그래서 카드 영역을 복사를 해서 하나, 둘 그러면 아래쪽으로 구성이 된게 보이시죠 이것을 속성을 가로로 만들어 줄 거에요 이것 때문에 이렇게 만들어 놓은건데 카드에어리어에서 display 를 flex 바로 배치되는게 보이시죠 카드 고유의 사이즈를 이용 할 거라서 이렇게 정렬이 되면 안되잖아요 카드영역에서는 flex none 속성을 부여해 주면 네 고유의 사이즈로 지정됩니다 예 그림과 같이 여백이 좀 필요하겠죠 그래서 margin-right 15px 이정도 조절이 되면 비슷하게 나왔죠 실제 영역이 전체가 움직이기 때문에 영역을 좀 잡아 줄게요 overflow , auto 이렇게 일단 1차 준비가 완료가 됐습니다 다음 시간에는 이제 영상 에서와 같이 상세페이지와 이렇게 움직였을 때 액션들을 만들어야죠 자바 스크립트 강좌가 될 것 같네요 첫 번째 시간 여기까지입니다 감사합니다

Why I need to have a complete Coding Sense in Web Design and Development

웹 디자인 및 개발 분야에서 학습해야 할 주제를 찾고 있다면 다음은 이러한 필수 정보가있는 적합한 비디오입니다 [음악] 안녕하세요 학습의 또 다른 새로운 에피소드에 오신 것을 환영합니다

이 튜토리얼에서는 코스 또는 주제의 결과가 무엇인지 알 수 있습니다 우리가 여기서 가르치고 있습니다 원하는 직업을 얻는 데 도움이되는 방법은 무엇입니까? 이제이 특정 사이트를 살펴보면 사실상 테스트 프로젝트입니다 오래전에 해왔고 여기서 볼 수 있습니다 여기에 많은 변화가 있습니다

우선이 사이트는 부트 스트랩 반응 형 모바일 사이트 반응 형 모바일 사이트입니다 ~에서 이 사이트는 간단한 양식 필드를 구현했습니다 사용자로부터 입력을 받으면이 출력을 아래에 제공합니다 이것이 우리가 먼저 배워야 할 것을 알아야 할 필요가있는 것입니다 우리가 웹 디자인과 개발에 새로운 동안 첫번째 장소

이제이 프로젝트에 대해 이야기합니다이 전체 프로젝트를 볼 때 실제적으로 볼 수 있습니다 정적 유형이므로이 양식 필드는 유일한 동적 콘텐츠입니다 우리는 이메일을 입력하고 있습니다 같은

그리고 여기에 우리는 몇 가지 의견을 입력하고 있습니다 하루 동안 어떻게 지내니? 제출 중이며 프리 로더가 발생한 다음 대화가 표시됩니다

항목 세부 정보가 성공적으로 저장되었다는 메시지가 표시되고 확인을 누르면 입력 요소가 모두 새로 고침되고 if 우리는 여기 아래로 내려와 우리가 지금까지 우리가 양식 필드에서 여기에서 이제 여기에 주석을 실행하고 있습니다 이것이 우리의 다음 강의에서 이해할 수있는 것입니다 이제 우리는이 웹 사이트를 분석하고 여러 가지 사항을 고려해야합니다 기본 사항이나 기본 사항은 HTML과 CSS입니다 두 번째는 부트 스트랩 응답 성입니다

모바일 응답 미리보기로 다시 전환하면 320 및 480 픽셀 크기에서, 모든 것은 꽤 괜찮습니다 모든 것이 수직으로 내려갑니다 모두 그들 중 하나가 서로 쌓여 있고, 우리가 관찰해야 할 또 다른 것 여기에 우리는 끈적 인 꼬리말을 가지고 있지 않습니다 이것은 우리가 당신에게 강조하고 싶은 것입니다; 이것은 동적 인 내용을 배우는 것이 아니라, 이것은 정적 인 내용과 정적 인 내용을 배우는 것이 아닙니다 웹 사이트,이 모든 것을 배우는 것입니다

이 웹 사이트를 구축하는 경우 웹 사이트를 만들어야한다는 것을 알고 있습니다 왜 벵골 반란을 볼 수 있듯이, 당신이 그것을 짓고있는 이유입니다 또는 활활 타 오르는 호랑이 단면도, 그리고 당신이 이것을 클릭하면 더 많은 옵션을 알 수 있습니다 이제 다른 페이지 나 새 페이지로 열리고 여기있는 모든 내용은 실질적으로 정적 인 내용 이러한 내용은 절대로 동적 내용이 아닙니다

그러나 모든 역동적 인 부분은 여기에 내 이메일을 입력 할 수있는 곳 또는 여기에 내 의견을 입력 할 수 있으며 제출할 수 있습니다 제출하면이 세그먼트에 여기에 표시됩니다 우리가 우리 과정에서 알아야 할 첫 번째 일은 HTML 및 CSS에 대한 심층적 인 지식이있는 첫 번째 부분입니다 두 번째로 모바일을 만드는 방법을 알아야합니다 응답 성있는 사이트이므로 모든 재단의 Bootstrap 반응성에 대해 알아야합니다

세 번째 부분은 사이트를 동적으로 만들어야한다는 것입니다 왜 어떤 종류의 프로그래밍 언어에 대해 알아야 할 필요가 있습니다 이 경우 PHP를 사용했습니다 하지만 PHP는 프로그래밍 언어로서 충분하지 않습니다 그런 이유로 당신이 당신의 기록을 과시하고 싶다면, 당신이 할 수있는 모든 일은 당신의 데이터베이스 및 그 이유는 당신이 이해해야한다는 의미, MySQL 데이터베이스를 알아야합니다 PHP와 MySQL

우리가 잠시 동안 집중한다면, 잠시 동안 우리의 형식 필드에, 기본적인 것 우리는 사용자가 여기에 입력을하고 있다는 것을 알 필요가 있습니다 게재 위치 업그레이드 귀하의 모든 웹 사이트가 할 수있는 일은 그 입력을 축적하는 것입니다 이 프런트 엔드 페이지의 백엔드 페이지에 입력 그 백엔드 페이지에서 이제는 데이터베이스에 들어가는 모든 데이터와 거기에 정렬되고, 그들은 거기에 저장되고 당신이 때 해당 데이터를 해지하려는 경우 또는 해당 데이터를 프런트 사이트로 가져 와서 귀하의 홈페이지 또는 색인 페이지로 이동 한 다음, 필요한 모든 작업을 수행해야합니다 필요한 추가 데이터를 가져 와서 데이터베이스에서 원한다 그래서 이것은 내가 완전한 지식이라고 부르는 것입니다

우리가 가르쳐 주려는 것입니다 첫 번째로 기본을 이해해야하며 두 번째로 필요한 것은 중간 경로로 가고 세 번째 것은 당신은 진보 된 부분을 위해 가야합니다 인터뷰 패널과 고용주가 직면하고 있다고 상상해보십시오 당신이 알지 못하는 다른 과목들로부터 이제 이것은 매우 창피합니다

그들이 원하는 무엇입니까? 그들은 실질적으로 당신에게서 모든 것을 원합니다 그러나 이것은 실제적으로 불가능합니다 특정 방향을 고수하면 이러한 전문 지식을 얻을 수 있다고 생각하지 않습니다 전지 따라서 직업을 얻은 후에는 전문화해야합니다

당신 자신들 당신은 사이트를 선택해야하고 그런 다음 계속해야합니다 그러나 이것은 편지 부분입니다 우선 일자리가 생겨서 그 이유는 완전하고 전반적인 지식이 필요하며 그 본질에서 우리는 가르치려고 노력하고 있습니다 당신은 주제에 대한 전반적인 개념을 가지고 있습니다

그래서 우리가 여기서 가르쳐야 할 주제를 선택했습니다 이 HTML과 CSS는 모든 것의 기본이자 근본입니다 그런 다음 우리는 현대 기술인 css3에 대해 가르치고 있습니다 hTML5 및 css3는 현대 웹 기술입니다 세 번째로 모바일 응답성에 대해 알아야 할 필요가 있다는 것입니다

당신은 부트 스트랩이나 기초 또는 이런 종류의 것들과 마지막 부분에 대해 배우고 있습니다 프로그래밍 언어와 매우 중요한 것에 대해 알아야합니까? 당신은 프레임 워크에 대한 지식을 수집해야합니다, 예를 들어 부트 스트랩은 프레임 워크, 워드 프레스입니다 또 다른 프레임 워크입니다 그래서 WordPress는 당신을 여기에서 가르 칠 것입니다 충분한 지식이 공동 관련 주제에 대한 충분한 이해 이것이 우리가 배워야 할 것에 대한 최종 토론이라는 것을 알고 싶었습니다 웹 디자인 및 개발 여러분이이 튜토리얼을 좋아 하셨 으면 좋겠습니다

이 자습서가 마음에 들면 빨간색 SUBSCRIBE 버튼을 누르는 것을 주저하지 마십시오 다음 튜토리얼에서 우리가 작업했던 부트 스트랩 튜토리얼로 돌아갈 것이다 현재 실제로는 미완성이고 많은 것들이 있습니다 명확히 할 필요가있는 것들은저기서 논의되어야합니다

다음 튜토리얼에서 너희들을 만나기를 바랍니다 그때까지, 안녕