본문 바로가기

HTML24

HTML/CSS HTML HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. 만약 어떠한 문장을 그냥 그 자체로 표시하고 싶다면, 태그 중 ()로 감싸 엘리먼트를 문단으로 명시할 수 있습니다. My Code is Good 특징 .. 2022. 4. 12.

CSS+Javacript - 슬라이더 메뉴 구현하기 메뉴바가 메뉴 아이콘을 클릭하면 슬라이더 기능으로 튀어나오고 닫기 버튼을 누르면 다시 들어가는 슬라이드 메뉴를 간단하게 구성해보았다. HTML HOME Menu 2 Menu 3 Menu 4 Menu 5 Close 메뉴바를 구성하는 문서중 Close는 닫기 버튼이므로 onclick="closeLetfMenu();라는 함수를 일단 선언해 주었다. 추후 자바스크립트 부분에서 조정할 수 있다. 또한 메뉴바를 열기전 메뉴 클릭 버튼에는 onclick="showLeftMenu();라는 함수를 선언해주어 자바스크립트에서 조정하도록 해두었다. CSS CSS 부분은 메뉴가 움직이는 슬라이드 기능 구현을 담당하고 있다. CSS 부분은 컬러와 폰트에 신경을 조금 써서 비율과 시각에 대해 알맞게 디자인해보았다. transto.. 2020. 12. 15.

Javascript DOM - HTMLElement HTMLElement getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다. 예제1 HTML CSS JavaScript 위의 코드의 결과로 알 수 있는 것은 document.getElementById : 리턴 데이터 타입은 HTMLLIELement document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection 즉 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection을 리턴하고 있다. 예제2 jin seok blog HTML CSS JavaScript 위 결과를 통해서.. 2020. 11. 17.

javascript DOM - 제어 대상을 찾기 DOM이란? Document Object Model의 약자로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 제어 대상을 찾기 문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. document.getElementsByTagName getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는.. 2020. 11. 17.

HTML+CSS+Media Query 반응형 클론 웹 사이트 제작. 구현된 영상 HTML 본문 바로가기 회사소개 사업영역 투자정보 인재채용 알기 쉬운 개발 내 삶 속의에 개발 상품검색 안녕하세요 Kim, jin seok 입니다. 창의적이고 경쟁력 있는 선도 개발자 view more ABOUT COMPANY. 대한민국을 대표하는 웹 개발자, 저를 소개합니다. 회사소개 삶의 가치를 높이는 개발기업 more 중앙 시스템 설립 이래 한결 같은 자세로 개발에 전념해 오고있습니다. more 투자정보 주요 경영사항을 제공합니다. more OUR PRODUCT innovations. 끊임없는 기술 혁신으로 미래 성장 동력을 지속 발굴 합니다. 01.Chlorinated Polyvinyl Chloride 국내에서 처음으로 자체 기술로 CPVC를 생산하는데 성공하고 2017년 울산 2공장.. 2020. 11. 2.

HTML CSS (feat. jQuery) 간단한 포트폴리오 웹 사이트 코딩. html Kim, jin seok I'm Web Programer 1. 을 이용하여 reset.css을 지정해주고 따로 style.css 또한 따로 링크화 해주었다. 2. fontello을 사용하기 위해 fontello.css 파일 또한 링크화 해주었다. 바로 body부분에 class로 demo에 나온 각각의 "아이콘 이름"을 지정해주면 바로 아이콘 효과가 적용된다. 3. 을 이용하여 jquery의 정보를 받아오고 bxslider라는 jquery 플로그인 또한 받아왔다. 또 bxslider의 활용을 구체화하기 위해 옵션들을 설정해주었다. bxslider의 옵션들(controls: , pager: , auto:)로 인해 화면상의 배경화면들이 자동으로 슬라이드화 되며 배경화면을 넘기는 컨트롤창 또한 보이지 .. 2020. 10. 27.

