HTML, CSS

<마크업언어 사용툴>

Visual Studio
- html파일 보일러플레이트 : ! 입력후 엔터
html실습 : https://codepen.io/pen?editors=1000
- 코드펜을 사용하여 html 입력창에 !tab을 입력시 boilerplate자동 입력

html에 대해서 자세히 설명 https://developer.mozilla.org/en-US/docs/Web/HTML

마크업언어 Introduction

1. 마크업언어 : 태그 등을 이용하여 문서나 데이터 구조를 명기하는 언어의 한가지임. 웹페이지는 결국 문서의 일종이며 문서의 구조를 컴퓨터가 이해하도록 태그로 작성하는 것임. 현업에서 실질적으로 마크업 언어라함은 웹 페이지의 뼈대를 만드는 HTML과 화면 디자인을 코드로 나타내는 CSS 개발을 의미함. 그리고 이와는 별개로 페이지의 동작을 만들어내는 것은 Javascript가 그 역할을 시행함. 웹에서는 결과를 웹 페이지, 웹페이지가 모여있으면 웹사이트라고 합니다. 동적 기능이 추가되면 웹 어플리케이션이라고 합니다.

2. 마크업 개발의 중요한 이유 : 서비스 개발의 단계는, 기획 ➡ 디자인 ➡ 마크업 ➡ FE / BE ➡ QA ➡릴리즈로 구성되는데, 여기서 디자인과 기술적 개발의 틀을 잡는 역할을 함. 디자인 관리를 위해서 디자인 시스템을 사용하는데, 이를 잘 유지하기 위해서는 마크업의 역할이 가장 중요함. (html 구조를 잘 잡는것, css기능을 잘 모듈화하는 것)

3. 시맨틱 마크업 : 단순히 출력결과만을 중시하는 것이 아니라 tag가 가독성이 좋도록 하는 마크업 방식. 시맨틱 HTML은 주어진 목적을 위해 요소를 사용하기 때문에 개발자와 기계(검색엔진)가 읽고 이해하기가 더 쉽습니다.

- 이때문에 HTML에서 디자인적인 <font>와 같은 tag를 사용 및 추가개발하는 것이 아니라 별도로 CSS라는 언어를 개발도입한 것. HTML은 문서의 구조적 의미를 전달하는 시맨틱한 언어로 남겨두고 별도의 언어로 다른 역할을 맡게하는 것.

- HTML 문서는 웹브라우저의 String Parsing을 통해서 정보를 전달하기 때문에 attribute value도 모든 타입이 ""처럼 string으로 input 되어야함.

HTML

HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 구성하는 가장 기본적인 언어로, 웹 문서의 구조와 내용을 정의하는 데 사용됩니다. HTML은 웹의 기본 골격을 제공하며, CSS와 JavaScript와 결합하여 웹 페이지를 구성하는 3대 요소 중 하나로 자리 잡고 있습니다.

HTML의 구조

1. 중첩 대칭 구조

HTML 문서는 태그를 이용해 작성되며, 여는 태그(Opening Tag), 닫는 태그(Closing Tag), 그리고 **내용(Content)**으로 구성됩니다. 태그는 대개 중첩 대칭 구조를 가지며, 명확하게 작성해야 브라우저에서 올바르게 인식됩니다.

<div>(여는태그)<p>마크업(내용)</p></div>(닫는태그)

2. 닫는 태그가 없는 경우

일부 HTML 태그는 콘텐츠 자체를 포함하지 않으므로 닫는 태그가 필요하지 않습니다. 이를 **빈 태그(Self-Closing Tag)**라고 부릅니다.

<img src=”이미지주소" width=”300” height=”100”> , <input type=”text” placeholder=”입력하세요">

3. HTML 속성 (Attributes)

속성 : HTML 태그에 추가 정보를 제공하거나 특정 동작을 정의하는 데 사용됩니다. 속성은 태그의 시작 부분에 작성되며, key="value" 형식으로 사용됩니다.
- id : 요소를 고유하게 식별하기 위한 속성.
- class : 하나 이상의 CSS 스타일 또는 JavaScript 동작을 적용하기 위해 사용.
- style : CSS 스타일을 인라인으로 직접 적용
- title : 요소에 대한 추가 설명을 제공하며, 마우스를 올리면 툴팁으로 표시됨.
- hidden : 요소를 숨김. 화면에 표시되지 않지만 DOM에는 남아 있음.
- data : 요소에 사용자 정의 데이터를 저장
- src : 이미지파일의 출처를 지칭하며, 인터넷의 이미지를 연결시켜도 되고, 로컬에서 html파일과 동일한 폴더 내의 파일명을 작성하여도 된다. (<img src="coding.jpg">)
- width : 이미지의 사이즈를 조절해주는 속성

