자바스크립트로 HTML 코드 작성하는 방법

개발/HTML 2021. 7. 21. 09:23

동적으로 바꾸고 싶을 때, 자바스크립트를 사용할 수 있다.

 

그럴 경우,

 

let htmlStr = "";

 

let htmlStr = '';

htmlStr += `
                     
                        <ol>
                          <li>테마</li>
                          <li>이름</li>
                          <li>평점</li>
                          <li>썸네일</li>
                          <li>제목(title)</li>
                          <li>주인공이름</li> 
                        </ol>
                        
                        <br />
                        ....
                        `;
                        
var list = document.getElementById("list");
list.innerHTML = htmlStr;

이런식으로 div부터 문자열로 만든 뒤, HTML의 div에 한번에 넣을 수도 있다.

 

    <div id="list"></div>

 

에, 삽입된다.

 

또는, HTML에서 구조를 먼저 레이아웃을 만든 뒤, id를 일일히 불러 삽입할 수 있다.

 

 

 

 

 

 

 

https://coupa.ng/b3PHrb

 

Dell Dell U2720QM 27 Inch UltraSharp 4K UHD IPS Ultra-Thin Bezel Moni

COUPANG

www.coupang.com

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

https://www.10000duck.com/ducks/45

 

10000duck - MBN 연약하지만 단단한 우리 가족

온라인 모금함을 통해 기부하세요.

www.10000duck.com

 

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

[HTML] HTML에서 자바스크립트 변수를 사용하는 방법은 무엇인가요?  (0) 2021.07.14
[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
,

[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
,

[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
,

CSS 속성) text-rendering란 무엇인가?

개발/HTML 2018. 12. 24. 18:58

그렇게 많이 사용되는 속성은 아닌 듯 하다.


여기


블로그에 가면, 자세하게 설명하고 있다.


솔직히, 읽어도 모르겠다.


뭔말인지..


소개


text-rendering CSS 속성은 렌더링 엔진에 텍스트 렌더링시 최적화 할 정보를 제공합니다.


속성값


auto

브라우저는 텍스트를 그리는 동안 속도, 판독성 및 기하학적 정밀도를 언제 최적화 할 것인지에 대해 숙련 된 추측을합니다. 이 값을 브라우저에서 해석하는 방법의 차이점에 대해서는 호환성 표를 참조하십시오.


optimizeSpeed

브라우저는 텍스트를 그릴 때 가독성 및 기하학적 정밀도보다 렌더링 속도를 강조합니다. 그것은 커닝과 합자를 사용할 수 없습니다.


optimizeLegibility


브라우저는 렌더링 속도와 기하학적 정밀도에 대한 가독성을 강조합니다. 이렇게하면 커닝과 선택적 합자가 가능합니다.


geometricPrecision

브라우저는 렌더링 속도와 가독성보다 기하학적 인 정밀도를 강조합니다. 커닝과 같은 글꼴의 특정 측면은 선형으로 확장되지 않습니다. 따라서이 값을 사용하면 해당 글꼴을 사용하는 텍스트가 잘 보입니다.


텍스트가 렌더링될때 최적화를 통해서 더욱 선명하게 나오게 하기 위해서 사용되는 속성인 것 같다.

아니면 말고..

굳이 사용할 필요... 사용해야 할 경우가 있을까? 

많이 없을 듯 하다..

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

[HTML] HTML 기본 구조 분석하기  (0) 2019.02.18
[HTML] Visual Studio Code 툴에서 Live Server 설치하기  (1) 2019.02.18
[HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성.  (0) 2018.12.04
WEBn : 웹 어플리케이션 서비스 만들기가 개편되었네요  (0) 2018.11.17
페이지 가운데 정렬하기 : maring: 0 auto  (0) 2018.11.16
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
,

티스토리툴바