[HTML] HTML에서 자바스크립트 변수를 사용하는 방법은 무엇인가요?

개발/HTML 2021. 7. 14. 10:12

HTML와 자바스크립트로 뭔가를 테스트할 일이 생겼다.

그런데, 문제가 있었다. 많이 까먹었다는 것이다.

 

일단,

자바스크립트로 서버에 접속해 데이터베이스에서 값을 가져오는 것까지 성공을 했다.

그런데, HTML에 그 값을 찍어보고 싶은데 어떻게 하더라???

 

"HTML에서 자바스크립트 변수를 어떻게 사용하더라? 어떻게 불러오지?"

 

검색을 해봤다... 그 결과 결론은

 

HTML은 프로그래밍 언어가 아니라 마크업 언어기 때문에 단지, 페이지의 구조(모양)을 나타내는 역할을 한다.

따라서, HTML에서 변수를 불러와서 호출할 수 없다.  자바스크립트에서 HTML태그에 값을 넣어줄 뿐이다.

...

 

그랬다. 맞다. 생각났다. 알고 있었다. 진짜다. 

 

const name = document.getElementById("name").value;

 

이런식으로 HTML의 id를 호출해서 값을 받아올 수도 있고, 넣는다.

'개발 > HTML' 카테고리의 다른 글

자바스크립트로 HTML 코드 작성하는 방법  (476) 2021.07.21
[HTML] display 속성 : inline과 inline-block 그리고 block의 차이점.  (0) 2019.09.07
div 태그 빠르게 만드는 방법  (0) 2019.09.07
[HTML] HTML 기본 구조 분석하기  (0) 2019.02.18
[HTML] Visual Studio Code 툴에서 Live Server 설치하기  (1) 2019.02.18
Posted by sungho88
,

[React] 개발 시, HTML 태그가 적용되지 않을 때 해결 방법

개발/React 2020. 7. 19. 13:48

리액트에는 JSX라는 문법이 있다.

 

완전히 HTML과 동일한데(완전히는 아니지만... 거의..) 이것은 실제 자바스크립트에 해당된다고 한다.

 

어쨋거나...

 

JSX를 작성하다보면 당황스럽다...

 

.html 파일에서는 태그명만 입력하면 입력한 문자와 관련된 태그가 뜨고, 엔터만 치면 HTML 태그가 생성됐었는데.

 

JSX에서는 < 부터  /> 까지 전부 입력해줘야하는건가?

 

당황스럽다. 말도안되.  찾아봤다.

 

3초만에 해결하였다.

 

https://medium.com/@afulsamet/vs-code-react-js-tools-d61122dfb923

 

VS-Code React.JS Tools

Code snippets, Autocomplete HTML and more for React.JS

medium.com

 

1. Settings에 들어간다.

 

 

2. settings를 입력하고, 쭉쭉 내리다보면 이미지와 같이 JSON을 볼 수 있다.

그리고, 그 아래 Edit in settings.json을 클립해서 들어간다.

 

 

맨 아래 닫히는 중괄호 위에 }

 

,  를 입력하고

 

"emmet.includeLanguages": {
"javascript": "javascriptreact"
}

 

을 추가해준 뒤, 저장하고 나온다.

 

 

 

 

해결되었다.

 

h1 입력하면 화면에 나온다. 엔터를 치면 자동으로 태그가 생성되는 것을 볼 수 있다.

 

고민 해결!

'개발 > React' 카테고리의 다른 글

[React] 저장하면 코드를 예쁘게 정렬해주는 Prettier가 작동이 안되요  (0) 2020.07.22
[React] vs code로 리액트 개발 시, 꼭 필요한 확장 패키지  (0) 2020.07.22
[React] 리액트 쓸때 기본적인 컴포넌트 코드 자동 완성 패키지  (0) 2020.07.19
[React] 아무 이미지나 넣고 테스트할때 필용한 npm 패키지...  (0) 2020.07.17
[React] 리액트 JSX에서 HTML 자동완성(emmet) 적용하기  (1) 2019.09.21
Posted by sungho88
,

[HTML] display 속성 : inline과 inline-block 그리고 block의 차이점.

개발/HTML 2019. 9. 7. 22:15

일단, 인라인 element과 블록 element가 존재한다.

 

블록 엘리먼트는 컨텐츠의 너비와 무관하게 전체를 차지하기 때문에, 수평으로 다른 엘리먼트를 같이 사용할 수 없다.

  

1. display:block;

