1-12 Web Design Trend

이번 시간에는 웹디자인 트렌드 7가지에 대해서 알아보도록 하겠습니다 첫번째로 작년에 이어서 계속해서 백그라운드로 고화질 이미지 또는 비디오를 삽입하는 것입니다 이미지나 동영상을 화면에 가득 채워서 보여주는 기법인데요 사이트에 접속하자 마자 방문자에 시선을 한눈에 사로잡기 때문에 여전히 많이 사용되고 있습니다

작년과 다른 점이 있다면 일반 고화질 이미지보다는 직접 그린 일러스트를 삽입하는 것입니다 또는 정적인 이미지보다 동영상이 훨씬 효과적이다 그러나 사례를 한번 보도록 하겠습니다 여기 보시면 고화질 이미지를 사용을 해서 지금 로딩되는데 약간의 시간이 걸린 것을 확인할 수가 있습니다 이렇게 고화질 이미지를 사용을 하고 있고요 이번에는 동영상이 탑재된 메인 패널 슬라이드를 보실 수가 있는데요 정적인 이미지보다는 동적인 이미지가 훨신 더 집중시키는 힘을 가지고 있는 것을 확인을 하실수가 있습니다 2번째로 단색과 인터랙션을 가진 대비색을 사용하는 것입니다 해당 사이트의 메인 컬러나 컨샙 컬러를 일관된 색으로 전채를 유지시키고 사용자의 유도가 필요한 부분에는 대비되는 색으로 집중시킵니다 여기 사례를 보시면 이렇게 푸른 계통의 한 컬러로 전체적으로 통일을 시키고 부분적으로는 흰색으로 포인트를 주고 있어서 사이트가 전체적으로 선명한 느낌이 들도록 하고 있습니다 세번째로는 카드레이아웃 디자인입니다 작년에 이어서 올해도 여전히 카드레이아웃이 유행할것이고 대표적인 사이트로는 pinterest가 있습니다 카드 형태에 장점으로는 배치와 재배치 간의 작업이 수월하기 때문에 반응형 웹사이트 제작 시 아주 유용하게 사용이 되고 있고요 그리고 정보의 양에 따라서 크기 조절이 아주 쉽고 사용자들이 더욱 빨리 볼 수 있기 때문에 클릭을 유도하는 장점을 가지고 있습니다 사례로 이렇게 pinterest를 보실텐데요 pinterest는 홈페이지 전체가 카드레이아웃 상태로 되어있고 카드에 담고있는 이 정보에 양에 따라서 자유롭게 지금 배치를 시키고 있습니다 다른 사례를 보시면 네 이렇게 마찬가지로 홈페이지 전체가 카드레이아웃 되어 있지만 pinterest와는 달리 일정한 그리드 간격을 유지하고 있습니다 네번째로 플렛 디자인 아이콘에 변화입니다 아이콘는 테스트가 아닌 간단한 인포 그래픽으로 정보를 전달하는 데 훨씬 효과적이기 때문에 자주 사용을 하는데요 작년에는 면으로 색이 꽉찬 형태였다면은 요즘 최근에는 라인형태로 심플한 스타일로 바뀌고 있습니다 홈페이지에서도 버튼들을 한번 보시면 면으로 되어있던 버튼들이이 선으로 지금 많이 바뀌고 있는 추세에 있구요 이렇게 아이콘을 다운로드 받을 수 있는 사이트에도 보시면 메인에 노출된 아이콘들을 확인을 해보시면 이런 형태로 면으로 찾는 아이콘들 보다는 선으로 더 간단하고 심플한 아이콘들을 많이 노출시키고 있는 것은 확인을 하실수가 있습니다 다섯 번째로는 시네마그레프인데요 영화와 사진의 합성어로 사진에서 부분만 움직이는 효과를 말합니다 sns에서 움짤 등에 그런 콘텐츠 변화로 나타나는 트렌드 중에 하나이고요 이미지보다는 몰입도가 훨씬 높기 때문에 주목성이 높은 큰 장점을 가지고 있습니다 사례를 한번 보시면 이렇게 정적인 이미지에서 특정 부분만 이렇게 동적인 효과를 주고 있는 것을 확인을 한 실수가 있습니다 여섯 번째로는 롱스크롤입니다 모바일 환경이 계속 발전함에 따라서 수직적인 흐름에 디자인인 롱스크롤도 계속해서 트렌드가 되고 있는데요 컨텐츠가 많다면 무리일수도 있겠지만 한 페이지 안에서 모든 색션을 담아서 스토리텔링 컨셉을 만들 수가 있습니다 섹션을 명확하게 구분짓지 않고 자연스런 흐름으로 이야기했듯이 진행하는 방식으로도 컨텐츠를 풀어나갈 수가 있는데요 그 사례로 요즘에는 롱스크롤 페이지가 많기 때문에 많은 페이지에서 보실 수가 있으실텐데요 이런 식으로 페이지를 내릴 수록 어떤 흐름을 가지고 있고 콘텐츠들이 이렇게 점점 나타나는 형태로 홈페이지에 컨셉을 끌고 가고 있는 것을 확인 하실수가 있습니다 마지막 일곱 번째로 리치 애니메이션입니다 플렛디자인이 생기면서 필연적으로 생긴 애니메이션 효과는 깔끔함과 동시에 약간 재미없는 플렛 디자인에 단점을 보완하기 좋은 효과입니다 정적인 홈페이지에서 생기를 불어넣는 듯한 그런 느낌을 주는데요 팝업 알림 효과나 패럴랙스의 스크롤링 그리고 오버효과 등이 있습니다 하지만 너무 많은 효과를 넣어버리면은 사용자에 흐름을 방해를 할 수가 있기 때문에 적당히 사용을 하시는게 좋습니다 사례를 한번 보도록 하곘습니다 이렇게 보시면 호버했을 때 이렇게 컬러가 바뀌면서 택스트가 위로 살짝 올라오는 이런 효과를 주고있고요 다른 사례로는 이렇게 스크롤을 내리면 내리는 그 시점에 따라서 부분적으로 이 텍스트와 콘텐츠들이 나타나는 효과를 주고 있습니다 지금 보신것처럼 방금 앞부분에 로딩 효과를 주고있고 또 로딩 효과가 끝나고 나면은 동영상과 동시에 기본 콘텐츠가 나타나고 있는데 다 동적인 이미지를 나타내고 있습니다 디자인 트렌드는 흐름이 굉장히 빠르기 때문에 한상 트렌드를 읽기 위해서는 사례를 많이 보는 것이 가장 중요합니다 외국 사이트나 국내 사이트들 중에서도 디자인이 잘 된 페이지들을 모아둔 그런 사이트들이 많아서 참고를 하시면 좋을 것 같습니까