<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png" width="100%">

3.1 HTML 이벤트 핸들러 속성
HTML에서는 특정 이벤트가 발생했을 때 JavaScript 코드를 실행할 수 있도록 이벤트 핸들러 속성을 제공

문서 이벤트 :
- <body onload="alert('페이지가 로드되었습니다!')">
- onload는 페이지 전체(<body>), 이미지(<img>), iframe 같은 요소가 완전히 로드될 때만 실행되도록 설계되어 텍스트 일반요소는 사용불가.
마우스 이벤트 (Mouse Events)
키보드 이벤트 (Keyboard Events)
폼(Form) 이벤트

4. HTML 공간

인라인 요소 (Inline Elements)

인라인 요소는 자기 콘텐츠의 크기만큼의 가로 공간만 차지합니다. 다른 인라인 요소나 텍스트와 같은 줄에 위치할 수 있습니다.
인라인 요소는 다음 줄로 넘어가지 않고, 현재 줄에서 다른 요소들과 함께 위치합니다.
예시: <b> (bold text) <i> (italic text) <a> (anchor/link) <span> (generic inline container) <img> (image)

블록 요소 (Block-Level Elements)

블록 요소는 자체적으로 하나의 독립적인 영역을 만듭니다. 따라서, 같은 줄에 다른 요소가 올 수 없습니다.
요소 앞뒤로 **줄바꿈(Line Break)**이 강제되어 페이지에서 수직으로 쌓입니다.
예시 : <p> (paragraph) <h1> to <h6> (headings) <div> (generic block container) <ul> (unordered list) <form> (form)

HTML 태그종류

An HTML tag is a basic unit used to define the structure and content of web pages

주요 HTML태크

- 붉은 색으로 표기한 자주 사용하는 html 태그만 알아두면 상관없음.

헤드섹션 주요 태그

<!DOCTYPE HTML> : 관용적으로 html태그 위에 붙는 내용, 해당 문서가 html이라는 것을 표시함.
<html></html> : 모든 태그 중 최고위층 태그
<head></head> : 본문을 설명하는 내용이 들어가는 구분자로 사용됨
<title></title> : 브라우저의 제목탭에 제목을 입력한다. 검색엔진이 인식한다는 의미론적 측면에서 중요.
<metacharset = "utf-8"> : 본문이 utf-8 방식으로 저장되어 있다는 것을 의미함
<link> : 문서와 외부 리소스 간의 관계를 정의하는 데 사용됩니다. 주로 **스타일시트(CSS)**를 연결하거나, 아이콘을 설정하는 데 사용됩니다.
- 문서가 렌더링되기 전에 브라우저가 외부 리소스를 불러오도록 설계되었기때문에 head 영역에 위치
- rel 속성: 링크가 대상과 맺는 관계를 표준값으로 정의 (표준값 외 무시 ; CSS : "stylesheet", 아이콘 : "icon", 등)
- href 속성: 연결할 외부 리소스의 경로를 지정하여 "연결"하는 방식

빈번사용 Html 태그

<a> : anchor의 약자로 링크를 생성할때 사용한다.
- -target="_blank"는링크를 클릭했을 때 새창에서 페이지가 열리게 하는 속성
- - href="http://,,," : 연결할 문서의 주소를 작성하는 링크 속성
- - title="tooltipcontents" : 마우스를 올렸을때 생성되는 툴팁
<script> : 동작시킬 JavaScript Code를 입력하는 태그로 렌더링 오류방지를 위해서 body 섹션 맨뒤에 위치함
- src: 리소스를 가져와 문서에 "삽입"하는 개념
<style> : 태그 내에 들어가는 코드가 CSS임을 표시한다.
<div> : CSS나 JavaScript의 적용대상을 선택하기 위한 어떤 기능이나 의미가 없는 태그, 줄바꿈이됨
- <span> :CSS나 JavaScript의 적용대상을 선택하기 위한 어떤 기능이나 의미가 없는 태그, 줄바꿈이 안됨
<h1> to <h6>: 헤드라인 테그. 숫자가 커질수록 크기가 작아진다.
<p>: 단락을 표시하는 태그로 단락 간에 한줄 띄운다.
<label> : <label> tag is used to define a label for several input element types such as text, radio, checkbox, and others.
- - Explicit Association: This involves using the for attribute in the <label> tag and the id attribute in the <input> tag. The value of the for attribute must match the id of the input element:
<input> : 사용자의 입력을 받기위한 개체를 입력하며, 속성값인 type에 따라 다양한 모습을 띈다
- ex : <input type="text" name="firstname" value="John">
- type
  - text: Plain text input.
  - password: Masks input for privacy.
  - checkbox: Allows selection of multiple options.
  - radio: Allows selection of a single option from multiple choices.
  - submit: Sends form data to a server.
  - file: Allows file selection for uploading.
  - hidden : used to store and transmit information that users cannot see
  - Many others like email, date, color, range, etc.
