개발자의 개발 블로그

정말 쉽네요~

자동완성이 엄청난것 같아요.

약 2자만 치면 자동으로 목록이 나오고, 선택하면 

시작태그와 끝태그 그리고 중요한 속성까지 입력할 수 있게 자동완성되어 보여지네요

맥 기준으로 Option + Shift + F를 통해 HTML 자동 정렬까지 가능하구요~

확장을 통해 브라우저까지 쉽게 열 수 있으니... 이건 뭐 개발 속도가 증가될 수 밖에요 

아톰에서 엄청 삽질했던게 기억나는데

이런 세상이 있었다니..

물론... 알아야 잘 쓸수 있는거니까... 삽질이나 노가다 입력을 통해 HTML 구조에 대해 알고 계시는 것이 좋을 것같아요.

비주얼 스튜디오 코드에서 브라우저를 쉽게 열려면 패키지를 설치해줘야 한다.

1. 보기 메뉴 - 확장을 선택한다.

2. 아래와 같은 창이 나온다. 

3. View in Browser를 입력한다. 그리고 설치한다.

설명은 다음과 같다. 단축키는 Ctrl + F1이라고 한다.

끝났다..

깔끔하게 종료한 뒤, 다시 들어가서 코드에 커서를 놓고

윈도우 : Ctrl + F1

맥 : Command + F1

을 누르게 되면 자동으로 브라우저가 열리며 코드가 적용된것을 볼 수 있다.

텍스트를 덩어리로 묶는 태그

<h1>부터 <h6> 태그 : 

- 일반 텍스트 보다 크고 진함... 즉, 제목을 표시함.

- <h1>이 가장 크며 주로 사용됨. 뒤로 갈수록 작아짐.

<p>태그

- 단락 만들어주는 태그. 텍스트를 사용할때 가장 많이 사용하는 태그.

- 단락이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리.

- </p>가 나올때까지 텍스트를 한 줄로 표시하며, 한 줄이 넘어갈경우 자동으로 개행됨.

<br>태그

- 줄 바꾸는 태그

- 편집기에서 줄 바꿈을 해도 브라우저 창에서는 무시하고 한 줄로 표시됨.

- 웹 브라우저 창에서도 줄 바꿈 표시를 하고싶다면 <br>태그를 사용.

<hr>태그

- 수평 줄 넣기.

- 텍스트의 주제 등이 변할 때 구분하기 위해 사용.

- 닫는 태그는 없음

<blockquote>

- 글을 인용할 때 사용하는 태그

- 다른 텍스트보다 안에 들여쓰기되므로 구별하기 쉬움.

- 웹 브라우저마다 표시하는 방식이 각기 다름.

<pre>

- 편집기 작성한 소스에 공백이 브라우저에 그대로 표시됨.

- Preformatted Text의 약자.

- 접근성을 고려해봐야 함.

텍스트를 한 줄로 표시하는 태그

<strong> 태그, <b> 태그

- 굵게 강조하여 표시하는 태그

- 두 태그의 차이 : strong : 주의 사항처럼 중요한 내용 강조, b : 키워드처럼 단순히 굵게 표시.

<em> 태그, <i> 태그 

- 이탤릭체로 표시하는 태그 

- 두 태그의 차이 : em : 어떠한 기술적인 용어... i : 언어의 관용구 등

<q>

- 인용 내용 표시하기

- <blockquote>과 다른 점 : <blockquote>는 블록 레벨 태그여서 인용 내용이 줄이 바뀌어 표시되며 다른 내용과 구별되도록 들여쓰기가 적용됨

<q>는 인라인 레벨 태그여서 줄바꿈없이 다른 내용과 함께 한 줄로 표시되며 구별할 수 있도록 따옴표로 표시됨.

<mark>

- 노란색 형광펜으로 그어 놓은 듯한 효과를 냄.

- 예제 :       <mark>형광펜 표시형광펜 표시</mark>

<span>