CSS 선택자(selector)에 대하여 선택자 selector와 선언(declaration) CSS의 id 활용 html 텍스트에 CSS을 적용할 때 여러개의 공통된 selector 중 특정 하나만 하고 싶다면 id 기능을 적용하면 id을 적용한 html 텍스트만이 효과가 적용된 것을 확인할 수 있다. html의 태그에id="select"가 적용된 것이 보인다. CSS에는id="select"의 select에다 '#'을 앞에다가 붙여줘야 CSS부분에서 id을 받아준다. 부모 자식 선택자 id만으로 특정 텍스트에 효과를 주는 것에는 하나 하나 씩 해줘야하는 한계가 있어 미리 CSS 부분에서 해주는 선택자 설정이 있다. 부모 자식 선택자 수식들을 사용한다면 더욱 빨리 일을 처리해 나갈 수 있다. 가상 클래스 선택자 가상 클래스 선택자는 body안의.. 2020. 10. 20.

CSS 기본 입문 CSS 이란? 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따라서 이를 보완하기 위해 만들어진 것이 스타일 시트이고 이 스타일 시트의 표준안이 CSS라고 한다. 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. CSS 예시 2020. 10. 19.

HTML 직접 웹 페이지 제작하기 프로젝트(영화 평점 남기기 웹 페이지) 직접 웹 페이지 제작하기 지금까지 배워본 HTML 지식들을 최대한 활용하여 만들어보고 싶은 웹 페이지를 제작하였습니다. 평소 저는 영화를 좋아해서 영화 평론 사이트를 자주 들락거리는데 한 번 스스로 비슷하게나마 영화 평론 사이트를 제작해보고 싶어 따라 해 보았습니다. 만들어 보면서 아직 배울게 많다고 생각하였습니다. 기본적인 기능들만 사용하니 실제 사용되는 영화 평론 사이트와 비교해 많이 부족해 보입니다. 빨리 더 좋은 기능을 사용할 수 있도록 언어를 배우고 싶어 진 것 같습니다. 구현을 위해 사용된 태그와 문법들 모바일 지원 웹뿐만 아니라 모바일에서도 알맞게 기능하기 위해 모바일 지원 meta 정보를 추가하였습니다. 파일 다운로드 영화 포스터 이미지를 클릭하면 영화 포스터 이미지를 다운로드할 수 있도록.. 2020. 10. 19.

HTML 모바일 지원 모바일 지원이란? 데스크탑 PC에서만 되는 웹이 태블릿 PC, 스마트폰에서도 웹의 보기 사이즈가 확대할 필요 없이 알맞게 지원한다는 뜻이다. 모바일에서도 지원하게 하려면 간단한 한 줄의 코드만 추가 해주면 가능하다. 응용하기 실습 2020. 10. 19.

HTML a 태그 a 이란? 텍스트에 파일 및 사이트 링크를 걸어주는 역할을 한다. a 태그는 문단, 목록, 테이블뿐만 아니라 섹션 전체를 감쌀 수도 있지만 a태그 안의 버튼이나 링크등 인터렉티브한 요소가 포함되어 있으면 안됩니다. href : 링크 주소를 지정한다. download : 파일을 다운로드 할 수 있는 링크를 만들어 준다. target : 링크를 어떤 프레임에 열것인지를 결정한다. _blank : 새창에 연다. _parent : 부모창에 연다. _self : 자신의 창에 연다. _top : 화면이 여러 프레임으로 이루어져있는 경우 모든 프레임을 지우고 전체 화면에 연다. [name] : 지정된 이름에 링크를 연다. 응용하기 실습 miaow-miaow.tistory.com/83 [HTML] Link 태그 사용하.. 2020. 10. 16.

HTML 검색엔진 최적화 (구글) 검색엔진 최적화는 각종 검색 엔진에 내 글을 효과적으로 싣고 널리 알릴 수 있도록 웹 페이지를 구성해서 검색 결과의 상위에 오르게 작업이다. 웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 오르게 하는 것은 웹 방문객 수를 늘리고 내 글을 알리기 위한 하나의 방법이므로 효과적인 인터넷 마케팅 방법 중의 하나이다. 적절한 도메인 이름을 설정하거나, 웹 표준을 준수하면서 포스트의 가독성과 웹페이지 로딩 속도를 최대로 끌어 올리고, 메타태그 작성이나 링크의 적극적 활용, 본문 태그, 부제목 태그 등 적절한 키워드를 선택해서 사용해야 한다. 구글은 전 세계적으로 검색 사이트의 정석이므로 구글의 검색엔진 가이드의 PDF파일과 생활 코딩 강의를 참고하는 것이 좋을 거 같다. www.opentutorials.o.. 2020. 10. 16.

