WEB
-
2021-03-20 자바스크립트 내부에서 변수를 선언하는 키워드 중에 const가 존재한다. 해당 키워드는 변수 선언 시 초기화해야 하며, 이후에는 값을 부여할 수 없다. - 선언 방법 사실 일반변수 var 키워드와 같이 선언하는 방식은 동일하나 선언과 동시에 초기화를 시켜주어야 한다. 선언과 동시에 초기화해주지 않으면 브라우저 console 창에 아래와 같이 오류가 발생한다. 때문에 호이스팅도 불가한 점도 참고하면 좋을 것 같다. Uncaught SyntaxError: Missing initializer in const declaration - 블록 스코프(Block Scope) 위와 같이 const 변수를 블록 내부에서 선언했다면, 해당 선언된 블록 내부에서만 접근이 가능하며, 블록 이외의 영역에서는..
[JavaScript] JS 변수 키워드 const 알아보기2021-03-20 자바스크립트 내부에서 변수를 선언하는 키워드 중에 const가 존재한다. 해당 키워드는 변수 선언 시 초기화해야 하며, 이후에는 값을 부여할 수 없다. - 선언 방법 사실 일반변수 var 키워드와 같이 선언하는 방식은 동일하나 선언과 동시에 초기화를 시켜주어야 한다. 선언과 동시에 초기화해주지 않으면 브라우저 console 창에 아래와 같이 오류가 발생한다. 때문에 호이스팅도 불가한 점도 참고하면 좋을 것 같다. Uncaught SyntaxError: Missing initializer in const declaration - 블록 스코프(Block Scope) 위와 같이 const 변수를 블록 내부에서 선언했다면, 해당 선언된 블록 내부에서만 접근이 가능하며, 블록 이외의 영역에서는..
2021.03.20 -
2021-03-19 button의 type 크게 3종류로 나누어진다. 종류로는 button / submit / reset 있다 이 세 가지의 버튼 타입의 기능에 대하여 알아보도록 하자. ( 게시글 제일 아래 전체 코드를 같이 올려 두었다.) - button button은 말그대로 클릭을 할 수 있는 버튼이 브라우저 창에 생겨나며, 클릭해도 아무런 기능이 없다. 이와 같은 button은 자바스크립트와 같은 다른 언어의 함수 및 기능을 구현하면, 해당 기능을 실행하기 위한 대상(버튼)의 역할을 한다. 버튼(button) - submit submit은 과 동일한 기능을 수행하며, 서버로 데이터를 전달하는 역할을 하는 타입이다. 참고로 아무런 타입 부여 없이 " 버튼 " 을 설정해도 button의 기본 defa..
[HTML] HTML button 의 type 종류들 (submit/button/reset)2021-03-19 button의 type 크게 3종류로 나누어진다. 종류로는 button / submit / reset 있다 이 세 가지의 버튼 타입의 기능에 대하여 알아보도록 하자. ( 게시글 제일 아래 전체 코드를 같이 올려 두었다.) - button button은 말그대로 클릭을 할 수 있는 버튼이 브라우저 창에 생겨나며, 클릭해도 아무런 기능이 없다. 이와 같은 button은 자바스크립트와 같은 다른 언어의 함수 및 기능을 구현하면, 해당 기능을 실행하기 위한 대상(버튼)의 역할을 한다. 버튼(button) - submit submit은 과 동일한 기능을 수행하며, 서버로 데이터를 전달하는 역할을 하는 타입이다. 참고로 아무런 타입 부여 없이 " 버튼 " 을 설정해도 button의 기본 defa..
2021.03.19 -
2021-03-18 처음에는 top: 50%의 값과 bottom: 50% 의 값이 서로 같은 영역을 차지할 거라고 생각하지만 막상 해당 옵션을 가지는 태그들을 비교해보면 그렇지 않다. 오늘은 그 이유를 알아보도록 하자. - 예제 아래는 예제 코드로써 부모 태그 안에 두 자식 / 들이 위치하고 있다. 이후 자식태그들에게 옵션값으로 top: 50% / bottom: 50% 값을 부여해주었다. 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세 번째 영역입니다. 결과를 확인해보면 서로 다른 영역을 차지하고 있는 것을 확인할 수 있다. 여기서 의문점이 발생한다 똑같이 상단(top) or 하단(bottom)에서 시작하는데 막상 50%를 매개 값으로 주면 각 div 태그들이 차지하는 영역이 달라진다는 ..
[CSS] CSS top: 50% 와 bottom: 50% 의 차이점 알아보기.2021-03-18 처음에는 top: 50%의 값과 bottom: 50% 의 값이 서로 같은 영역을 차지할 거라고 생각하지만 막상 해당 옵션을 가지는 태그들을 비교해보면 그렇지 않다. 오늘은 그 이유를 알아보도록 하자. - 예제 아래는 예제 코드로써 부모 태그 안에 두 자식 / 들이 위치하고 있다. 이후 자식태그들에게 옵션값으로 top: 50% / bottom: 50% 값을 부여해주었다. 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세 번째 영역입니다. 결과를 확인해보면 서로 다른 영역을 차지하고 있는 것을 확인할 수 있다. 여기서 의문점이 발생한다 똑같이 상단(top) or 하단(bottom)에서 시작하는데 막상 50%를 매개 값으로 주면 각 div 태그들이 차지하는 영역이 달라진다는 ..
2021.03.18 -
2021-03-17 top 속성이 있다면 bottom 속성도 있다. 이는 마찬가지로 수직 위치를 변경하는 태그로써 position: static을 제외한 이외의 position 들의 수직상의 위치를 조정하기 위해 사용한다. - bottom: 0px or 100px 우선 부모 div태그에 relative를 적용함으로써 자식 태그들의 기준점이 될 수 있도록 position을 잡아주었다. 이후 각 자식 태그 'two' / 'three' 에게 각각 top : 0px / top : 100px 을 부여해 주었다. (기존의 top 예제와 같다) 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세 번째 영역입니다. 결과를 확인해보면 bottom: 0px에 가까울수록 bottom의 아래쪽과 가까워지며, 매개..
[CSS] CSS bottom 속성을 이용한 수직 위치 변경 방법 알아보기.2021-03-17 top 속성이 있다면 bottom 속성도 있다. 이는 마찬가지로 수직 위치를 변경하는 태그로써 position: static을 제외한 이외의 position 들의 수직상의 위치를 조정하기 위해 사용한다. - bottom: 0px or 100px 우선 부모 div태그에 relative를 적용함으로써 자식 태그들의 기준점이 될 수 있도록 position을 잡아주었다. 이후 각 자식 태그 'two' / 'three' 에게 각각 top : 0px / top : 100px 을 부여해 주었다. (기존의 top 예제와 같다) 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세 번째 영역입니다. 결과를 확인해보면 bottom: 0px에 가까울수록 bottom의 아래쪽과 가까워지며, 매개..
2021.03.17 -
2021-03-16 Top 속성은 static position을 제외한 이외의 position의 각 옵션 속성들의 부모 태그를 기준으로 수직으로 위치를 조정할 수 있게 해주는 속성이다. top에 주어지는 값에 따른 각 자식 태그들의 수직이동을 살펴보도록 하자. - top: 0px or 100px 우선 부모 div태그에 relative를 적용함으로써 자식태그들의 기준점이 될 수 있도록 position을 잡아주었다. 이후 각 자식 태그 'two' / 'three' 에게 각각 top : 0px / top : 100px 을 부여해 주었다. 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세번째 영역입니다. 결과를 확인해보면 top이 0에 가까울수록 부모 태그의 상단에 가까워지면 top이 커질수록 부..
[CSS] CSS Top 속성을 이용한 수직 위치 변경 방법 알아보기.2021-03-16 Top 속성은 static position을 제외한 이외의 position의 각 옵션 속성들의 부모 태그를 기준으로 수직으로 위치를 조정할 수 있게 해주는 속성이다. top에 주어지는 값에 따른 각 자식 태그들의 수직이동을 살펴보도록 하자. - top: 0px or 100px 우선 부모 div태그에 relative를 적용함으로써 자식태그들의 기준점이 될 수 있도록 position을 잡아주었다. 이후 각 자식 태그 'two' / 'three' 에게 각각 top : 0px / top : 100px 을 부여해 주었다. 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세번째 영역입니다. 결과를 확인해보면 top이 0에 가까울수록 부모 태그의 상단에 가까워지면 top이 커질수록 부..
2021.03.16 -
2021-03-15 opacity 구글 번역상에서 불투명이라는 단어로 해석된다. 말 그대로 색에 투명도를 부여할 수 있는 css 속성이다. 오늘은 이를 통해 배경색의 변화를 주는 방법을 알아보자. - opacity opacity의 기본(default) 값은 1이다. 1이 원색 그 자체로써 투명도를 부여하지 않은 것을 뜻한다. 해당 속성은 0부터 1까지의 범위를 가지며, 자유롭게 값을 부여할 수 있다. - 예제 opacity 0.1 opacity 0.3 opacity 0.5 opacity 0.7 opacity 0.9 opacity 1 div 태그에 배경색을 각각 부여해주고 이후 opacity통해 각각 다른 투명도를 부여해 주었다. 결과는 아래와 같으며, 부여된 opacity의 숫자가 작을수록 점점 투명도가..
[CSS] CSS opacity 를 이용한 background 의 투명도 조절2021-03-15 opacity 구글 번역상에서 불투명이라는 단어로 해석된다. 말 그대로 색에 투명도를 부여할 수 있는 css 속성이다. 오늘은 이를 통해 배경색의 변화를 주는 방법을 알아보자. - opacity opacity의 기본(default) 값은 1이다. 1이 원색 그 자체로써 투명도를 부여하지 않은 것을 뜻한다. 해당 속성은 0부터 1까지의 범위를 가지며, 자유롭게 값을 부여할 수 있다. - 예제 opacity 0.1 opacity 0.3 opacity 0.5 opacity 0.7 opacity 0.9 opacity 1 div 태그에 배경색을 각각 부여해주고 이후 opacity통해 각각 다른 투명도를 부여해 주었다. 결과는 아래와 같으며, 부여된 opacity의 숫자가 작을수록 점점 투명도가..
2021.03.15 -
2021-03-13 바로 결론부터 말하자면, backgroud와 background-color 모두 색상을 지정할 수 있다. 다만 background-color 즉 색깔만 지정할 수 있는 반면에, background는 color 이외의 다른 background 옵션들을 지정해 사용할 수 있다. - 사용법 /* 백그라운드의 경우 다양한 백그라운드 옵션을 띄어쓰기로 구분해서 한번에 줄 수 있다. */ background: #color url("image url") no-repeat; /* background-color은 단순히 배경색 옵션만 부여할 수 있다. */ background-color: #color; 사용법은 위의 css 코드처럼 사용할 수 있다. 기본 background-color는 단순히 색깔 ..
[CSS] CSS background 와 background-color의 차이 알아보기.2021-03-13 바로 결론부터 말하자면, backgroud와 background-color 모두 색상을 지정할 수 있다. 다만 background-color 즉 색깔만 지정할 수 있는 반면에, background는 color 이외의 다른 background 옵션들을 지정해 사용할 수 있다. - 사용법 /* 백그라운드의 경우 다양한 백그라운드 옵션을 띄어쓰기로 구분해서 한번에 줄 수 있다. */ background: #color url("image url") no-repeat; /* background-color은 단순히 배경색 옵션만 부여할 수 있다. */ background-color: #color; 사용법은 위의 css 코드처럼 사용할 수 있다. 기본 background-color는 단순히 색깔 ..
2021.03.13 -
2021-03-11 text-align을 이용하면 블록 속성의 태그들의 내부 데이터(텍스트)를 정렬을 할 수 있다. 구체적으로 해당 태그에 어떤 속성들이 있는지 알아보도록 하자. - left ( 왼쪽 정렬 ) Hello Wrold! div의 영역에서의 정렬된 위치를 좀 더 명시적으로 파악하기 위해서 넓이와 높이 그리고 배경을 지정해 주었다. text-align : left는 아래의 이미지와 같이 왼쪽으로 데이터를 정렬시켜준다. - right ( 오른쪽 정렬 ) Hello Wrold! text-align : right 는 아래의 이미지와 같이 오르쪽 쪽으로 데이터를 정렬시켜준다. - center ( 가운데 정렬 ) Hello Wrold! 아마 가장 많이 사용될 내부데이터 가운데 정렬방법이다. text-al..
[CSS] CSS text-align 을 통한 데이터(텍스트)정렬 방법 알아보기2021-03-11 text-align을 이용하면 블록 속성의 태그들의 내부 데이터(텍스트)를 정렬을 할 수 있다. 구체적으로 해당 태그에 어떤 속성들이 있는지 알아보도록 하자. - left ( 왼쪽 정렬 ) Hello Wrold! div의 영역에서의 정렬된 위치를 좀 더 명시적으로 파악하기 위해서 넓이와 높이 그리고 배경을 지정해 주었다. text-align : left는 아래의 이미지와 같이 왼쪽으로 데이터를 정렬시켜준다. - right ( 오른쪽 정렬 ) Hello Wrold! text-align : right 는 아래의 이미지와 같이 오르쪽 쪽으로 데이터를 정렬시켜준다. - center ( 가운데 정렬 ) Hello Wrold! 아마 가장 많이 사용될 내부데이터 가운데 정렬방법이다. text-al..
2021.03.11 -
2021-03-10 출처 : www.w3schools.com/ - normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default 모든 개행 문자 / space / tab들이 병합되며, 브라우저 끝에서 자동 줄 바꿈을 해준다. css에서의 디폴트 값으로 적용된다. 실행결과 - nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is ..
[CSS] CSS white-space 개행문자를 처리하는 방법 알아보기.2021-03-10 출처 : www.w3schools.com/ - normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default 모든 개행 문자 / space / tab들이 병합되며, 브라우저 끝에서 자동 줄 바꿈을 해준다. css에서의 디폴트 값으로 적용된다. 실행결과 - nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is ..
2021.03.10 -
2021-03-09 css에서 스타일에서 기본 백그라운드를 설정하면, 백그라운드의 이미지가 좌측 맨 위에 위치해 있는 것을 볼 수 있다. 또한 점차 백그라운드 옵션을 준 블록 태그에 크기가 커짐에 따라 백그라운드가 이미지가 반복되어 들어가는 경우가 있는데 오늘은 이 부분을 해결하는 방법을 알아보자. - 코드 (백그라운드 url 이미지 출처: 위키피디아) 해당 방법은 모두 background-XXXX 와 같은 옵션 태그로 설정하면 된다. 이미지 한 장을 정중앙에 위치시키기 위해서는 background-position: center; / 이미지의 반복을 없애기 위해서는 background-repeat: no-repeat; 와 같은 태그를 사용하면, 한 장의 이미지만 정중앙에 위치하여 백그라운드의 역할을 하는..
[CSS] CSS 백그라운드 이미지 가운데 정렬하는 / 반복없애는법2021-03-09 css에서 스타일에서 기본 백그라운드를 설정하면, 백그라운드의 이미지가 좌측 맨 위에 위치해 있는 것을 볼 수 있다. 또한 점차 백그라운드 옵션을 준 블록 태그에 크기가 커짐에 따라 백그라운드가 이미지가 반복되어 들어가는 경우가 있는데 오늘은 이 부분을 해결하는 방법을 알아보자. - 코드 (백그라운드 url 이미지 출처: 위키피디아) 해당 방법은 모두 background-XXXX 와 같은 옵션 태그로 설정하면 된다. 이미지 한 장을 정중앙에 위치시키기 위해서는 background-position: center; / 이미지의 반복을 없애기 위해서는 background-repeat: no-repeat; 와 같은 태그를 사용하면, 한 장의 이미지만 정중앙에 위치하여 백그라운드의 역할을 하는..
2021.03.09 -
2021-03-03 이클립스 사용간 자바 프로젝트와 웹 프로젝트를 번갈아서 만들다 보면, 각 프로젝트 간 인코딩 방식이 상이하여 글자(한글)가 깨지는 현상이 발생하곤 하는데, 이를 해결하는 방법을 알아보자. - 전체 프로젝트 인코딩 방식 설정 1. 상단 메뉴창 Window -> Preferences 클릭 2. General -> Workspace -> Text file encoding Text file encoding에서 자신이 원하는 인코딩 형태를 선택해서 사용하면 된다. (자신의 원하는 타입이 없을 경우 직접 타이핑하여 적어주면 된다. ) - 프로젝트별 인코딩 방식 설정 물론 개별 프로젝트별 인코딩방식을 따로 설정할 수 있다. 1. 프로젝트 우클릭 -> Properties 클릭 2. Resource ..
[HTML] 이클립스 UTF - 8 / EUC-KR 인코딩 변경하는 방법 [한글깨짐해결]2021-03-03 이클립스 사용간 자바 프로젝트와 웹 프로젝트를 번갈아서 만들다 보면, 각 프로젝트 간 인코딩 방식이 상이하여 글자(한글)가 깨지는 현상이 발생하곤 하는데, 이를 해결하는 방법을 알아보자. - 전체 프로젝트 인코딩 방식 설정 1. 상단 메뉴창 Window -> Preferences 클릭 2. General -> Workspace -> Text file encoding Text file encoding에서 자신이 원하는 인코딩 형태를 선택해서 사용하면 된다. (자신의 원하는 타입이 없을 경우 직접 타이핑하여 적어주면 된다. ) - 프로젝트별 인코딩 방식 설정 물론 개별 프로젝트별 인코딩방식을 따로 설정할 수 있다. 1. 프로젝트 우클릭 -> Properties 클릭 2. Resource ..
2021.03.03 -
2020-10-15 이름에서도 느껴지듯이 포지션은 태그 및 각종 선택자들의 위치를 자유롭게 움직일 수 있는 기능을 수행하는 역할을 뿐 아니라 웹페이지의 디자인 적인 부분에서도 중요한 역할을 수행한다. 그러면 구체적인 사용방법을 알아보도록 하자. 우선 기본적인 템플릿은 리스트를 사용하여 만들었다. ul은 부모 선택자 될 거기 때문에 id를 parent / li는 자식 선택자가 될 거기 때문에, child로 선언해 주었다. position의 가장 기본적인 속성인 relative 사용 코드 입니다. parent child 위의 코드와 주석에서 살펴볼 수 있듯이 자신의 부모를 기준으로 상대적으로 이동을 하게 만드는 코드입니다. 코드 실행시 웹사이트 화면의 구성은 아래와 같습니다. 추가적으로 아래와 같이 chil..
[CSS] CSS 포지션(position) Relative / Absolute 알아보자!2020-10-15 이름에서도 느껴지듯이 포지션은 태그 및 각종 선택자들의 위치를 자유롭게 움직일 수 있는 기능을 수행하는 역할을 뿐 아니라 웹페이지의 디자인 적인 부분에서도 중요한 역할을 수행한다. 그러면 구체적인 사용방법을 알아보도록 하자. 우선 기본적인 템플릿은 리스트를 사용하여 만들었다. ul은 부모 선택자 될 거기 때문에 id를 parent / li는 자식 선택자가 될 거기 때문에, child로 선언해 주었다. position의 가장 기본적인 속성인 relative 사용 코드 입니다. parent child 위의 코드와 주석에서 살펴볼 수 있듯이 자신의 부모를 기준으로 상대적으로 이동을 하게 만드는 코드입니다. 코드 실행시 웹사이트 화면의 구성은 아래와 같습니다. 추가적으로 아래와 같이 chil..
2020.10.15 -
2020-10-11 Cascade 동사로는 폭포처럼 떨어지다 라는 의미를 갖고 있으며, Cascading은 폭포 정도로 해석할 수 있다. 다만 CSS 상에서의 Cascading 폭포라는 의미보다는 우선순위라는 해석으로 받아들이는 게 조금 더 이해하기 쉬울 것 같다. 이와 같은 캐스케이딩이 존재하는 이유는 웹을 구축하는 과정에서 내 여러 선택자를 사용하게 되는데, 이와 같은 선택자들에게 우선순위를 부여하지 않는다면 큰 혼란을 초래할 수 있기 때문이다. 그러면 이제 구체적인 예를 들어가며, 살펴보도록 하자. 포도 사과 수박 우선 정렬되지 않은 리스트를 하나 만들어주었다. 주제는 과일로 정해 사과에 다양한 선택자를 주었으면 내용은 아래와 같다. id(빨간색) / class(초록색) / style(노란색) / ..
[CSS] CSS 캐스케이딩Cascading에 대하여 쉽게 알아보자!2020-10-11 Cascade 동사로는 폭포처럼 떨어지다 라는 의미를 갖고 있으며, Cascading은 폭포 정도로 해석할 수 있다. 다만 CSS 상에서의 Cascading 폭포라는 의미보다는 우선순위라는 해석으로 받아들이는 게 조금 더 이해하기 쉬울 것 같다. 이와 같은 캐스케이딩이 존재하는 이유는 웹을 구축하는 과정에서 내 여러 선택자를 사용하게 되는데, 이와 같은 선택자들에게 우선순위를 부여하지 않는다면 큰 혼란을 초래할 수 있기 때문이다. 그러면 이제 구체적인 예를 들어가며, 살펴보도록 하자. 포도 사과 수박 우선 정렬되지 않은 리스트를 하나 만들어주었다. 주제는 과일로 정해 사과에 다양한 선택자를 주었으면 내용은 아래와 같다. id(빨간색) / class(초록색) / style(노란색) / ..
2020.10.11 -
2020-10-03 우선 Selector의 의미는 말 그대로 자신이 원하는 특정 태그를 선택할 수 있는 기능입니다. 그중에서 ID의 사용법을 먼저 알아보도록 하겠습니다. 소스코드 Css 길동 짱구 철수 먼저 자신이 바꾸고자 하는 태그의 여는 부분에 id를 만들어주어야 합니다. 위와 같이 정렬된 첫 번째 리스트인 길동에게 변화를 주고 싶어 id = "Only" 를 선언해 주었습니다. 다음에는 해당 태그를 원하는 값으로 변경해 주기 위해서 head 태그 안에 style태그를 선언해주고 이후 id의 불러오기 위한 selcetor인 #뒤에 해당 id(Only)를 적어주면 됩니다. (이후 저는 색깔을 빨강으로 바꾸기 위해 중괄호 후 color : red를 선언해 주었습니다.) 그러면 아래와 같이 id select..
[CSS] Selector(ID) / Selector(Class) CSS선택자 알아보기!2020-10-03 우선 Selector의 의미는 말 그대로 자신이 원하는 특정 태그를 선택할 수 있는 기능입니다. 그중에서 ID의 사용법을 먼저 알아보도록 하겠습니다. 소스코드 Css 길동 짱구 철수 먼저 자신이 바꾸고자 하는 태그의 여는 부분에 id를 만들어주어야 합니다. 위와 같이 정렬된 첫 번째 리스트인 길동에게 변화를 주고 싶어 id = "Only" 를 선언해 주었습니다. 다음에는 해당 태그를 원하는 값으로 변경해 주기 위해서 head 태그 안에 style태그를 선언해주고 이후 id의 불러오기 위한 selcetor인 #뒤에 해당 id(Only)를 적어주면 됩니다. (이후 저는 색깔을 빨강으로 바꾸기 위해 중괄호 후 color : red를 선언해 주었습니다.) 그러면 아래와 같이 id select..
2020.10.03 -
2020-05-23 우리가 특정 웹사이트를 들어가 정보를 접하게 되면, 아래와 같이 문단과 문장에 끝을 알리는 여백을 손쉽게 볼 수 있는데, 이러한 것을 가능하게 하는 태그가 바로 태그라고 할 수 있습니다. 우선적으로 p태그는 paragraph의 준말로 단락을 나타내는 태그인데, 단락을 표시하고 싶은 곳 앞에 여는 태그 끝나는 곳에 닫는 태그를 해주면 누구나 쉽게 단락을 나눌 수 있게 되는 아주 간편한 태그입니다. -사용법 ex- 2013년 12월, 미국 항공우주국은 허블 우주 망원경의 연구를 바탕으로, 토성의 위성인 엔셀라두스에서 발견된 것과 비슷한 수증기 기둥을 유로파에서 발견했다고 발표했다. [13] 또한, 유로파의 표면에서 유기 물질과 관계가 있는 점토 광물(특히 층상 규산염)이 발견되었다고 발표..
HTML 태그 <p> <br>줄바꾸기 <img>이미지 삽입 <table> 표삽입2020-05-23 우리가 특정 웹사이트를 들어가 정보를 접하게 되면, 아래와 같이 문단과 문장에 끝을 알리는 여백을 손쉽게 볼 수 있는데, 이러한 것을 가능하게 하는 태그가 바로 태그라고 할 수 있습니다. 우선적으로 p태그는 paragraph의 준말로 단락을 나타내는 태그인데, 단락을 표시하고 싶은 곳 앞에 여는 태그 끝나는 곳에 닫는 태그를 해주면 누구나 쉽게 단락을 나눌 수 있게 되는 아주 간편한 태그입니다. -사용법 ex- 2013년 12월, 미국 항공우주국은 허블 우주 망원경의 연구를 바탕으로, 토성의 위성인 엔셀라두스에서 발견된 것과 비슷한 수증기 기둥을 유로파에서 발견했다고 발표했다. [13] 또한, 유로파의 표면에서 유기 물질과 관계가 있는 점토 광물(특히 층상 규산염)이 발견되었다고 발표..
2020.05.23 -
2020-05-21 HTML 또는 하이퍼텍스트 마크업 언어는 웹 페이지를 위한 지배적인 마크업 언어다. 위의 사전 용어만 본다면 해당 용어가 정확히 무엇을 의미하는지 정확히 파악하기에는 조금 어려움이 있는 것 같습니다. 좀 더 쉽게 이해하기 위해서는 HTML을 2가지로 나누어줄 필요가 있습니다. HyperText 하이퍼텍스트는 HTML을 구성하는 핵심적인 부분으로 문서와 문서를 연결해주는 링크라는 의미이며, 쉽게 이야기하자면 네이버 메인 사이트와 뉴스 카테고리 링크의 연결도 하나의 하이퍼 텍스트라고 볼 수 있다! (너와 나의 연결고리ㅎ_ㅎ...) Markup Language 마크업 랭귀지는 웹사이트를 표현하는 언어라고 보면 되는데, 네이버 메인 사이트 내에서 F12를 눌러보면 위와 같이 우측에 나타나게 ..
HTML 기초이론/태그/링크/문법2020-05-21 HTML 또는 하이퍼텍스트 마크업 언어는 웹 페이지를 위한 지배적인 마크업 언어다. 위의 사전 용어만 본다면 해당 용어가 정확히 무엇을 의미하는지 정확히 파악하기에는 조금 어려움이 있는 것 같습니다. 좀 더 쉽게 이해하기 위해서는 HTML을 2가지로 나누어줄 필요가 있습니다. HyperText 하이퍼텍스트는 HTML을 구성하는 핵심적인 부분으로 문서와 문서를 연결해주는 링크라는 의미이며, 쉽게 이야기하자면 네이버 메인 사이트와 뉴스 카테고리 링크의 연결도 하나의 하이퍼 텍스트라고 볼 수 있다! (너와 나의 연결고리ㅎ_ㅎ...) Markup Language 마크업 랭귀지는 웹사이트를 표현하는 언어라고 보면 되는데, 네이버 메인 사이트 내에서 F12를 눌러보면 위와 같이 우측에 나타나게 ..
2020.05.21