Diseño Web 20 – Tipografía

디자인 부분에 다음 요소는 글꼴 유형, 즉 글꼴입니다 내 조언이 방법으로, 때마다 새 작업을 입력, 입력 체계의 서로 다른 스타일로, PC에 다운로드 한 이미지의 은행을 가지고있다 웹 페이지를 만들고, 가지고, 더 많거나 적은 특정 다운로드 한 글꼴의 팬 유형의 유형, 그것은 당신이 모든 스타일의 매우 중요합니다

각 페이지는 타겟 고객 및 회사를 전달하고자하는 이미지에 따라 다른 소스가 필요합니다 예를 들어, 경우 클라이언트가 심각 프로젝트를 전달하고자하는 경우 회사는 골을 원한다; 당신이 심각한 소스를 넣어 가지고 있기 때문에 당신이 만화 산세 MS를 넣어가는 것이 아니다, 당신은 아마도 이러한 곡선과 둥근 마무리, 스타일이있는 서체를 넣어 가지고 있기 때문에 예를 들어, 세련된 옷을 저장하기 위해, 그러나 그것은 읽을; 그것은뿐만 포쉬로 진부하거나 소스가 말하는 것을 이해하지 일이 아니다 예, 예를 들어, 페이지 인 청소년 프로젝​​트 것을 현대 편지로 뭔가 청소년, 그래서, 거기 당신은 설정 한 당신은 셀틱 문자로, 아일랜드의 줄에 페이지를 만들려고하는 경우 문제는 당신이 회사는 클라이언트가 투영하고자하는 소스가 더 맞는 것으로 전망하고 싶어 볼 필요가 있다는 것입니다