HTML 의미론적 태그에 대하여 의미론적 태그란? 문서의 정보를 보다 잘 표현하기 위해서는 단순히 태그를 쓰는 것이 아닌 의미에 맞는 태그를 잘 사용해야 한다. 그래서 웹 페이지의 정보에 따라 고려하여 의미론적 태그를 해주는 데 직접적 효과가 있는 것은 아니지만 이 웹 페이지에서 이러한 정보라는 의미가 있다는 표식이라는 것에 의미를 둘수 있다. article 본문 aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들 details 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의 figure 삽화나 다이어그램과 같은 부가적인 요소를 정의 footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의 header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의 main 문서에서 가장 중심이 되는 컨텐츠.. 2020. 10. 16.

HTML meta 태그 meta 이란? 웹페이지에 표현되진 않지만, 웹 페이지를 잘 설명하기 위한 부가 정보들을 담당한다. charset="속성값" : 브라우저에 디코딩되는 문자형식을 지정 (속성값 utf-8은 한글폰트를 정상 출력시켜준다) name="description" content="내용" : 검색 결과에 대한 요약에 사용된다 name="keywords" content="내용" : 문서를 설명하는 중요 단어(키워드)들이다. name="author" content="내용" : 저자 http-equiv="refresh" content="숫자" : 지정한 시간(초) 마다 웹페이지를 리프레쉬 시켜준다. 응용하기 실습 2020. 10. 16.

HTML form(입력 양식) 파일 전송하기 파일 전송하기 input의 속성 type 중 하나인 file은 송신파일 선택필드 생성할 수 있게 해준다. 단 조건으로 enctype="multipart/form-data"을 무조건 form 라인에 붙여줘야 한다. 응용하기 실습 2020. 10. 16.

HTML form(입력 양식) method method 이란? method는 form의 내용 정보를 post로 처리할지 아니면 get으로 처리할지 정버 처리 방식을 지정한다. Get : form의 정보를 url에 담아 처리되어 그대로 정보가 url에 노출되는 위험이 있다. Post : form의 정보를 url이 아닌 방식으로 진행하여 처리한다. 즉 데이터를 숨겨서 전송하게 되어 정보 노출 보안에 장점이 있다. 일단 기본적으로 Post 방식을 사용한다. URI에 폼의 내용을 '?'으로 구분으로 추가하여 송신 응용하기 실습 2020. 10. 16.

HTML form(입력 양식) label(이름) label 이란? 문자가 더 명확하게 무언가의 이름표다 라는 것을 표현할 수 있게 한다. label화 시킨다면 적용된 문자에 마우스 커서를 갖다대면 명확히 표현하는 반응을 볼 수 있다. for : 폼 컨트롤의 id속성과 같은 값을 지정하여 서로 동기화되도록 한다. 컨트롤에 라벨을 부여하는 방법 label의 for속성에 컨트롤의 id속성과 같은 값을 지정하여 라벨과 컨트롤을 동기화한다. label 요소의 범위에 텍스트와 컨트롤을 포함시킨다. 응용하기 실습 2020. 10. 16.

HTML form(입력 양식) hidden hidden 이란? 감춰진 필드라고 말할 수 있다. 즉 서버로 정보를 전송해야 하지만 ui가 따로 필요없거나 몰래 보내야할 때 쓰인다. 개발자들만이 확인하기 위해 쓰인다는 거다. 2020. 10. 16.

HTML form(입력 양식) button(버튼) button 이란? input의 속성 type의 종류의 하나로 button은 버튼을 생성합니다. autofocus : 페이지를 로드할때 해당 요소가 자동으로 포커스를 받도록 지정합니다. disabled : 포커스, 선택, 변경 등의 조작이 불가능하게 하고 데이터도 서버에 전송하지 않는다. 불리언 속성입니다. name="이름" : 버튼의 식별자를 지정합니다. type=버튼의 종류를 지정합니다. submit : 폼을 제출합니다. 기본값입니다. reset : 폼을 리셋합니다. button : 아무것도 하지 않습니다. value="값" : 전송되는 데이터의 초기값 지정합니다. 응용하기 실습 2020. 10. 16.