- attribute :
  - name: The name of the input, which is sent along with the data when the form is submitted.
  - value: The initial value of the input field or the value sent to the server on form submission.
  - placeholder: Provides a hint about what sort of information is expected in the input.
  - required: If present, the field must be filled out before the form can be submitted.
  - autocomplete: Specifies if the value of the control can be automatically completed by the browser.
  - readonly: Makes the input field non-editable, though the value can still be sent with a form submission.
  - disabled: Disables the input field so that it cannot be interacted with and its value is not submitted.
  - onClickOrOtherAction = "액션에 따라서 동작을 시킬 JavaScriptCode"
  - size : text와 같은 타입의 입력칸 크기 조절
<button> : 기본적으로 클릭 이벤트를 통해 사용자가 특정 작업을 실행할 수 있도록 하는 요소입니다.
- Type :버튼의 동작을 정의하는 속성입니다.
  - button: 버튼을 클릭해도 아무 동작도 하지 않습니다. JavaScript 이벤트와 함께 사용됩니다.
  - submit: 폼 데이터를 제출합니다. 폼의 기본 제출 동작과 연결됩니다.
  - reset: 폼의 입력값을 초기화합니다.
- name, value : 서버로 전송될 때 폼 데이터의 이름과 값을 설정합니다.

부모-자식 태그 :

HTML 태그가 포함 관계를 가질 때, 포함하는 태그를 부모 태그, 포함된 태그를 자식 태그라고 합니다.

<body>
- HTML 문서의 본문을 묶는 태그. 화면에 표시되는 모든 콘텐츠를 포함.
리스트 태그
- <ul> : **unordered list (순서 없는 리스트)**를 생성.
  - <li> 의 부모태그로서 리스트 간의 구분자로 사용됨. 리스트 항목은 점(•)으로 표시.
- <ol> : *ordered list (순서 있는 리스트)**를 생성.
  - <ul>과 마찬가지로 <li>의 부모태그로서 리스트간의 구분자로 사용됨. 리스트 항목은 숫자 또는 알파벳으로 순번 매김.
- <li> : <ul> 또는 <ol>의 자식 태그로, 리스트의 각 항목을 정의.

<ol>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
</ol>

테이블 태그
- <table> : 테이블을 생성하는 최상위 태그 (조부모 태그).
- <thead> : 테이블의 머리글을 감싸며, <tr>과 <th>를 포함.
- <tbody> : 테이블의 본문을 감싸며, <tr>과 <td>를 포함.
- <tr> : 테이블의 **행(row)**을 정의. <th>와 <td>의 부모태그로서 테이블의 열을 정의함
- <th> : 테이블의 머리글 셀을 정의. 테이블의 첫번째 줄로 테이블 컨텐츠의 헤더를 나타냄
- <td> :테이블의 데이터 셀을 정의. 테이블 본문 데이터.

<style>
    table {
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
    }
</style>

<table>
    <thead>
        <tr>
            <th>번호</th>
            <th>과목</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><a href="1.html">HTML</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td><a href="2.html">CSS</a></td>
        </tr>
    </tbody>
</table>

<select> : <option> tag의 부모태그로서 dropdown box를 구현한다. dropdown을 클릭하면 option들이 선택지로 입력된다.
- - name: The name of the element, used to reference form data after it's submitted. select와 option에서는 select의 name tag가 parameter variable로 들어간다.
- - <option value = "value1">value1</option> : select의 자식태그로 dropdown의 메뉴역할을 한다.
<footer> : 웹 페이지나 섹션의 하단(꼬리말)을 나타내는 HTML 태그입니다. 주로 저작권 정보, 연락처, 사이트 맵, 소셜 미디어 링크 등을 포함하는 데 사용됩니다.<script> 태그는 일반적으로 <footer>에 배치하는 것

닫지않는 태그 : 태그사이에 들어갈 컨텐츠가 없기에 별도로 닫지않는 태그

<br> : 줄바꿈(Line Break)으로 <p>와 외형적으로는 유사하나 시멘틱하지는 못함.
<img>: 이미지를 추가하는 태그

CSS

HTML이 문서의 의미론적 구조와 내용을 표현한다면 CSS는 문서의 시각적 디자인을 담당한다.

CSS표현방식은 HTML에 세 가지 주요 방식으로 적용할 수 있다.