제목 잘 띄는 주요 것에 매우 큰 문자를 넣어 기억; 정상 크기 당신이보고 싶은 것을 넣어하지 않습니다, 당신은 강조하고 대담한해야합니다 그리고 그 일이 당신은 그들이 가장자리에 붙어 넣지 마십시오, 더 눈에 띄는 싶지만에 매우 큰 영역이있을 것이다 그 빈의 주위에, 그래서 그는 시력을 갈 것입니다 난 당신이 모든 소스가 거기 형식으로 변환 웹, 즉, "TTF", "EOT", "WOFF", "SVG"한에서 당신을 확보, 기억; 에 확인 그들은 모든 형식입니다 어쩌면 당신은 이미이 있기 때문에 동영상 설명에 나는, 형식의 소스 남아있다, 당신은 변환 할 수있는 곳을 링크 드리겠습니다 소스는 당신이 알 수 있도록 다음 나는 당신에게 링크를 드리겠습니다, 배출하지만, 다른 확장을 갖고 싶어 당신이이 이미지를 다운로드 할 수있는 알고 싶은 경우에, 잘, 구글 글꼴은 많은있다; 하지만이 이미지 은행과 더 많은 페이지가 있고 당신을 나는 동영상 설명에 링크를 떠날거야

우리는 글꼴을 본 적이 한 번 음, 우리는 애니메이션을 볼 수 있습니다; 이는 다음의 요소입니다

파트너 인력 관리 업무용 웹프로그램 개발

파트너 인력 관리 업무용 웹 프로그램입니다 PM1 (프로젝트 매니저) 로 로그인 하겠습니다

프로젝트(업체1)를 등록하겠습니다 업체, 프로젝트 기간, PM, 파트너, 진행상태, 기타를 입력할 수 있습니다 파트너(파트너1)를 등록하겠습니다 파트너 등급을 A, B, C로 구분할 수 있습니다 파트너를 추가하는 경우 프로젝트에서 추가된 파트너를 선택 할 수 있습니다

파트너1에서 프로젝트(업체1)이 추가된 것을 확인 할 수 있습니다 프로젝트에서 상태를 프로젝트 완료로 변경해보겠습니다 그럴 경우, 프로젝트가 회색처리가 됩니다 파트너 관리에서 다시 확인해보면 참여중에 있던 프로젝트가 참여완료로 이동합니다 파트너2를 추가하겠습니다

프로젝트 (업체2)를 추가하고 파트너1을 선택하겠습니다 파트너1에서 참여중에 방금 전에 등록한 업체2가 표시됩니다 프로젝트 업체2의 파트너를 파트너1에서 파트너2로 변경해보겠습니다 파트너1에 있던 업체2가 파트너2로 이동합니다 업체 명 카테고리를 업체 별로 프로젝트를 조회할 수 있습니다

감사합니다

웹 커뮤니티 반응형 웹

웹 커뮤니티 서비스 반응형 웹 입니다 시작 페이지에는 3개의 게시판 있습니다

게시판 옆에 숫자는 게시물의 갯수 입니다 자유 게시판 입니다 테스트 제목의 글에 추천이 2개 있습니다 추천이 2개 이상인 글은 베스트 게시물에서 확인 할 수 있습니다 코인 게시판 입니다