HTML form(입력 양식) radio, checkbox (선택) radio 와 checkbox 이란? input의 속성 type의 종류 중 하나이다. checkbox : 체크박스 생성. (복수 선택이 가능) radio : 라디오버튼 생성. (복수 선택 불가능) checked : 웹 페이지를 열었을 때 이미 체크가 되어 있게 할 수 있다. 응용하기 실습 2020. 10. 16.

HTML form(입력 양식)의 기본 문자의 입력 2 textarea 이란? 여러줄의 텍스트를 편집할 수 있는 컨트롤을 생성한다. autofocus : 페이지를 로드할때 해당 요소가 자동으로 포커스를 받도록 지정합니다. cols="폭"(필수 속성) : textarea에 표시될 폭을 문자수로 지정합니다. disabled : 포커스, 선택, 변경 등의 조작이 불가능하게 하고 데이터도 서버에 전송하지 않는다. 불리언 속성입니다. dirname : 요소의 방향성을 결정합니다. form : 다른 폼 소유자와 명시적으로 연관시키기위해 사용됩니다. maxlengh="최대 입력 문자수" : type속성이 text이거나 password일 경우 최대 입력 문자수를 지정한다. name="이름" : textarea의 이름을 지정합니다 placeholder : 사용자가 데이터를 .. 2020. 10. 16.

HTML form (입력 양식)의 기본 문자의 입력 1 form이란? 사용자가 입력한 정보를 서버로 전송하는 것들을 말한다. 웹 페이지가 상호작용할 수 있게 하기 위한 form의최상위요소로그법위를 정의한다. action="URI" : form의 필수 속성으로 필드의 내용을 처리하는 프로그램의 URI를 지정합니다. method="HTTP메소드" : 폼의 내용을 처리하는 방법을 지정합니다. (post:폼의 본문으로 송신, get : action 에서 지정한 URI에 폼의 내용을 '?'으로 구분으로 추가하여 송신) name="식별자" : 링크나 스크립트로부터 이 폼을 참조할 수 있게 식별자를 지정한다. EX) input 이란? form안의 기본적인 정보를 적을 수 있는 컨트롤 창을 생성한다. type : 필수속성이다. 다음은 타입속성에서 사용할 수 있는 값이다. .. 2020. 10. 16.

HTML 테이블(표) 태그 이란? table은 1차원 이상의 데이터를 표의 형태로 나타낸다. 테이블(표)을 나타내기 위한 다양한 종류의 태그들 tr : row (횡렬의 셀)로 정의 th : column (종렬의 셀)으로 제목셀을 정의 td : cell (표안의 항목)로 데이터셀을 정의 caption : 표의 제목을 정의 thead : 헤더행을 그룹화하여 정의 tfoot : 푸터행을 그룹화하여 정의 tbody : 본체행을 그룹화하여 정의 col : 열의 속성값과 스타일을 위한 그룹화 colgroup : 열의 구조적 그룹화. col요소를 포함할 수 있다. border : 태두리를 만들어준다. 입력한 숫자 수치만큼 굵기 늘어난다. rowspan : 횡렬을 입력한 숫자만큼 결합한다. colspan : 종렬을 입력한 숫자만큼 결합한다. 응.. 2020. 10. 15.

HTML 기본 문법, 태그 HTML 이란? Hypertext Markup Languaged의 약자로 인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 웹 언어의 한 종류이다. 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다. 기본적인 HTML 실행 방법 1. 윈도우 기준으로 메모장을 실행한다. 아무 글자나 입력해본다. 2. 그리고 저장을 하기전 파일 이름 확장자를 html로 바꿔주고 파일 형식을 모든 파일로 바꿔준다. 그리고 인코딩 또한 UTF-8으로 바꿔준다. 3. 저장한 곳에 뜬 이러한 아이콘을 눌러주면 메모장에 적은 글이 웹 페이지 형식으로 나온다. HTML 기본 태그들 1. title은 HTML 문서의 타이틀을 지정하는 요소이다. 2. head는 문서에 나타는 메타.. 2020. 10. 15.

이전 1 다음

티스토리툴바