1.외부 스타일 시트 - .css 확장자를 가진 별도의 파일에 모든 CSS 규칙을 포함합니다.
- 이 파일은 HTML 문서의 <head> 섹션 내에서 <link rel="stylesheet" href="fileName.css"> 태그를 사용하여 링크됩니다.

<link rel="stylesheet" href="styles.css">

2.내부 스타일 시트 - HTML 문서의 <head> 섹션 내에 <style> </style>태그를 사용하여 정의됩니다.
- 적용대상의 html tag {css속성:속성값}'으로 구성

<style>
p {
  color: blue;
  font-size: 16px;
}
</style>

3. 인라인 스타일 - HTML 요소 내의 style 속성을 사용하여 직접 적용됩니다.
- <tag style="css속성:속성값">

<p style="color: red; font-size: 14px;">인라인 스타일 예제</p>

CSS 관련 HTML 태그와 속성

<div> : CSS나 JavaScript의 적용대상을 선택하기 위한 어떤 기능이나 의미가 없는 태그, 줄바꿈이됨

<span> :CSS나 JavaScript의 적용대상을 선택하기 위한 어떤 기능이나 의미가 없는 태그, 줄바꿈이 안됨

- style : CSS를 입력값으로 받는 속성으로, 속성이 들어가는 태그에 CSS를 적용시킨다.

-- <div style="color:black">

선택자

일반적인 태그를 선택하고자하면 'tagname', 클래스를 선택하고자하면'.classname' id를 선택하고자하면 '#idname'

class와 id는 html의 attribute으로써, 설정이 가능하다. 클래스 그룹으로 묶고자할때는 class의 속성을 활용, 개별자로 구분하고자하려면 id를 사용한다.

- ex : <div class="city"> <span id="city">

CSS 관련 HTML 태그의 속성

일반속성

텍스트 스타일 관련 속성
- color : 글자 색상
- font-size : 글자크기
- font-weight : 글자두께
- text-align : 텍스트 정렬
레이아웃 관련 속성
- display : 블록/인라인 전환 ;
  - "block" : 한 줄을 전부 차지함 (줄 바꿈 발생, 다음 요소가 자동으로 아래로 내려감)
  - "inline" : 콘텐츠 크기만큼만 차지함 (줄 바꿈 없음)
  - "inline-block" : 인라인처럼 한 줄에 배치되지만, 블록처럼 width, height, margin, padding 조절 가능
- position : 요소 위치 지정
- margin : 바깥여백
- padding : 안쪽여백
- width : 가로크기지정
- height : 세로크기지정

태그별 특별속성

<table>
- border-collapse : 테이블의 테두리를 하나로 합칠지(collapse) 따로 둘지(separate, 기본값) 설정
- border : 테이블, th, td의 줄을 생성하려면 반드시 설정해야 함
<th,td>
- text-align : 셀 안의 텍스트 정렬 (left, center, right)
- padding : 셀 안의 내용과 테두리 사이의 간격 설정
- color : 글자 색상 설정
- background-color : 셀의 배경색 설정
<tr>
- :hover : 마우스를 올리면 행에 배경색 추가
- nth-child(even) : 짝수 번째 행에 스타일 적용
- nth-child(odd) : 홀수 번째 행에 스타일 적용

'개발기술 > 프론트엔드' 카테고리의 다른 글

백엔드 개발자와 프론트 엔드 이해도 (0)	2025.02.12
Java, Javascript, Python 비교 (1)	2025.01.14
DOM (0)	2025.01.09
자바스크립트 Browser API (0)	2024.07.08
톰캣 설치를 통한 JSP 사용법 (0)	2024.07.01

생각정리, 개발정리

HTML, CSS

<마크업언어 사용툴>

마크업언어 Introduction

HTML

HTML의 구조

HTML 태그종류

헤드섹션 주요 태그

빈번사용 Html 태그

부모-자식 태그 :

닫지않는 태그 : 태그사이에 들어갈 컨텐츠가 없기에 별도로 닫지않는 태그

CSS

선택자

'개발기술 > 프론트엔드' 카테고리의 다른 글

티스토리툴바

HTML, CSS

<마크업언어 사용툴>

마크업언어 Introduction

HTML

HTML의 구조

HTML 태그종류

헤드섹션 주요 태그

빈번사용 Html 태그

부모-자식 태그 :

닫지않는 태그 : 태그사이에 들어갈 컨텐츠가 없기에 별도로 닫지않는 태그

CSS

선택자

'개발기술 > 프론트엔드' 카테고리의 다른 글

'개발기술/프론트엔드' Related Articles

티스토리툴바

HTML 태그종류