- 태그 자체로는 아무 의미가 없으나 텍스트 단락 안에서 줄바꿈없이 일부의 특정 부분의 텍스트만을 묶어 스타일을 적용하려고 할 때 주로 사용함.

- <mark>형광펜 표시?형광펜 표시<span style="color:red;">형광펜 표시</span>?</mark>

<ruby> 태그

- 동아시아 글자를 표시하기 위한 태그

- 주석으로 표시할 내용을 <rt>태그로 사용함.

- 처음 봄. 거의 안 사용함.

목록을 생성하는 태그

<ul> 태그

- Unorder list의 약자. 순서가 필요하지 않은 목록을 생성 시 사용.

- <li> 태그를 사용하여 각 항목을 표시함.

- 순서가 정해지지 않았기 때문에 작은 원 또는 작은 사각형같은 불릿이 붙는다.

- 이 불릿은 CSS에서 list-style-type 속성을 이용해서 수정할 수 있다.

<ol> 태그

- Order list의 약자. 순서가 필요한 목록을 생성 시 사용.

- 역시 <li> 태그를 사용하여 각 항목을 표시함.

- 숫자를 다양한 형태로 표기 방법을 변경할 수 있다.

- 순서와 관련된 속성이 몇 가지 존재함.

1. type 속성 : 1(숫자=기본값) 이지만, a  또는 A i,  I 등 여러 형태로 변경이 가능함.

2. start : 시작 숫자를 입력하면 1이 아닌 다른 번호로 시작할 수 있다.

3. reserved : 번호를 역순으로 표기.

<li>를 여러 항목을 사용할때는 닫는 태그 </li>를 생략해도 있는것처럼 인식함.

<li> 항목 밑에 다시 ul이나 ol 태그를 사용하여 중첩할 수도 있다.

<dl>, <dt>, <dd> 태그 

- 설명 목록 만들기

<dl> 태그 : 사전 구성과 같이 제목과 설명이 한 쌍으로 이루어진 설명 목록(Description list)를 만듦.

- 예를 들어 단어/정의 목록, 질문/답 목록 등에서 사용이 가능

<dl>아래에 <dt>와 <dd>를 표시함. dt는 제목을, dd는 설명을 표시함.

- 하나의 dl 안에 dt와 dd가 여러개 있을 수 있음.

테이블(표)을 생성하는 태그

- 자료를 정리할 때 자주 사용.

- 행Row와 열Column으로 이루어저 있으며 행과 열이 만나 이루는 영역을 셀Cell이라 부름.

<table> <tr> <th> <td> 태그 

- 기본적인 표를 만들기 위한 태그

1. table 태그 생성

2. 몇 행을 생성할 것인지 계산해서 tr태그로 생성

3. 그 안에 몇 개의 열이 들어갈 것인지 td로 생성

행 또는 열 합치기

- 셀을 합치는 것이므로 td 또는 th 태그에서 이루어진다.

행row을 합치려 한다면?  rowspan

열column을 합치려 한다면? colspan

<caption> 태그, <figcaption> 태그

- 표에 제목을 붙일 때 새용하는 태그.

- <caption>는 <table>태그 바로 다음에 사용. 표의 가장 위쪽 중앙에 표시되며 다른 태그를 삽입하여 여러 줄로 작성하거나 텍스트를 꾸미는 등 스타일링 가능 

- <figcaption>는 <figure>와 <caption>의 합성어로 <figure>태그로 감싼 뒤 <figcaption>태그를 이용하여 제목이나 설명글을 입력한다.

- 중앙에 정력되지 않으며, 또한 table 시작 태그<table> 위 또는 닫기 태그</table> 아래에 위치 가능.

<thead> tbody tfoot

- HTML5에서 시각 장애인들을 위한 접근성과 관련이 있다.

- 제목이 있고, 본문이 있고, 마지막에 합계나 요약 내용을 표시하는데 주로 사용됨.

<textarea id="txt" rows="0" cols="0">

<?php echo "글을 입력하세요."?>

</textarea>