위와 같이 div 3개를 만들고, display를 block으로 한다면, width가 150px임에도 불구하고 모두 세로로 정렬된다.

 

블록은 페이지 전체 너비를 혼자 사용한다고 볼 수 있다.

 

 

2. display: inline-block;

이 경우, 블록은 유지되지만, 인라인 형태로 보여지게 된다.

즉, 너비를 해당 엘리먼트의 너비만큼만 사용하고 나머지 공간을 다른 엘리먼트들과 나눠쓰게 된다.

따라서, 다음과 같은 모습이 나온다.

 

3. display: inline;

 

이렇게하면, 블록 속성이 전부 무효화된다. 즉, 내부 요소 텍스트만큼만 차지하게 된다.

블록에서 width와 height를 선언했지만, 이것들은 모두 무시된다.

따라서, 다음과 같은 모습이 나온다.

 그리고, 아래와 같이 divbox 속성에 경고가 표시된다.

내용은 위 설명한 것과 같다.

display를 inline으로 하면서, 블록이 아닌게 되어버렸기 때문이다.

'개발 > HTML' 카테고리의 다른 글

자바스크립트로 HTML 코드 작성하는 방법  (476) 2021.07.21
[HTML] HTML에서 자바스크립트 변수를 사용하는 방법은 무엇인가요?  (0) 2021.07.14
div 태그 빠르게 만드는 방법  (0) 2019.09.07
[HTML] HTML 기본 구조 분석하기  (0) 2019.02.18
[HTML] Visual Studio Code 툴에서 Live Server 설치하기  (1) 2019.02.18
Posted by sungho88
,

div 태그 빠르게 만드는 방법

개발/HTML 2019. 9. 7. 21:58

태그를 직접 입력하면, 시간도 오래 걸리고 오타 확률이 늘어난다.

자동으로 태그를 생성하는 방법은 다음과 같다.

 

1. 가장 간단히, div 입력 후, 자동완성을 이용해서 태그를 선택한다.(HTML Snippets 이 깔려있어야 한다)

 

2. 태그와 함께 id나 class 바로 만들기

 

p.className를 입력하면, p 태그에 className이라는 class 속성이 들어간채로 생성된다.

a.uniqueValue를 입력하면, a 태그에 uniqueValue라는 id 속성이  들어간채로 생성된다.

 

3. div 만들기 

 

태그를 입력하지 않고 하면, 기본적으로 div 태그가 만들어진다.

 

.name 입력한 뒤, 엔터를 입력(아래와 같이 하단에 Emmet Abbreviation) 이 나와야 함.

결과

<div class="name"></div>

 

#name 입력한 뒤, 엔터를 입력.

결과

<div id="name"></div>

 

id와 class를 여러개 만들고 싶다면?

 

.className#idName

결과

<div class="className" id="idName"></div>

 

.className#idName.dekek.ekek

결과

<div class="className dekek ekek" id="idName"></div>

 

하지만, id는 한개만 생성할 수 있으므로,

.className#idName.dekek.ekek#lastID

결과

<div class="className dekek ekek" id="lastID"></div>

 

와 같이 마지막 #값이 id 값이된다.

 

 

'개발 > HTML' 카테고리의 다른 글

[HTML] HTML에서 자바스크립트 변수를 사용하는 방법은 무엇인가요?  (0) 2021.07.14
[HTML] display 속성 : inline과 inline-block 그리고 block의 차이점.  (0) 2019.09.07
[HTML] HTML 기본 구조 분석하기  (0) 2019.02.18
[HTML] Visual Studio Code 툴에서 Live Server 설치하기  (1) 2019.02.18
CSS 속성) text-rendering란 무엇인가?  (0) 2018.12.24
Posted by sungho88
,

[HTML] HTML 기본 구조 분석하기

개발/HTML 2019. 2. 18. 17:57

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
</html>


이것이 html 생성하면 나오는 기본 구조인가보다.


1. 먼저, <!DOCTYPE html> 는 해당 html 파일이 HTML5 형식으로 작성된다는 것을 명시하는 선언이다.


2. html파일은 모두 <html> 태그 안에 작성해야하며, <head>와 <body> 둘로 구성된다.


3. <head> 안에는 직접적으로 눈에 보이지 않는, 숨겨진 HTML 관련 정보들이 들어간다. 종류는 아래와 같다.


<title>

<meta>

<link>

<style>

<script>


4. <body> 안에는 직접적으로 눈에  보이는, 실제 화면을 구성하는 HTML 태그들이 들어간다.



