프론트엔드 HTML, CSS

개발기술/Web Dev

프론트엔드 HTML, CSS

bsh6226 2024. 6. 9. 11:04

<프론트엔드 개발도구>

Visual Stuio Code
- 단축키
  - shit+option+F : 줄정렬
  - ! +enter : boilerplate입력
Chrome 개발자모드(F12/command + option + i/ 오른쪽 마우스 클릭 - 검사)
- 최좌상단 select element in a page to inspect : 원하는 항목의 태그를 검사할 수 있음.
  - 목표한 태그를 찾은 후 오른쪽 클릭시, xpath를 찾을 수 있음.
  - 개발자도구의 콘솔에서 JavaScript를 바로 실행할 수 있음.
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 : HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다.

HTML의 구조

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

- 여는태그와 닫는태그가 함께 중첩대칭구조를 갖음. 마크업(내용)을 인식하기 위해서는 여는태그와 닫는태그가 명확하게 표기되어야 컨텐츠 소스를 표기가가능함.

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

- 콘텐츠가 태그에 포함되어 있는 경우에는, 닫는 태그가 없습니다.

HTML 태그

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

주요 HTML태크

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

Inline Elements:

Behavior:
- Inline elements occupy only the horizontal space needed for their content and sit on the same line with other inline elements.
- They don't force a new line before or after themselves. They can wrap around other inline elements or text.
Examples:
- <b> (bold text) <i> (italic text) <a> (anchor/link) <span> (generic inline container) <img> (image)

lock-Level Elements:

Behavior:
- Block-level elements typically start on a new line and occupy the full available horizontal space (like a block) by default.
- They force a line break before and after themselves, stacking vertically on the page.
- They cannot be placed inline with other elements; they behave like independent containers.
Examples:
- <p> (paragraph) <h1> to <h6> (headings) <div> (generic block container) <ul> (unordered list) <form> (form)

<a> : anchor의 약자로 링크를 생성할때 사용한다.

-target="_blank"는링크를 클릭했을 때 새창에서 페이지가 열리게 하는 속성

- href="http://,,," : 연결할 문서의 주소를 작성하는 링크 속성

- title="tooltipcontents" : 마우스를 올렸을때 생성되는 툴팁

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

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

<h1> to <h6>: 헤드라인 테그. 숫자가 커질수록 크기가 작아진다. These are heading tags, with <h1> being the highest (or most important) level and <h6> the least. They are used to structure the content by defining a hierarchy.

<p>: 단락을 표시하는 태그로 단락 간에 한줄 띄운다. The paragraph tag is used to define blocks of text.

<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:

부모-자식 태그 : 태그가 서로 포함관계에 있을때, 포함하고 있는 태그를 부모태그, 포함된 태그를 자식태그라 칭함

<!DOCTYPE HTML> : 관용적으로 html태그 위에 붙는 내용, 해당 문서가 html이라는 것을 표시함.

<html> : 모든 태그 중 최고위층 태그

<head> : 본문을 설명하는 내용이 들어가는 구분자로 사용됨

- <title>: 브라우저의 제목탭에 제목을 입력한다. 검색엔진이 인식한다는 의미론적 측면에서 중요. Nested within the <head> tag

- <metacharset = "utf-8"> : 본문이 utf-8 방식으로 저장되어 있다는 것을 의미함

<body> : 본문을 묶는 구분자로 사용됨

<ul> : unordered list. <li> 의 부모태그로서 리스트 간의 구분자로 사용됨. <p>와 같이 리스트 간의 한줄 띄우기 지원함

<ol> : ordered list. <ul>과 마찬가지로 <li>의 부모태그로서 리스트간의 구분자로 사용됨. 그러나 order list로 <li> tag를 순번을 매긴 태그로 처리함.

- <li> : <li> representing list items within both types of lists of <ul> and <ol>

<table> : 조부모태그로서 테이블을 생성함

<thead> : table head로서 <tr>과 <th>를 감싸는 역할을 함

<tbody> : table body로서 <tr>과 <td>를 감싸는 역할을 함

- <tr> : table row, <th>와 <td>의 부모태그로서 테이블의 열을 정의함

-- <th> : table header, 테이블의 첫번째 줄로 테이블 컨텐츠의 헤더를 나타냄

-- <td> : table data로 본문에 들어갈 데이터 컨텐츠를 나타냄

예제코드

<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의 메뉴역할을 한다.

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

<br> : 줄바꿈(Line Break)으로 <p>와 외형적으로는 유사하나 시멘틱하지는 못함.

<img>: 이미지를 추가하는 태그

<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와 같은 타입의 입력칸 크기 조절

속성 : Attributes provide additional information about HTML elements and are always specified in the opening tag.

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

- src : 여기서, src는 속성이며 "https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png"는 속성의 값이다. 이미지파일의 출처를 지칭하며, 인터넷의 이미지를 연결시켜도 되고, 로컬에서 html파일과 동일한 폴더 내의 파일명을 작성하여도 된다. (<img src="coding.jpg">)

- width : 이미지의 사이즈를 조절해주는 속성

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

ex) <h2 styl="background-color: coral; color: powderblue;">

<CSS>

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

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

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

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

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

HTML 관련 태그와 속성

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

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

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

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

HTML 관련 태그의 속성

Table CSS property

<table > - border-collapse : defines whether table borders should collapse into a single border or be separated as in standard HTML. only applicable to table tag
<table,th,td> - border : 이 속성값까지 설정해줘야 테이블의 줄이 생성됨.
<th,td> - textalignment : 가운데 혹은 한쪽 정렬
<th,td> - table padding : control the space between the border and the content in a table
<th,td> - color : set font color
<th,td> - background-color : For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:
- tr:hover {background-color: coral;} : Use the :hover selector on <tr> to highlight table rows on mouse over:
- tr:nth-child(even) {background-color: #f2f2f2;} : use the nth-child() selector and add a background-color to all even (or odd) table rows:

</table>

table {border-collapse: collapse; }

th, td {border: 1px solid black; }

font-weight: normal; bold;

선택자

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

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

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