이렇게 작성을 하면, 깔끔해보이고 좋다. 

하지만, 인터넷 익스플로러에서는 오류가 발생한다.

바로 글 입력 후 키보드에서 손을 떼면 다음 줄로 이동, 다시 누르면 그 다음줄에 글이 입력된다.

즉, 두줄에 한 번만 입력된다. 아래 그림과 같은 형태로 글이 작성된다.(엔터를 누르지 않았음에도..)

ㅁㄴㅇㄹ

ㅁㄴㅇㄹ

ㅁㄴㅇㄹ

ㅁㄴㅇㄹ

ㅁㄴㅇㄹ

ㅁㄴㅇㄹ

<textarea id="txt" rows="0" cols="0"><?php echo "글을 입력하세요."?></textarea>

이렇게 붙여쓰면 오류가 사라지게 된다.

개행뿐만 아니라 커서의 위치가 Textarea 중간에 가있는 현상 역시 위와 같은 문제이다.

따라서, 붙여서 쓰면 문제가 해결된다.

https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=13451

https://okky.kr/article/292680

이 두 사이트에서 답을 찾았다.

검색어는 Textarea 빈값

HTML 문장 안에 인용구가 있을 경우 q 엘리먼트는 사용한다.

쌍따옴표("")로 감싸여져서 보여지지만, 브라우저마다 다르다. (기울임체 또는 들여쓰기 등등...)

어쨋거나 이 태그를 사용하는 것은 좀더 의미를 두기 위해서이다.

<blockquote> 태그 역시 동일하게 인용구를 보여주는 기능을 수행하는데, 차이점은 다음과 같다.

<q> : 짧고 핵심적인 인용구를 작성하는데 적합(즉, 짧은 인용구)

<blockquote> : 완전한 문단을 인용하는데 적합(즉, 긴 인용구)  들여쓰기가 되어 가독성이 높아짐.

<em> : 문구 인용, 단어를 강조하고자 한다면 em 엘리먼트를 사용.

1. 블록 엘리먼트(Block Element)

2. 인라인 엘리먼트(Inline Element)

3. 빈 엘리먼트(Empty Element) : br, img 등등...

블록 엘리먼트

- 독립적이다.

- 시작과 끝이 분명하게 정해져있고, 그 안에 콘텐츠를 갖고 있다.

인라인 엘리먼트는 텍스트의 흐름 내부에 정해진다.

빈 엘리먼트는 <br>이 대표적이다 : 라인 브레이크의 의미만 갖을 뿐 아무런 기능. 의미가 없는 태그

<a href="./content.html" style="font-weight:bold;">A태그입니다</a>

href="./sub01.html" 로 쓰면되지만,

aa 폴더 안에 bb 폴더 안에 존재하는 sub02.html의 경우에는 

href="/bb/sub02.html" 으로 지정해주어야 한다.

반대로 상위(부모) 폴더로의 이동은 즉, sub02.html에서 index.html로 이동하기 위해서는 

href="../index.html" 으로 작성하면 된다.

참고로 .. 은 상위(부모) 폴더로의 이동을 의미하며, / 는 경로의 각 부분을 구분한다.

이것이 바로 상대 경로(Relative Path)이다.

HTML : HyperText Markup Language 

[웹 서버]

- 웹 브라우저의 요청(Request)을 기다리는 하나의 컴퓨터라고 할 수 있다.

- 웹 서버는 브라우저의 요청에 따라 웹 브라우저에게 응답(Response)을 하는 역할을 한다.

- 24시간 쉬지않고 작동해야만 한다.

- 웹 서버는 HTML 파일이나 각종 리소스들을 저장하고 있다.

[웹 브라우저]

- 브라우저에서 어떤 사이트를 열때는, 웹 서버에 해당 HTML 페이지를 요청해야한다.

- HTML은 브라우저에게 웹 페이지의 구조와 내용에 대해 알려준다.

요즘 에디터들은 자동 완성 기능이 훌륭하다.

