HTML이 웹페이지에 들어 가는 여러형태의 구성요소를 만드는 것이라면 CSS는 구성요소의 스타일을 정하는 방법이다. CSS가 무엇이고 어떻게 사용하는지 클래스와 아이디를 사용하여 구성요소를 어떻게 조회하는지 웹페이지를 재구성하기 위해 DIV를 사용하는 법, 테두리와 포지셔닝, 컬러와 폰트, 텍스트와 링크 포맷을 조정하기 위해 CSS를 사용하는 법을 배운다. CSS란 무엇인가 HTML로 웹페이지에 구성요소를 추가할 수는 있지만 이들의 위치, 색깔, 폰트 또는 스타일을 조절하기는 쉽지 않다. 스타일 정보를 페이지 내용과 별도로 저장하여 내용에 영향을 주지 않고 쉽게 스타일을 조정하자는 것이 주된 생각이었다. 실제로 HTML은 전혀 손대지 않고 CSS만 변경하여 웹페이지의 모습과 레이아웃을 바꿀 수 있다. 왜..

추천사이트 https://codepen.io/pen/?editors=1000 지금 블로깅하고 있는 책의 유명한 저자 '롭 퍼시발' 만든 홈페이지입니다. 구글아이디로 가입하고 쉽게 html coding을 실행하고 연습해 볼 수 있습니다. 그리고 이를 @techedrob 로 트윗하면 저자의 피드백도 받을 수 있습니다. 내 코딩소스 올리는 방법 이제까지 배운 코딩연습으로 간단한 내 홈페이지를 만든후 코드를 붙여넣기 하세요. 화면의 아래쪽에서 자신의 웹페이지를 볼수 있어야 합니다. 이를 저장하면 url주소를 생성해 소셜 미디어에서 공유할 수 있습니다. 이것을 @techedrob으로 트윗하면 저자의 피드백을 받아 볼 수 있습니다. 이 코드펜 홈페이지는 월 8달러 서비스이지만 여기서 소개한 것은 이메일만 인증하고 ..

내 블로그에 유튜브영상 링크하기 ① youtube.com으로 가서 원하는 비디오를 클릭한다. ② 아래로 내려가서 공유버튼을 클릭한다. 빨간색 구독버튼위에 있다. ③ 퍼가기 버튼을 클릭한다 ④ ctrl + c 를 이용해 코드를 복사하거나 복사링크를 클릭한다. 그리고 내 웹페이지에 붙여넣기 한다. 실제 위의 방법으로 링크시킨 모습

아이프레임 아이프레임은 다른 웹페이지의 내용을 자신의 웹페이지에 포함시킬때 사용한다. 예를 들면 이 코드를 사용하여 구글 홈페이지를 자신의 웹페이지에 포함시킬 수 있다. 단, 구글인 페이스북같은 경우 자체적으로 링크를 막아놨기 때문에 작동하지 않는다. 다른 홈페이지를 이용하기 바란다. 아래 경우 np-eco.com에 연결시킨 경우이다. → 사진을 클릭하면 실제 실행되는 모습이 보여집니다 아이프레임 실행결과

링크연결 search the web : 구글홈페이지로 이동하는 기능을 한다. 이 코드를 실행했을때 다음과 같은 결과값이 나온다. : search the web을 클릭하면 구글사이트로 이동하게 된다. search the web 그러면 이 코드의 결과값은 무엇일까? 차이점이 무엇인가? search the web search the web 이 코드는 새창을 띄워서 지정한 구글홈페이지를 출력하라는 의미이다. 새창이 새로 열리면서 구글페이지가 열리게 된다. HTML 엔티티 때로는 웹페이지에 기호를 사용해야 한다. 저작권기호인 ⓒ 유로기호인 € , 웃는 얼굴 기호 ☺ 도 필요할 수 있다. HTML 엔티티나 특수코드를 사용해 이를 나타낼 수도 있다 웃는 얼굴 코드 ☺ → ☺ © and © → © HTML 엔티티 참고..

셀너비 조절하기 1. 셀에 너비를 주지 않았을때 2. 너비를 각각 주었을때 name age gender

테이블 만들기 테이블은 사용자에게 정보를 보여주는 아주 탁월한 기능이다. 아래의 코드를 직접 작성해보라. 하나의 '행'이 시작됨을 뜻하고 는 제목이라는 의미이다. 로 제목 셀 하나가 마무리된다. 는 '열'을 의미한다. 마찬가지로 로 하나의 열이 마무리된다. 테이블은 로 시작해서 로 마무리된다. html 연습해보기 '기본프로젝트'를클릭하세요 지금이동하기 테이블코드 결과값 더보기 보충설명 테이블 태그는 처음에 보기에는 복잡해서 부담스럽고 어려워 보이지만 하나 하나 뜯어서 분석해 해석이 되면 금방 적응되고 익숙해진다. 그렇게 코드가 해석이 되면 나중에 내가 그리고 싶은 테이블을 미리 종이에 그려보고 코드를 적용해서 부분 부분 그려보면 점점 작성속도가 빨라지고 쉬워지게 된다.

버튼만들기 모든 폼은 제출버튼이 필요하다 아래와 같이 input 타입인 'submit'을 이용하여 추가할 수 있다. 이를 실행하면 '제출'이란 텍스트와 함께 간단한 버튼을 만들 수 있다. 버튼의 텍스트를 바꾸고 싶다면 아래와 같이 value 어트리뷰트를 이용하여 추가할 수 있다. 보충설명 submit 기능은 서버와 쌍방향 소통을 할 때 반드시 필요한 기능입니다. 흔히 우리가 회원가입을 할때 개인정보 양식을 마친후 제출을 눌러야 등록이 되는 개념입니다.

">텍스트 영역  사용자가 일정 텍스트를 입력하기 위해서는 작은 박스 이상이 필요하다.   ??????     이 코드를 실행하면 어떻게 나올까요?       보충설명 이 폼은 고정된 결과값을 출력시키기 위한 것이 아니라 웹페이지 상에서 사용자가 게시판같은 곳에 글을 남기기 위해 글을 입력하는 텍스트창으로 쓰인다.  입력폼중의 하나로 텍스트를 서버로 입력해 나의 글을 기록할때  사용하는 것이다.  회원가입할때 이름이나 개인정보를 한글로 입력하는 입력창을 말합니다. 아주  많이 사용해보셔서 이해가 쉬우리라 생각됩니다.

1. 드롭다운 메뉴 만들기 사용자가 일정 범위의 옵션 중에서 선택할 수 있도록 드롭다운 항목을 만들고 싶다면 select 태그를 사용한다. 이 폼은 꺽쇠를 클릭하는 순간 선택할 수 있는 숫자가 수직으로 나열되고 그중에 하나를 선택할 수 있는 기능을 가진다 홈페이지에 회원가입시 개인정보를 입력할 때 많이 접할 수 있는 태그이다. 더보기 1 2 3