'개발 > HTML' 카테고리의 다른 글

[HTML] display 속성 : inline과 inline-block 그리고 block의 차이점.  (0) 2019.09.07
div 태그 빠르게 만드는 방법  (0) 2019.09.07
[HTML] Visual Studio Code 툴에서 Live Server 설치하기  (1) 2019.02.18
CSS 속성) text-rendering란 무엇인가?  (0) 2018.12.24
[HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성.  (0) 2018.12.04
Posted by sungho88
,

[HTML] Visual Studio Code 툴에서 Live Server 설치하기

개발/HTML 2019. 2. 18. 17:37

물론, html 파일이 있는 디렉토리로 이동해서 더블클릭해서 브라우저로 확인할 수 있다.


그럴경우, 주소창에는 


file:///Users/jangseongho/Documents/htmlTest/index.html


이런식으로 나오게 된다.


하지만, vs code를 사용한다면 라이브 서버를 설치하여 바로 띄울 수도 있고, 코드 수정 시 리로드없이 적용이 가능하다.


아래 패키지를 설치하면 된다.




주소창에서는


http://127.0.0.1:5500/01_basic_layout.html


이렇게 바뀐다.


참고로, 127.0.0.1는 자기 자신의 로컬호스트이다.


즉, 로컬로 서버를 띄우고, 포트를 5500으로 지정된 것이다.(자동으로)


그리고, 접속을 안 할시, 금방 서버가 종료되므로 다시 접속해서 사용해야한다.

'개발 > HTML' 카테고리의 다른 글

div 태그 빠르게 만드는 방법  (0) 2019.09.07
[HTML] HTML 기본 구조 분석하기  (0) 2019.02.18
CSS 속성) text-rendering란 무엇인가?  (0) 2018.12.24
[HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성.  (0) 2018.12.04
WEBn : 웹 어플리케이션 서비스 만들기가 개편되었네요  (0) 2018.11.17
Posted by sungho88
,

[HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성.

개발/HTML 2018. 12. 4. 10:50

div는 블록 엘리먼트이다.


div안에 있는, div를 움직이려고 한다.


<div id="big"> 

<div id="small">HI</div> 

</div>

 

#big { width:500px; height:500px; background-color:#ffff00; }

#small { width:50px; height:50px; background-color:#ff0000; }


이렇게 하면, 다음과 같이 나온다.



이렇게 나온다.


여기서, 빨간색 박스를 정중앙으로 이동하고 싶다면?


일단, 가로 중앙으로 이동하는 방법은


1. margin: 0 auto


이렇게 해서, 


상 우 하 좌   순서를 0 auto 0 auto 로, 즉, 상하의 마진을 0으로, 그리고 우좌의 마진을 auto로 하게 되면,


양 쪽에 자동(auto)으로 알맞게 margin이 적용되면서 가운데 정렬이 된다. 

 

2. text-align:center; 


참고로, text-align 속성은 텍스트의 정렬 방향을 의미한다.


속성값으로


left: 왼쪽 정렬

right: 오른쪽 정렬

center: 중앙 정렬

justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)



이렇게 하면... 안 된다. 왜냐하면 ,text-align은 블록 엘리먼트 안에 들어있는 inline 요소들을 정렬하는 명령어이다.


하지만, 위 같은 경우 HI 박스도 같은 블록 엘리먼트인 div이므로 이동하지 않는다.


그래서, 블록을  inline 엘리먼트와 같이 보이도록 변경을 해줘야하는데, 이것이 바로 


display: inline-block이다.


이것을 small에 집어넣으면, inline으로 표현되기 때문에, 


big에 들어있는 text-align에 의해 가로 기준 중앙으로 이동한다.



주의할 점은  display: inline으로 하면 안된다는 것이다.


이렇게 하게 되면, small이 가진 블록만의 너비와 높이뿐만 아니라 마진 적용을 할 수 없으며, 내용물만 블록이 된다.


사진을 보면 다음과 같다.





위 두 가지 방법 중 하나를 사용하면, 가로 정렬이 완성된다. 


그렇다면 세로 정렬은 어떻게 해야할까?



1. 노란색 big div에서 display: table-cell; 으로 표의 셀처럼 설정한 뒤, vertical-align: middle; 으로 작성하면 된다.


이렇게 하면, 세로 정렬이 된다.
































'개발 > HTML' 카테고리의 다른 글

[HTML] Visual Studio Code 툴에서 Live Server 설치하기  (1) 2019.02.18
CSS 속성) text-rendering란 무엇인가?  (0) 2018.12.24
WEBn : 웹 어플리케이션 서비스 만들기가 개편되었네요  (0) 2018.11.17
페이지 가운데 정렬하기 : maring: 0 auto  (0) 2018.11.16
[HTML] CSS 기초  (0) 2018.10.18
Posted by sungho88
,