글을 작성하기 위해서는 로그인이 필요합니다 테스트 3 글을 작성하였습니다 테스트3의 글에 추천을 합니다 그럴 경우, 스크랩에서 추천한 글을 확인 할 수 있습니다 테스트2는 추천이 1개가 있었는데, 한 번더 추천을 눌러보겠습니다

추천이 2개 되서 베스트 게시물에서도 확인 할 수 있습니다 감사합니다

요리레시피 정보제공 반응형 웹

요리레시피 정보제공 반응형 웹 입니다 관리자 권한으로 로그인 하겠습니다

관리자는 레시피 등록을 할 수 있습니다 유튜브 링크도 추가 할 수 있습니다 레시피 수정 할 수 있습니다 삭제도 할 수 있지만 넘어가겠습니다 사용자로 로그인 하겠습니다

카테고리를 이용하여 레시피를 검색할 수 있습니다 요리 레시피 유튜브를 재생할 수 있습니다 하트 아이콘을 클릭하면 추천이되면서 My 레시피에 추가됩니다 My 레시피에서 레시피를 제거합니다 끝 입니다

워드프레스 관리자 사용법 (엔엑스디자인, 엔엑스웹)

엔엑스 디자인에서 제작하시는 반응형 홈페이지는 워드프레스를 기반으로 제작됩니다 실제 구동중인 홈페이지의 문구를 수정해 보도록 하겠습니다 지금 보고 계시는 화면의 페이지를 수정해보도록 하겠습니다 우선 관리자로 로그인 하기 위해 관리자 로그인 페이지로 이동합니다 관리자 아이디와 패스워드를 입력합니다 보시는 것처럼 관리자 화면으로 이동했습니다 페이지를 수정하기 위해 워드프레스 관리자 메뉴 중 페이지로 이동합니다 수정하려는 페이지를 편집모드로 오픈해 보도록 하겠습니다 실제 구성된 홈페이지의 레이아웃과 유사한 형태로 되어있어 수정하고자 하는 영역을 빠르게 찾을 수 있습니다 실제 홈페이지에서 수정하고자 하는 영역을 살펴보겠습니다 선택된 영역의 부분을 실제로 변경해 보도록 하겠습니다 수정하려는 위치를 관리자에서도 쉽게 파악할 수 있습니다 수정대상 영역에서 연필 아이콘을 클릭하면 수정팝업이 표시됩니다 이곳의 텍스트를 수정해 보도록 하겠습니다 수정 후 Save Changes 를 클릭합니다 최종적으로 Update를 클릭하면 저장이 완료됩니다 실제 페이지가 적용되었는지 확인해 보도록 하겠습니다 관리자에서 변경한 내용대로 바로 변경이 된 것을 확인할 수 있습니다

인디고 스튜디오(Indigo Studio)로 만드는 반응형 웹페이지 레이아웃

안녕하세요 여러분 이번 동영상에서는 인디고 스튜디오의 최신버전의 기능인 반응형 웹페이지 레이아웃 기능을 소개할겁니다

PICK A VIEWPORT 메뉴에서 브라우저를 선택하면 새로운 메뉴들이 보일겁니다 첫번째로 모바일을 우선한 디자인(Start with Mobile-First Approach) 이구요 두번째는 일반적인 타블렛이나 피씨를 위한 반응형 레이아웃입니다(a responsive layout for Tablet/Desktop) 우선 모바일을 우선한 디자인을 살펴볼까요 디자인 캔버스를 통해 Bootstrap Container 가 추가된 것을 볼 수 있습니다 인디고 스튜디오가 Bootstrap 을 이용해 반응형 웹페이지 디자인 기능을 실현하고 있기 때문입니다

Bootstrap Container 이외에도 또 하나의 드롭다운메뉴를 볼 수 있는데요 드롭다운 메뉴에는 Bootstrap 을 통해 이용할 수 있는 4가지 세부 메뉴가 표시됩니다 각각 모바일폰, 타블렛, 데스크탑 그리고 대형 데스크탑입니다 또한 기본적으로 Row 가 화면에 추가 되어 있는 것을 알 수 있습니다 이것은 Bootstrap Row 이며 초기 화면에는 3개의 Row가 포함되어 있습니다

