본문 바로가기

개발/웹 (HTML)14

HTML, CSS, Javascript 바닐라 웹 페이지 이해하기 바닐라란?바닐라 웹 개발은 프레임워크나 라이브러리 없이 HTML, CSS, JavaScript만으로 웹 페이지를 구축하는 방식입니다. 이러한 방식은 브라우저에서 직접 실행 가능하며, 별도의 빌드 도구가 필요하지 않습니다. 순수한 웹 기술만을 활용해 가장 경량화된 형태의 웹 페이지를 제작할 수 있습니다. 프레임워크? - Vue, Nuxt - React, Next - Svelte, SvelteKit - Angular - Laptos 바닐라 웹 페이지 구성HTML (HyperText Markup Language) - 웹 페이지의 구조를 만듭니다. - 태그를 사용하여 텍스트, 이미지, 링크 등을 작성합니다. CSS (Cascading Style Sheets) - HTML 웹 페이지의 디자인을 담당합니다. - 색.. 2024. 11. 25.
HTML 자주 사용하는 태그 - <label> 비교적 간단한 기능의 태그입니다.label 요소는 대상 태그의 id를 for 속성으로 지정하여 사용하면, 레이블 클릭 시 해당 태그가 동작하도록 범위를 확장할 수 있습니다. 예를 들어, 체크박스의 레이블을 클릭해도 체크박스가 선택되게 할 수 있습니다. label - 인라인 요소입니다. - input 요소의 제목을 입력할 때 사용합니다.  주요 속성 - for : 대상 태그의 id를 지정하여 레이블을 클릭하면 같은 동작 영역으로 작동하게 합니다. 동의 체크 버튼을 만들 때도 사용합니다. 2024. 11. 24.
HTML 자주 사용하는 태그 - <input> input 태그는 사용자로부터 데이터를 입력받기 위해 사용하는 요소입니다. 특히 폼 요소와 함께 자주 사용하며 다양한 입력 타입을 제공합니다. 텍스트, 숫자, 이메일, 비밀번호 등.여러 속성을 제공하므로, 전체적인 흐름을 파악한 후 실제 웹 사이트 개발 과정에서 자세히 익혀가는 것이 좋습니다.input - 인라인 요소입니다. - 텍스트 입력 창으로 사용합니다. 주요 속성 - value : 입력창에 미리 값을 입력할 수 있습니다.  - placeholder : 사용자가 입력할 값의 힌트를 입력창에 연하게 표시합니다.  - disabled : 입력창 비활성화  - type : 입력 필드의 유형   > text : 일반 텍스트 입력 창   > password : 비밀번호 입력 (문자가 가려짐)   > emai.. 2024. 11. 22.
HTML 자주 사용하는 태그 - <span> span - 인라인 요소입니다. - 특정 글자만 묶어서 속성을 지정합니다. 나중에 CSS에 대하여 자세히 다루겠지만,우선 span 태그로 글자를 묶어서 속성을 지정해보자.head 태그에 span 태그용 스타일로 글자색을 입력한다. 본문 내용은 body 태그에 동요 반달을 입력하고span 태그로 그 중 일부 글자색을 변경한다. 웹 브라우저로 결과를 보면,  [참고]한자 : 등대(燈臺) : 줄바꿈 태그, 인라인 요소로 분류하지만 다른 기능이 없다. 반달에서 나온 ㅉ(쌍지읏) 부분은 원래 ㅅㅈ(시옷지읏)으로 되어 있다.조합형이 아닌 현재의 한글 유니코드로는 표현할 수 없다. 전체 HTML 코드 반달 푸른한울 은하물 하얀쪽배에 계수나무 한나무 톡긔한머리 돗대도 아.. 2024. 11. 21.
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.

티스토리툴바