WEBn : 웹 어플리케이션 서비스 만들기가 개편되었네요

개발/HTML 2018. 11. 17. 13:51

웹 어플리케이션 서비스를 옛날에 시청했는데


HTML CSS를 안 쓰다가, 다시 쓰려니 기억이 안나서 다시 들어가봤습니다.


생활코딩 많이 바뀌었더라구요.. 복잡해지고 무슨 코딩야학?? 이게 뭥미.


어쨋거나 다시 HTML을 시작해봅시다.


https://opentutorials.org/course/3083


코딩

웹

인터넷

컴퓨터


에 대해  배운다니 멋지고 거창하군요.



HTML = 쉽고, 중요하다, 퍼블릭 도메인이다.


퍼블릭 도메인이란, 저작권이 없는 100% 무료인 것들을 말한다.


HTML 코딩 실습 환경 준비


1. 웹 브라우저

2. 웹 에디터


태그(Tag)

<strong>강조할 내용</strong> : 텍스트 일부를 강조하기 위해 사용하는 태그

<u>밑줄</u> : 밑줄을 귿는 태그

<h1>제목</h1>: 제목. 


<h1>부터 <h6>까지 존재하며 숫자가 커질수록, 폰트 사이즈는 작아짐.


<br> : 새로운 줄로 개행할 수 있다. 하지만, 

<p> 테그 역시 새로운 줄로 개행된다.

둘의 차이점은


<br>은 단순한 줄을 바꾸는 용도로 사용되지만,

<p>는 단락을 구분해주기 때문에 의미론적으로 더욱 중요한 태그이다.

물론 <br>은 여러번 쓰면 원하는 만큼 띄울 수 있기만, <p>는 정해진 간격만큼만 띄울 수 있다.

이것은 css를 통해 커버할 수 있다. margin-top: 30px; 이런식으로 마진을 쓰면 되기 때문이다.


<ul>

<li></li>

<ul>



<ol>

<li></li>

<ol>

속성(Attribute)

<img src="logo.jpg" width="100%"  >


src와 width가 속성이다. 순서는 상관없다. 시작 태그 안에 작성한다.

'개발 > HTML' 카테고리의 다른 글

