🖥️ [UIUX] 1118 HTML Coding, 코딩 기초 1

✏️ 2024. 11월 18일 / Coding, 코딩 기초 1

📺 코딩 기초 - HTML에 대하여 알아봅시다
✖️

HTML이란 하이퍼 텍스트 즉, 하이퍼 링크를 이용하여 구조를 나타내는 언어인데요.
쉽게 말해서 한국에서 한국어를 사용하듯, 컴퓨터에서도 사용하고 있는 언어가 있습니다.
HTML도 컴퓨터의 언어중 하나인 셈인데요.
📁 하이퍼링크는 다른 페이지를 보여주는 하나의 링크 체계라고 생각하면 됩니다.

📁 마크업은 웹을 만들어내는 구조를 표시하는 것입니다.
즉, HTML은 링크와 뼈대를 만들어주는 역할인 셈입니다.
EX) 여기에는 링크를 두고~, 여기에는 이미지를 두고~.
+ CSS는 웹 내의 모든 디자인 적인 부분을 만드는 언어입니다.

HTML이 업데이트 되면서, 웹 브라우저 뿐만 아니라 다양한 분야에서도 사용되고 있는데요.
요즘 식당에서 자주 보이는 키호스크도 이 HTML를 사용하여 만들었답니다.

🎤 코딩 기초 - HTML, 조금 더 알아봅시다
✖️

HTML은 우선, Tag가 합쳐져서 만들어진 것입니다.
상단의 이미지처럼, Tag가 레고 조각이라면, 이런 조각이 합쳐져 완성된 구조물이 HTML이라고 생각하시면 좋습니다.

💻 코딩 기초 - HTML을 만드는 Tag에 대하여
✖️
Tag는 문서를 이루고 있는 단어라고 합니다.

상단의 이미지 처럼 Tag는 요소라고도 부르는데요.
⭐ tag는 <요소>내용</요소>처럼 <tag의 이름>내용</tag의 이름>으로
앞 뒤가 동일하나, 뒤쪽에는 /가 들어가는 특징이 있습니다.
저희가 문장을 쓸 때에는 말 끝에 마침표를 찍 듯, tag의 마침표는 /가 되는 것이죠.

태그를 시작하는, 태그는 여는 첫태그를 ⭐"열린태그"라고 부르며
열려있는 태그를 닫는 </tag>의 형식을 ⭐"닫힌태그"라고 부릅니다.
태그를 열였다면 반드시 닫는 태그도 있어야 하며,
이러한 태그는 상단의 이미지처럼 태그 안에 또 다른 태그를 넣어 쓸 수 있답니다.
Q.왜 태그를 또 다른 태그에 넣어쓰는 걸까?
A.컨텐츠 안에 다른 컨텐츠를 넣고 등등, 큰 상자 안에 요소를 넣는 동작을 구현하기 위해 태그 안에 태그를 넣어 씁니다.
☀️ 연결태그 - <p>내용</p>
☀️ 단독태그 - <br/> (줄바꿈을 하는 태그 이름)

🖨️ tag의 속성에 대하여 알아봅시다
✖️

📍 inline (인라인 속성) : 마치 밧줄 같은 성질, 상자안에 글을 채우거나 안에 쓰는 줄을 말한다.
태그를 입력하면 가로로 나오며, 태그 사이마다 1칸의 공백이 발생하는 특징을 가지고 있다.
글의 속성을 가지고 있기에 너비나 높이의 값을 가질 수 없다.
📍 block (블록 속성) : 상자 같은 느낌 (집 지을 때 벽돌 같은 역할), 큰 제목을 특징을 가지고 있을 때도 블록 속성을 가진다.
위에서 아래로 출력되는 성질을 가지고 있다.
📍 inline-block (인라인 블록 속성) : 인라인 속성과 블록의 속성이 합쳐진 것, 가로로 출력되나 너비와 높이값을 가질 수 있으며 인라인 속성처럼 사이마다 공백이 1칸씩 생긴다.

🖨️ 코딩 실무 용어에 대하여 알아봅시다
✖️

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)