모든 Row 는 최소한 하나의 셀을 포함해야 합니다 기본화면에서 Bootstrap 은 총 12 개의 컬럼을 사용하여 레이아웃 표시를 하고 있습니다 또한 초기화면의 셀은 12컬럼 모두를 사용하게끔 펼쳐져 있습니다 마우스를 드래그 하면 Span 된 컬럼을 조정 할 수 있습니다 첫번째 Row 의 셀을 6컬럼으로 변경하고 또 두번째 Row 도 마찬가지로 변경하면 두 Row 가 하나로 합쳐집니다

셀을 편집하려면 셀을 마우스로 더블클릭하거나 다른 컨트롤을 셀에 드래그 & 드랍 하면 됩니다 타이틀요소를 한 번 추가해 볼까요 Alt + 클릭을 하고 Title 을 검색합니다 추가된 컨텐츠 또는 컨트롤 또한 셀과 마찬가지로 컬럼 span 의 개념이 적용됩니다 따라서 컨트롤의 폭은 픽셀단위로 조정되는 것이 아니라 컬럼 사이즈에 따라 자동으로 변경됩니다

보시는 것처럼 타이틀의 폭을 변경하기위해 컬럼의 span을 마우스 드래그로 변경하고 있습니다 편집모드 상태에서 다른 셀의 편집을 시작하기 위해서는 해당 셀을 한 번만 클릭하면 됩니다 또는 기존의 편집모드를 종료하고 다른 요소를 드래그 & 드롭으로 화면에 추가합니다 화면에 추가된 요소를 셀에 드래그 하는 동안 별도의 추가 메뉴가 표시됩니다 스페이스키를 누른 상태에서 요소를 드롭하면 컨트롤이 자동으로 화면에 맞게 리사이즈 됩니다

하나의 셀에는 복수의 UI 요소가 추가될 수 있습니다 그럼 계속해서 두번째 Row를 편집해 볼까요 Row의 높이는 추가된 컨텐츠에 의해 결정됩니다 셀에 새로운 컨텐츠가 추가 될 때마다 거기에 맞게 셀의 높이가 자동으로 변경됩니다 그럼 또 한 번 타이틀 요소를 추가해 볼까요

보시는 것처럼 자동으로 처음에 추가된 이미지 아래에 타이틀 요소가 배치되는 것을 알 수 있습니다 UI요소가 중첩되지 않는 일반적인 웹디자인의 개념과 일치하죠 두번째 Row 에는 두 개 이상의 컨텐츠가 배치되었습니다 또 모든 컨텐츠는 기본적으로 일반적인 웹디자인처럼 하부 여백(margin) 프로퍼티를 개별 지정할 수 있습니다 이제 편집모드를 종료해 봅시다

Duplicate Cell 액션을 이용하면 빠르고 간단하게 같은 셀을 추가할 수 있습니다 복사된 셀에서는 새로운 이미지를 선택합시다 만약 추가된 컨텐츠들을 위해 더 많은 공간을 확보하고 싶으시면 Margin 을 지정하면 됩니다 이제 기본적인 모바일 폰 화면 디자인이 마무리 되었습니다 이제 타블렛 화면을 편집할텐데 처음에 설명한 세부메뉴 드롭다운을 이용해 간단히 추가할 수 있습니다

변경하고 싶은 것은 이 두가지 요소를 옆으로 나란히 배치되게 하고 싶습니다 그러기 위해서는 해당되는 셀의 폭을 드래그 하여 6 컬럼사이즈로 축소합니다 다음셀도 마찬가지로 폭을 조정합니다 만약 버튼 컨트롤의 폭을 조정하고 싶다면 컨트롤을 선택하시고 Span 을 수동으로 설정할 수도 있습니다 일반적인 Bootstrap 의 작성방식과 마찬가지로 타블렛용의 설정은 폰용의 설정위에 작성됩니다