CSS 속성) text-rendering란 무엇인가?  (0) 2018.12.24
[HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성.  (0) 2018.12.04
페이지 가운데 정렬하기 : maring: 0 auto  (0) 2018.11.16
[HTML] CSS 기초  (0) 2018.10.18
[HTML] 파비콘(Favicon) 만들고 적용하는 방법  (0) 2018.10.02
Posted by sungho88
,

페이지 가운데 정렬하기 : maring: 0 auto

개발/HTML 2018. 11. 16. 16:07

마진을 위 아래 좌 우 각각 설정할수도 있지만, 


마진(margin)으로 네 영역을 모두 동일하게 지정할 수 있다.


margin : "10px 20px 30px 40px"와 같이 쓰면 된다.


맨 처음 값이 상단(위), 다음값이 우측, 세번째 값이 하단, 네번째 값이 좌측이다. 


방향으로 네 값이 돌아간다.


그런데, 반복되는 값이라면 줄여서 "10px 20px" 이라고도 사용이 가능하다.


"10px 20px" 은 "10px 20px 10px 20px" 과 같은 말이다.


동일한 값으로 4번 반복된다면 "10px" 하나만 쓰면 된다.


즉, "0 auto" 는 상단과 하단은 여백을 주지 말고, 


좌측과 우측의 여백을 자동으로(auto) 주라는 것임을 알 수 있다.

 

이렇게하면, 왼쪽 마진을 오른쪽 마진을 자동으로 나눠서 균등하게 갖게 된다. 


이렇게, 가운데 정렬이 된다.


margin : "0 auto"; 이렇게 작성하면 되지만, 이상하다면 그냥 풀어서... 


margin-left : auto;

margin-right: auto;


이렇게 작성해줘도 된다. 아니 원래 이렇게 해야 정상이다. 


또한, 이것을 사용하려면 당연하지만, 너비가 존재해야 한다.


너비가 있어야 좌 우를 auto로 맞춰서 가운데 정렬이 될 것 아닌가?


너비를 주지 않으면 당연히 가운데 정렬이 적용되지 않는다.

'개발 > HTML' 카테고리의 다른 글

[HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성.  (0) 2018.12.04
WEBn : 웹 어플리케이션 서비스 만들기가 개편되었네요  (0) 2018.11.17
[HTML] CSS 기초  (0) 2018.10.18
[HTML] 파비콘(Favicon) 만들고 적용하는 방법  (0) 2018.10.02
CSS 개념 및 선택자(Selector) 사용하는 방법  (0) 2018.06.30
Posted by sungho88
,

[React] JSX란 무엇이며, 어떻게 사용하는가??

개발/React 2018. 10. 4. 15:21

(설명)

JSX는 HTML이나 XML과 매우 비슷하게 생겼다.

하지만, HTML도 아니고 XML도 아니다.

자바스크립트의 확장 문법이다(공식 문법은 아니다)

나중에 babel-loader를 통해 자바스크립트로 변환된다.


(장점)

1. 가독성이 좋다  - 자바스크립트에 비해, JSX를 사용하면 보기 쉽고, 작성하기 쉽다.

2. 오류 검사가 가능하다 - babel-loader에 의해 오류를 감지할 수 있다.

3. 거부감없이, 쉽게 작성할 수 있다 - HTML과 유사하기 때문에 쉽게 작성이 가능하다.


(사용법)

1. 컴포넌트는 반드시 태그 하나로 묶기

- 컴포넌트에 여러 요소가 있으면, 반드시 하나의 태그로 감싸야 한다. 

- 그 이유는 컴포넌트 내부는 DOM 트리 구조 하나로 구성되어야 하기 때문이다.

- <Fragment>로 감싸면, 불필요한 div를 렌더링하는 것을 생략할 수 있다.

2. 자바스크립트 코드 삽입하기

- { 자바스크립트 표현식을 작성하려면 JSX 내부에서 중괄호{ } 안에 작성하면 된다.

3. if문 대신 삼항 연산자

- JSX 내부 자바스크립트 표현식에서 if문 사용 불가하므로 삼항 연산자를 사용할 것.

4. class 대신 className 사용

- class를 작성하면 경고 발생. class는 이미 존재하는 키워드이기 때문. className을 사용할 것.

5. 태그는 반드시 닫아야 한다.

- <br>, <input> 등의 태그는 HTML에서 닫지 않아도 작동했다. 

- 하지만, 리액트 JSX에서는 반드시 <br /> 또는 <br></br>과 같이 닫아야 오류가 발생하지 않는다.

6. 주석

- 주석은 { */ 주석임... */ } 으로 작성한다.

- 또는 주석 단축키(Ctrl + /)으로 주석을 하면 좀 더 편리하다.

- 흔히 알고 있는 // 나 /* */ 이 주석을 하게 되면 텍스트로 인식되어 그대로 화면에 표시된다.

7. &&을 사용한 조건부 렌더링

- 삼항 연산자를 쓰면 참일때 A화면 출력 거짓일때 B화면 출력을 했다.

- 하지만, 특정 조건을 만족하지 않을 때 아예 화면을 보여주고 싶지 않다면 어떻게 할까?

-  {condition ? '참이에요' : null} 과 같이 삼항연산자를 사용해도 되지만,

- {condition && '보여주세요'} 와 같이 작성해도 된다.

- 쉽다. 앞 condition이 참이면 뒤 '보여주세요'가 나오겠지만, 거짓이면 뒤에는 체크하지 않는다.


8. 인라인 스타일링 

-  CSS 스타일을 자바스크립트 객체 형식으로 생성하여 적용한다.

- 해당 키는 camelCase 형식을 사용한다.


위에 다음과 같이 선언.

const style {

backgroundColor : 'black',

border : 1px solid 'yellow'

...

} 


사용시에는 다음과 같이 적용.

<div style={style}>BODY</div>


'개발 > React' 카테고리의 다른 글

[React] 리액트에서 children 사용하기  (0) 2018.10.05
[React] 함수형 컴포넌트 (Functional Component) 개념과 사용법...  (0) 2018.10.04
[React] 리액트 참고 블로그 & 도움이 될 만한 블로그 정리  (0) 2018.10.02
[React 공식 홈페이지 번역 01] 리액트란 무엇인가??  (0) 2018.09.30
[React] react render 함수에서 a태그의 href값을 동적으로 변경하고 싶을때 .  (0) 2018.08.31
Posted by sungho88
,

티스토리툴바