아톰(Atom) 같은 경우, 확장자를 .html로 하면 HTML로 인식하여 여러 단축키를 사용할 수 있다.

html파일에 html이라 입력을 하게 되면 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>

  </body>

</html>

위 문장 처음부터 끝까지 전체를 엘리먼트(Element)라 부르며, 이 경우 title 엘리먼트로 부름.

<style> 엘리먼트는 HTML 태그 내에 head태그 안에 위치해야 함.

<style type="text/css">

또한 type이라는 속성을 갖음. 이것은 스타일의 종류를 브라우저에게 알리는 역할.

즉, CSS를 사용할 것이므로 위와 같이 작성

속성(Attribute) : 엘리먼트에 대한 추가적인 정보를 제공해주는 것.

CSS란?

HTML이 홈페이지의 구조만을 표현하는데 사용되지만, (홈페이지 구조 설계 = 개발)

CSS는 홈페이지의 스타일을 입히는데 사용됨. (홈페이지 꾸미기 = 디자인에 가까움)

정리

1. HTML과 CSS는 웹 페이지를 만들기 위해 사용하는 언어

2. 웹 서버는 HTML과 CSS로 만들어진 웹 페이지들을 저장하고 서비스를 제공하기 위한 용도.

3. 브라우저는 웹 페이지를 요청하여 HTML과 CSS를 기반으로 콘텐츠를 표현함.

4. HTML은 웹 페이지를 구조화하는데 사용

5. CSS는 Cascading Style Sheet의 약자. HTML의 디자인 스타일을 제어하는데 사용.

6. 엘리먼트는 시작태그, 콘텐츠, 종료태그 세 가지로 구성됨.(예외도 존재 : <img >)

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<textarea style="resize: none;"></textarea>

묻고도 따지지도 않습니다.

크롬에서는 Textarea창을 사용자가 조절할 수 있도록 해줍니다.

하지만, 이러한 기능을 원치 않는다면 위와 같이 스타일을 

추가해줍니다. 그러면 고정이 되는 것을 볼 수 있을 것입니다.

크기 조절을 어떻게 하냐구요?

rows="5" cols="80" 

이렇게~~

rows는 줄 즉 세로의 길이를 지정(몇 줄 쓰고 줄바꿈할꺼냐)

cols는 칸 즉 가로의 길이를 지정(한줄에 몇 자나 쓸꺼냐)

태그내에서는 공백(띄어쓰기)나 줄바꿈 같은 것들은 무시된다.( 한 번은 된다)

그럼 공백을 어떻게 해야 인지를 할까?

줄 바꿈의 경우 <br> 태그를 사용하며,

공백의 경우 &nbsp;  를 입력해주면 된다.

주의할점은 세미클론;을 붙이지 않으면 앞 5글자가 문자열이 되어버려 문자로 출력되게 된다.

너무나 간단하지만, 모르면 헷갈리는 것이다.

중앙에 오게 하기 위해 많이 시도했지만, 개념이 부족하여 실패했다.

검색한 결과, 생각보다 간단했다.

margin:0 auto;

이 코드를 스타일에 넣어주면 그만이다.

여기서 0 auto 는 "0 auto 0 auto" 의 의미라고 할 수 있다..

패딩 또는 마진을 값을 지정할 때, 상하좌우 4가지 방향으로 각각 설정할 수 있다.

순서는 블럭의 상단 --> 우측 --> 하단 --> 좌측이다. 즉, 시계 방향으로 돌아간다고 생각하면 쉽다.

반복되는 값이라면 줄여서 "5px 10px" 이라고 할 수 있다. 이는 5 10 5 10과 같이 2번 반복되는 것이다.

마찮가지로 상하좌우 모두 동일한 값으로 4번 반복된다면 "5px" 하나만 쓰면 된다.

즉, "0 auto" 는 상단과 하단은 여백을 주지 말고, 좌측과 우측의 여백을 자동으로(auto) 주라는 것이다.

이렇게 하면 내용물이 페이지에 중앙에 배치되는 것을 볼 수 있다.