본문 바로가기
반응형

프로그래밍 개발247

Javascript 조건문의 문법 조건문이란? 조건문이란 주어진 조건에 따라서 에플리케이션을 다르게 동작하도록 하는 것이다. 조건문의 문법 if 조건문은 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean이다. Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다. if 문의 조건이 참이면 중괄호의 시작({}부터 중괄호의 끝(})까지의 구간이 실행되기 때문이다. 거짓이면 중괄호 구간이 실행되지 않기 때문에 alert(5); 구문만 실행된 것이다. else if if문의 조건이 false라면 else 이후의 중괄호 구간이 실행된다. 즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다. 위의 코드를 보면 모든 if문의 조건이 false로 되어 있어 결국 맨.. 2020. 11. 3.
Javascript 비교 연산자 비교 연산자란? 프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다. 이 때 비교 연산자를 사용하는데 비교 연산자의 결과는 true나 false 중의 하나다. true와 false는 블린(boolean)이라고 불리는 데이터 형식이다. == 동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다. '='가 두개인 것을 주의하자. '='가 하나인 것은 대입 연산자로 우항의 값을 좌항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다. === 일치 연산자로 '==='좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다. '==='는 숫자 7과 문자 7을 다르게 인식한다. 반면에 '=='는 양쪽의 값을 같다고 판.. 2020. 11. 3.
Javascript 변수 Variable 변수 Variable 란? 문자나 숫자 같은 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용한다. 여기에 담겨진 값은 다른 값으로 바꿀 수 있다. 변수는 마치 사람이 쓰는 언어인 자연어에서 대명사와 비슷한 역할을 한다. 변수의 선언 변수는 var로 시작한다. var은 변수를 선언하겠다는 것을 의미한다. var은 위에 한 번 선언해준다면 밑의 계속되는 코드에 계속 이용해도 상관없다. 변수 a에 담겨 있는 값이 1일 때는 a+7의 결과가 8가 된다. 즉, a에 변수를 선언하여 7이 담겨져 있다는 거다. 변수의 값이 꼭 숫자만 올 수 있는 것은 아니다. 문자 또한 따옴표를 이용하며 사용 가능하다. 변수의 의의 위의 코드중 맨 위에 변수로 선언한 a=100; 의 100만 고쳐준다면 아래에 선언되어 있는 .. 2020. 11. 3.
Javascript 숫자와 문자에 대한 기본 Javascript의 숫자와 문자 프로그래밍 입문자에게 가장 익숙한 데이터 형(data type)은 숫자와 문자이며 데이터 형인 문자와 숫자를 프로그래밍에서는 어떻게 표현하고 연산하는지 알아보고자 한다. 옆에 이미지에 나와있는 결과처럼 자바스크립트의 언어의 () 안에 별다른 기호 없이 +, *, / 을 해준다면 그대로 계산기가 계산하듯이 결과값이 도출된다. console.log는 자바스크립트 언어의 일종으로 크롬 개발자 도구의 콘솔에서 쉽게 결과를 볼 수 있도록 할 수 있어 사용하였다. Math는 수학과 관련된 명령어를 불러들이는 일종의 카테고리로 생각하면 된다. Math 뒤에 점과 같이 붙어 있는 것이 수학과 관련된 명령어들이다. .pow - (n,m) 중 n의 m승 즉, n^m .round - 반올림.. 2020. 11. 3.
Javascript 기본 및 실행 방법 Javascript 이란? JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. Javascript 의 실행 alert('Hello world');가 기본적인 예로 든 자바스크립트 형태이다. 안에 자바스크립트 명령어를 적고 html을 실행하듯이 웹 페이지를 열면 정상적으로 실행 할 수 있다. 예로 마땅한 개발 도구가 없다면 컴퓨터에 있는 메모장을 열어 위의 코드를 입력하고 파일 확장자를 .html로 저장하고 이 파일의 웹을 열어보면 결과를 확인 할 수 있다. 2020. 11. 3.
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 폰텔로 fontello 활용하기 폰텔로 fontello fontello는 딩벳이나 아이콘을 폰트로 제공하는 여러 서비스를 모아둔 서비스다. 특히 SVG 파일을 업로드하면 폰트로 만들어주기도 한다. 폰텔로를 사용하기 위한 사이트 fontello.com/ Fontello - icon fonts generator This site will not work if cookies are completely disabled. {"assets_hash":"4f281663992d71f728e8efc840ca28ff","page_data":{},"locale":"en-US","layout":"fontello.layout"} fontello.com 폰텔로 적용 과정 1. 을 이용하여 fontello.com 사이트에서 다운 받은 파일 안에있는 css/fon.. 2020. 10. 26.
CSS 코드 경량화 minify 코드 경량화 minify CSS는 네트워크를 통해서 전송된다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해이기 때문에 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화해주는 도구가 minify 도구이다. 코드 경량화 사이트 adamburgess.github.io/clean-css-online/ clean-css online adamburgess.github.io 2020. 10. 26.
CSS link와 import를 이용한 유지 보수 link와 import 똑같은 CSS를 적용해야 하는 웹페이지가 1000개가 있을 때 CSS의 내용이 바뀌었다면 천개의 페이지를 수정하는 것은 CSS의 수정을 소극적으로 만들고 장애물이 될 수 있다. 이때 link와 import을 이용한다면 매우 효율적이며 웹 페이지의 로딩시간이 줄어들어 경제적이다. 2020. 10. 26.
CSS 그래픽 - background, filter, transform, transition 배경화면 Background - background-size : width height / cover / contain 크기에 관한 설정이다. (cover, contain : 손실있어도 꽉차게, 꽉안차도 손실없게) - background-attachment : scroll / fixed 배경화면 이미지를 스크롤 할때 고정할지 고장 하지 않을지 설정. - background-position : center right /top bottom /left 배경화면 이미지의 위치 설정이다. - background-image : url(' '); 배경화면 이미지 주소 및 파일 불러오기. (배경이 투명한 이미지를 쓰면 color와 같이 쓸수있음) - background-repeat : no-repeat,repeat; .. 2020. 10. 22.
CSS 다단(multi column)에 대하여 다단(multi column) 이란? 다단(multi column)은 아래 신문처럼 화면을 분할해서 좀 더 읽기 쉽도록 만든 레이아웃을 의미한다. CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공하고 있다. 다단을 위해 쓰는 컬럼 예 -column-count : 컬럼을 몇 개로 나눌지 정한다. -column-width : 나뉘어진 하나의 컬럼의 크기를 정한다. -column-gap : 컬럼 사이 간격을 정한다. -column-rule-style : 컬럼 사이의 선 스타일을 정한다. -column-rule-width : 컬럼 사이의 선의 두께을 정한다. -column-rule-color : 컬럼 사이의 선의 색깔을 정한다. -coulmn-span : 특정 태그가 컬럼을 초월하게 하고 싶을 때.. 2020. 10. 21.
CSS 플루트 (float) float 이란? Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이다. ※ clear는 float가 적용된 요소에 대하여 피해가지 않기 하기 위해서 피해가지 말라는 요소에게 적용한다.) 응용 실습 1. 삽입된 이미지에 float : right을 이용하여 float을 적용해 주었다. right 로 삽입된 이미지가 웹 페이지의 오른쪽에 위치시키도록 하였다. 2. 문장의 두번째 단락은 float가 적용된 이미지를 피해가지 말라고 단락을 구별짓는 태그 안에 clear : both을 넣어주었다. 2020. 10. 21.
CSS 미디어 쿼리 (media query) 미디 미디어 쿼리 (media query) 이란? media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능이다. 미디어 쿼리을 실행하기 위한 선택자 예 - @media (max-width:~px) : ~px이하로 창이 작아지면 설정해둔 효과가 실행 - @media (min-width:~px) : ~px이상으로 창이 커지면 설정해둔 효과가 실행 더 많은 미디어 쿼리의 종류가 있다. 참조 www.w3schools.com/cssref/css3_pr_mediaquery.asp CSS @media Rule CSS @media Rule Example Change the background color of the element to "lightblue" when the browse.. 2020. 10. 21.
CSS 레이아웃의 활용 flex flex 이란? flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않아 flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있게 되었다. flex의 기본 flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 한다. 또한 flex-direction을 이용해서 정렬 방향을 바꿀 수 있다. 방향 설정을 row을 추가하지 않아도 기본은 row로 설정된다. display:flex 실습 flex의 basic, grow, shrink 아이템은 웹 컨테이너의 창 크기에 따라서 작아지기도 하고 커지기도 한다. 이때 작아지고, 커지는 비율을 지정하는 방법이 바로 grow과 shrink이다. - basic : .. 2020. 10. 21.
CSS 레이아웃의 기본 inline과 block inline : 블록라인이 화면 일부를 차지하는 태그이다. block : 블록라인이 화면 전체를 사용하는 태그이다. 1. inline이 적용된 "인라인" 텍스트의 border는 일부분 공간으로 바뀌고, block은 "이 텍스트는 블럭레벨 입니다."의 텍스트 문장이 있는 라인 전체 공간을 사용한다. 2. display 속성 특성을 인하여 텍스트 글의 줄바꿈이 자동으로 되는 것을 볼 수 있다. 1. display와 inline, block을 쓰지 않으니 줄바꿈은 되지 않으며 border와 soild의 효과만 적용된 것을 볼 수 있다. 박스 모델 box model 각 태그들이 웹 페이지에 표현될 때 사각형의 형태(box)로 그 태그의 부피감을 결정한다. - margin : 태그와 태그.. 2020. 10. 20.
CSS 서체 다루기 크기 font-size rem html 태그에 적용된 font-size의 영향을 받는다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 더 유용하며 가장 바람직한 단위이다. 이것을 사용하는 것이 좋다. px 모니터 상의 화소 하나의 크기에 대응되는 단위이다. 고정된 값이기 때문에 이해하기 쉽지만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋다. em 부모 태그의 영향을 받는 상대적인 크기이다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵기 때문데. rem이 등장하면서 이 단위 역시 사용이 권장되지 않는다. 색상 color RGB 값 CSS에서는 다음 공식을 사용하여 색상을 RGB 값으로 지정할 수 있다. EX) rgb ( 255, 0 , 0.. 2020. 10. 20.
CSS 케스케이딩에 대하여 케스케이딩 이란? 다양한 CSS 선언의 영향을 받을 때 충돌을 피하기 위해서 우선순위를 정하는데 이를 캐스케이딩이라고 한다. CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라지며 대상을 명확하게 특정할수록 명시도가 높아지면서 우선순위가 높아진다. 또한 CSS선언을 나중에 할수록 우선순위가 높아진다. style>id 선택자>class 선택자>tag 선택자 순으로 우선순위가 정해진다. 단 !important을 사용한다면 제일 큰 우선순위가 정해진다. 2020. 10. 20.
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.
반응형

티스토리툴바