프로퍼티 편집기를 보시면 타블렛 표시를 위한 Responsive Option 이 보일것입니다 여기에 보이는 모든 설정은 기본적으로 모바일폰용 화면의 설정을 계승하게 됩니다 하지만 타블렛용의 화면에서 변경 한 내용은 타블렛용의 화면에만 적용되게 됩니다 좀 더 명확히 차이를 알아보기 위해 데스크탑용의 레이아웃도 설정해 봅시다 다시 한 번 상당의 드롭다운 메뉴를 통해 데스크탑모드를 선택합니다

데스크탑 모드에서는 여기 보이는 이미지와 문자열이 옆으로 나란히 표시되도록 변경하려고 합니다 따라서 다음과 같이 이미지를 선택하고 폭을 7컬럼 정도로 조정합니다 나머지 빈공간에 문자열의 컨트롤이 배치되도록 남은 공간만큼 문자열의 폭을 변경합니다 공간을 조정하기 위해 이미지 컨트롤의 Margin 프로퍼티를 변경합니다 다시 한 번 설명드리자면 데스크탑 모드에서 변경한 설정들은 타블렛 모드에서의 설정을 계승합니다

지금까지 변경한 사항들이 어떻게 실제 화면에서 보여지게 될지를 Run Screen 버튼을 클릭하여 알아봅시다 화면사이즈가 변화함에 따라 모바일폰, 타블렛 또 데스크탑용의 화면으로 자동적으로 화면이 바뀝니다 (실행화면의 사이드메뉴에서 단말기모양의 아이콘을 클릭하고 Fit to Screen 으로 모드를 변경해 주세요) 인디고 스튜디오에서 신기능인 반응형 웹페이지 레이아웃 작성을 위한 기본을 알아봤습니다 더많은 정보를 원하신다면 저희 유튜브 채널을 정기구독하세요!

HTML – 웹사이트 만들기

이번시간에는 좀 더 실전적인 예제를 살펴볼겁니다 생각하기에 따라서는 우리가 아직 할 게 많이 있죠 그런데 여러가지 태그들이 있습니다 140개 정도의 태그가 현재까지 있는데 태그를 다 살펴보는 거는 쉽지도 않은 일일 뿐더러 별로 의미가 없습니다

여러분들이 지금까지 배운 것들, 가장 중요한 것을 우리가 다 배웠고, 바로 그런 것들을 이용해서, 최소한의 지식을 통해서 우리가 뭔가 의미 있는 것들을 해보는 것이 제가 보기엔 더 중요해요 그래서 지금해 볼 것은 이런걸 만들어 볼거예요 보시는것 처럼 이렇게 생긴 웹페이지 인데 여기 있는 항목들을 클릭하면 그 항목에 대한 링크로 이동을 하고 여기 있는 html 부분을 클릭하면 보시는 것처럼 첫 번째 페이지로 이동을 하는 그래서 여기있는 각각의 링크들이 서로 상호 작용하면서 이렇게 움직일 수 있는 완결된 웹사이트 하나 만들어 보자는 거죠 그래서 첫 번째 페이지는 여기있는 html을 클릭했을때 나오는 페이지인데 이 페이지의 이름은 보시는 것처럼 indexhtml 입니다 그리고 첫번째 링크를 클릭하면 1html 이 나오고 두번째는 2html 세번째는 3html 네번째는 4

html 이 나와서 어디로든지 이동할 수 있는 동선을 구성해 보자는 거에요 그러면 우리가 이걸 만들기 위해 필요한 파일은 총 다섯 개의 파일이 필요할 겁니다 그럼 지금부터 한번 해보죠 우선 chtml에 있는 내용을 그대로 재활용 하겠습니다 chtml을 다른이름으로 저장을 할게요 그리고 파일의 이름은 index

