본문 바로가기

개발/웹 (HTML)10

HTML 자주 사용하는 태그 - <a> 정적 문서(책) 중심의 정보 환경에서 동적인 인터넷 문서로 전환되는 데 핵심적인 역할을 한 기술은 하이퍼링크입니다. 하이퍼링크는 사용자가 특정 텍스트나 이미지를 클릭해 다른 문서로 즉시 이동할 수 있게 함으로써, 정보 간의 경계를 허물고 무한히 연결된 웹 환경을 만들어냈습니다. 이 기술 덕분에 인터넷은 단순한 정보 저장소를 넘어, 전 세계적으로 서로 연결된 거대한 지식 네트워크로 성장할 수 있었습니다. 이 하이퍼 링크 기술을 가능하게 한 기능이, 에이 태그입니다. A (Anchor) - 인라인 요소입니다. - 두 줄로 나줘 입력해도 한 줄에 띄어쓰기로 표시됩니다. 주요 속성 - href : 같은/다른 페이지로 이동하는 하이퍼링크 주소를 지정한다. - target 속성으로 _self : 현재 페이지를 새 .. 2024. 11. 20.
HTML 자주 사용하는 태그 - <ul><ol><li> 예전에는 HTML 페이지를 개발하면 테이블 태그를 많이 사용했는데,요즘은 CSS를 적극 활용하고 목록 태그를 많이 사용한다. UL (Unordered List) - 순서가 필요없는 목록을 표시한다. - 블록 요소이다. 상자처럼 수직으로 쌓인다. - CSS style 사용하여 불릿 변경    disc (기본값): ●    circle: ○    square: ■    none: 불릿 없음 OL (Ordered List) - 목록에 순서를 표시한다. - 블록 요소이다. 상자처럼 수직으로 쌓인다. - type 속성    1: 숫자 (기본값)    A: 대문자 알파벳    a: 소문자 알파벳    I: 대문자 로마 숫자    i: 소문자 로마 숫자 LI (List Item) -  혹은  태그의 자식 요소로 사용.. 2024. 11. 18.
HTML 블록 요소 개념 잡기 HTML이 화면에 출력되는 특성은 두가지 요소로 나눠집니다. 하나는 inline 요소 - 인라인 요소는 하위 수준인 텍스트 및 세부적인 스타일링에 영향을 줍니다.ex)  그리고 block-level 요소- 블록 수준 요소는 상위 수준인 문서 레이아웃에 직접적인 영향을 줍니다.- 블록 수준 요소를 간단히 블록 요소로 부르기도 합니다.ex)  먼저 태그와 요소에 대해서 알아보면, 태그(Tag)는 열림 태그, 닫힘 태그, 빈 태그로 이루어 집니다.ex) ...,  요소(Element)는 태그로 감싸진 콘텐츠를 포함하는 구조를 말합니다.ex) 콘텐츠블록 요소 (Block-level Element)HTML 두 가지 출력 특성 중 하나인,블록 요소는 영역을 다루는데 주로 사용합니다. 상자처럼 수직으로 쌓이며,두 줄.. 2024. 11. 17.
HTML 인라인 요소 개념 잡기 HTML이 화면에 출력되는 특성은 두가지 요소로 나눠집니다. 하나는 inline 요소 ex)  그리고 block 요소 ex)  먼저 태그와 요소에 대해서 알아보면, 태그(Tag)는 열림 태그, 닫힘 태그, 빈 태그로 이루어 집니다.ex) ...,  요소(Element)는 태그로 감싸진 콘텐츠를 포함하는 구조를 말합니다.ex) 콘텐츠인라인 요소HTML 두 가지 출력 특성 중 하나인,인라인 요소는 글자를 다루는데 사용합니다. 글자처럼 수평으로 쌓이며,두 줄로 나누면 한 줄로 띄어쓰기하여 출력됩니다. HTML 입력 브라우저 출력 실제 여백 구조는 span 태그 단위로 되어 있고기본 여백은 글자 크기에 맞게 딱 붙어서 조정됩니다. 스타일을 사용하면 일부 여백 조정이 가능합니다.내부 여백(Padding) : 좌우.. 2024. 11. 16.
코드 가독성을 높이는 HTML 빈 태그와 주석 이야기 HTML 태그 영역 - 문서의 전체 범위를 나타낸다.html>          html> HEAD 태그 영역 - 웹 페이지의 제목, 설명, 외부 파일 연결 등의 보이지 않는 설정 정보를 주로 작성한다.  head>  head>         BODY 태그 영역 - 웹 페이지로 보여지는 로고, 내비게이션, 버튼, 이미지 같은 표현을 작성한다.    body>      body> 빈 태그 - 태그 사이 내용이 없다. - 문법적으로 엄격하던 XHTML 시기에는 빈 태그를 닫아야했다. - HTML5 시대에는 두 방식 다 지원한다. 예를 들어,  - HTML 1, 2, 3, 4, 5 지원Ex)   - XHTML, HTML5 지원Ex)  내용 없이 단독으로 사용하여 빈 태그 닫아주기는 XHTML 시대를 거치면서 나.. 2024. 11. 15.
HTML 기본 구조와 DTD 개념 정리 HTML은 마크업(markup) 언어입니다.마크업 언어는 텍스트에 표시(Markup)를 추가하여 구조나 의미를 설명하는 언어를 말합니다. 마크업 언어 - HTML (HyperText Markup Language)   : 웹 페이지의 구조와 내용을 정의. - XML (eXtensible Markup Language)   : 데이터의 구조를 정의. - Markdown   : 간단한 텍스트 서식 문법. - LaTeX   : 수식이 많은 문서 작성, 학술 논문. - SGML (Standard Generalized Markup Language)   : HTML과 XML의 기반 언어. - YAML (YAML Ain't Markup Language)   : 설정 파일에서 사용되는 언어. - BBCode (Bullet.. 2024. 11. 11.
VSCode 웹 개발 시작하기 - Live Server로 만드는 '니' 첫 번째 웹 페이지 HTML 웹 개발을 진행할 때는 웹 브라우저에서 실시간으로 결과를 확인하며 작업하는 것이 가장 정확합니다.아직 설치하지 않았다면, 이전 글에서 설명한 Live Server 설치 방법을 참고하세요.HTML 초보자를 위한 VSCode 확장 추천간단한 HTML 페이지를 작성해보자.바탕화면에 만든 HTML 폴더를 VSCode에서 'Open Folder' 버튼을 통해 열어줍니다. 첫 번째 새 파일 아이콘을 클릭하여 index.html 파일을 생성합니다. index.html 파일을 선택한 후, 오른쪽 코딩 창에 "Hello World!"를 입력합니다.이후, Ctrl + S를 눌러 저장합니다. 그리고 우측 하단의 'Go Live' 버튼을 클릭합니다.(Live Server 단축키: Alt + L, Alt + O) 웹 .. 2024. 11. 9.
VSCode 언어별 들여쓰기(탭) 지정 - Settings.json 코드 스타일에서 중요한 요소 중 하나는 들여쓰기 규칙입니다. 최근에는 탭 대신 공백을 사용하여 일관된 서식을 유지하는 것이 일반적인 추세입니다. 과거에는 문서 작성 시 기본 탭 크기를 8칸으로 설정했고, 코드에서는 깊이를 줄이기 위해 4칸 들여쓰기를 주로 사용했습니다. 그러나 탭 크기를 줄이면서 줄 맞추기 효과가 줄어들었고, 각기 다른 에디터나 사용자가 설정한 탭 크기에 따라 문서 포맷이 혼란스러워지는 문제가 발생했습니다. 이러한 문제를 해결하기 위해 탭 대신 공백으로 들여쓰기를 처리하는 방식이 도입되었습니다. 특히 HTML과 같이 들여쓰기가 많은 경우에는 탭 크기를 2칸으로 설정해 더 깔끔하게 표현하는 것이 일반적입니다.VSCode 들여쓰기 설정VSCode 설정 파일에는 사용자 모드와 작업 영역 모드 .. 2024. 11. 8.
VSCode 웹 개발 시작하기 - 필수 단축키 모음 VSCode 단축키도 제법 많은데,평소 자주 사용하는 유용한 단축키를 몇 개 소개합니다.특히 마우스를 최대한 안 쓰고 창 사이를 이동하면서 작업하면 코드 집중력이 올라갑니다. 윈도우 : Ctrl맥 : Cmd 에디터창에 커서를 놓고 아래 단축키를 테스트해보세요. 수정한 모든 파일 저장하기.Ctrl + K, S 창 액션사이드바 열기/닫기 (토글)Ctrl + B 현재 창 닫기Ctrl + W 사이드 탐색기 열기/이동 (토글)Ctrl + Shift + E 명령창 열기/닫기 (토글)Ctrl + ` (그레이브 문자 or 빽틱)Ctrl + J 사이드바 주요 메뉴파일 탐색기Ctrl + Shift + E 검색Ctrl + Shift + F 소스 제어 (GIT)Ctrl + Shift + G 디버깅Ctrl + Shift + D.. 2024. 11. 7.