html이라고 하겠습니다 이건 대문 페이지예요 모든 파일로 해서 저장 이제 indexhtml 파일을 만들었으니까 한번 열어보시죠 이렇게 열렸죠? 자 그리고 우리가 뭐~ 1html / 2html / 3html 이런거 만들기 전에 우선 링크를 먼저 마련해 놓는게 좋습니다 왜냐하면 여기있는 각각의 링크들 여기에 걸리게 될 링크들은 각각의 페이지마다 똑같이 들어갈 내용이기 때문에 여러분이 파일을 먼저 만들고 링크를 추가하면 중복되는 작업이 생겨요

그런데 링크를 다 완성한 다음에 그걸 복제하면 더욱 효율적으로 일을 할 수 있다는 거예요 한번 해보죠 우선 여기있는 html은 이 부분이죠 이걸 클릭했을 때는 indexhtml이 나와야하니까 여기는 이렇게 indexhtml에 링크를 걸었습니다 그리고 기술소개라는 것을 클릭했을때는 1html이 나오면 돼요 물론 아직 우리는 1

html을 가지고 있진 않지만 링크부터 만든다고 문제 될 건 없습니다 그럼 보시는 것처럼 기술소개는 1htm이죠 물론 클릭해도 파일이 없기 때문에 해당 웹페이지를 찾을 수 없다는 메시지가 뜨겠죠 그 다음에 밑에 있는 기본 문법은 2html 3html 복사 붙여넣기를 이용하시면 조금 수월하죠 자 이렇게해서 각각의 링크를 일단 완성했어요 자 그럼 이제 indexhtml만 있으니까 1

html / 2html / 3html 이걸 이제 만들어야겠죠 자, 그럼 여기있는 indexhtml을 제가 다른 이름으로 저장하기를 해서 1 html 이라는 파일로 만들었습니다

그럼 이제 기술소개라는걸 클릭하면 보시는 것처럼 1html 페이지로 가죠 물론 내용의 변화는 없습니다 왜? 내용을 수정 안했으니까요 여기있는 내용을 수정해 봅시다 1html은 기술소개니까 이렇게 기술소개라고 하고 본문은 html은 아무거나 입력하세요 'html은 Hyper Text Markup 약자로 약자로서 웹페이지를 만드는 언어입니다' 라고 이렇게 하고 여기서 리로드를 해보면 보시는 것처럼 이렇게 되죠 그럼 이제 여기 있는 제목을 클릭하면 indexhtml로 갈테고 기술소개를 클릭하면 이제 기술소개에 대한 페이지로 이동을 하겠죠 그럼 여기서 1html을 다시 2

html로 복사한 다음에 여기있는 내용을 2html에 해당되는 기본문법으로 바꾸는거죠 내용은 아무거나 하시면 되죠 그 다음에 3html 그리고 하이퍼텍스트와 속성이라고 하고 텍스트와 속성 a 를 사용합니다 대충쓰는거죠

여러분 실습에 너무 집착하지마세요 4html 그리고 4

html은 본문이 리스트와 태그의 중첩 리스트는 li를 쓰고 ul 이나 ol로 감싸서 사용합니다 그렇게하면 우리가 모든 웹페이지를 다 완성했기 때문에 보시는것 처럼 이렇게 순환하는 웹페이지를 또 웹 사이트를 만들 수가 있는 것이죠 지금까지 제가 소개해드린 내용들이 html에서 가장 중요한 내용들은 다 다룬겁니다 나머지것들은 제가 생각하기에 훨씬 더 어려운데 훨씬 덜 중요한 것들이예요 그래서 여러분들은 제일 중요한 것들을 살펴봤다는 거예요 자 그럼 이제 우리 예전에 제가 수업 시작 할 때 여러분들한테 뭐를 말씀드렸었냐면 웹 페이지에서 오른쪽 클릭해서 소스보기를 한번 해보라고 말씀드린 적 있었죠 이렇게하면 나오는 것들 바로 여기있는 html 코드가 바로 이 웹 페이지에 해당되는 html 코드 였잖아요 자 그런데 여기서 제가 얘기하고 싶었던 건 뭐였냐면 여기는 코드를 이제 여러분들이 상당히 많은 부분 해석할 수 있게 되었다는 겁니다 위에있는 DOCTYPE 뭔지 아시겠죠 그리고 이 문서도 정말 html로 시작하네요 여러분들 네이버나 구글이나 여러분들 자주가는 사이트들 아무데나 들어가서 소스 보기를 해서 꼭 살펴보세요 그리고 정말로 head라는 태그로 시작하고 있네요 그리고 이렇게 생긴 태그들이 있는데 쭉 내려가보면 우리가 모르는 것도 상당히 많아요 여기 있는 것도 다 모르겠죠 쭉 내려가보면 여기 있는 태그 하나만 살펴볼까요? 여기 보시면 버튼이라는 태그가 있네요

여기 제가 선택한 이거, 이게 뭔진 여러분들이 잘 모르실 겁니다 하지만 무얼 알 수 있냐면 얘가 태그라는 사실은 이미 알고 있어요 그렇죠? 그렇다면 여러분이 이 태그라는 사실을 알고 있으면 뭘 할 수 있냐면, 검색할 수 있습니다 또는 질문할 수 있어요 어떻게? 예를 들면 검색을 이렇게하는 거죠 구글 같은 검색엔진에서 우리가 지금 원하는 것은 버튼이라고 하는 태그잖아요? 근데 그냥 버튼이라고 하면 이 세상의 수 많은 버튼이 있을거 아니예요 그럼 여기에 html 이라고 쓰는거죠

그리고 조금 더 정확하게 하기위해서 태그라고 하면 이렇게 검색어를 입력하고 엔터를 치면 엄청나게 많은 html버튼 태그라는 문자가 들어있는 웹페이지를 검색엔진이 순식간에 검색해줍니다 자 그럼 그 중에서 아무거나 제일 먼저 나온 걸 클릭해서 들어가 보면 보시는 것처럼 html 버튼 태그에 대한 설명이 나오네요 그럼 여러분들이 이걸 보시고 여기 있는 Try it yourself 같은 걸 보면 이렇게 clik me라고 돼 있는 부분이 보이네요 무슨 뜻이겠어요 바로 여기있는 버튼이라는 태그가 여기 오른쪽에 있는 버튼을 만들어주는 역할을 하는 태그라는 뜻인 거죠 즉 여러분이 여기 있는 모든 태그를 미주알고주알 기본적으로 다 암기하고 있지 않다고 하더라도 어떠한 것이 태그라는 사실을 알면 또는 어떠한 것이 속성이라는 것을 알면 여러분은 검색할 수 있습니다 또 누군가에게 html의 버튼이라는 태그는 무엇인가요 타입이라는 속성이 submit으로 되어 있으면 어떤 의미를 갖는 건가요 라는 질문을 할 수 있다는 것이죠 제가 생각하기에는 하나하나의 태그를 여러분들이 익히는 것 못지않게 질문하는 법 검색하는 법 이런 것들을 알아가는 것이 훨씬 더 중요할 수 있습니다 왜냐, 지식이라는 것은 계속 바뀌니까요 그 지식을 습득하는 방법만이 사실은 중요한 것이겠죠 자 이렇게 해서 우리가 지금까지 html의 문법, 구조 그리고 하이퍼텍스트를 통해서 완결성이 있는 웹사이트를 만드는 방법까지 살 봤고요 다음 시간부터는 주요한 html의 태그들을 살펴보도록 하겠습니다

Generame – 웹프레임 제너레이터

site making and doesde 웹을 알았습니까? online code 최상위 요소 당신 만의 사이트가 완성되었습니다 color 사이트는 별개의 세션으로 관리됩니다

site map with additional and required 간단한지도를 추가하십시오 모바일 플랫폼 슬로건 제작 된 사이트는 한번만 불러도 될까요? 로고, 색상, 위치 간단하게 쇼핑몰도 운영 할 수 있습니다