Andamiro_Modeling

[ Web & Mark UP ] HTML 입력 양식들. - [1] ◆ 폼 구성하기.      - 폼(Form)이란         HTML에서 유저와 상호작용해서 정보를 입력 받고 서버로 전송하기 위한 양식을 의미합니다.👉 SSR에서는 일반적으로 form 제출과 같은 HTML 기반의 동작을 필요로 할 때 태그를 사용하는 것이 좋습니다.CSR과 SPA의 기반으로하는 리액트와 같은 모던 프론드엔드에서는 태그를 사용하지 않고도 폼 데이터를 처리 할 수 있습니다.   ∇ form 태그         - form 태그는 action과 method 속성을 함께 사용합니다.         □ action 속성.            - action 속성에는 폼 요소에서                "사용자와 상호작용으..

[ Web & MarkUP ] CSS 선택자들.   ∇ CSS의 선택자들.목 차1. 전체 선택자2. 태그 선택자3. 클래스 선택자4. 아이디 선택자5. 기본 속성 선택자6. 조합 선택자 사용하기.7. 가상 요소 선택자 사용하기8. 가상 클래스 선택자 사용하기9. 다양한 선택자 조합하기10. 속성 선택자11. 복습    CSS 문법은 크게 선택자와 선언부로 구성이 됩니다. 그 중 선택자는 CSS를 적용할 태그(요소)를 지정하는 문법적인 영역이며 CSS는 선택자를 지정하는 다양한 방법들을 제공합니다.   1. 전체 선택자.      : 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를         한 번에 선택자로 지정하는 방법으로    * 기호를 사용합니다.* { color: red; }  ..

[ Web & Mark UP ]   HTML 필수 태그 정리해보기 - [ 2 ]    ∇ HTML 필수 태그 - [2]목 차1. 표 만들기2. 멀티미디어 설정하기    ∇ 표 (table) 만들기.    ※ 표란, 행과 열 그리고 셀로 이루어진 것.  ◆ table 태그.      : 표의 시작과 끝을 알려주는 과 태그를 표시하고,          그 사이에 표와 관련된 태그를 모두 넣습니다.   ◆ caption 태그.      : 표를 생성할 때 '웹 접근성을 향상하는 방법의 하나로 표 제목을 지정' 합니다.           표 제목은 caption 태그로 지정하므로, 표를 만들 때는 반드시 caption 태그를 사용해야 합니다. 표 제목출처: https://cut-eyebrow.tistory...

[ Web & Mark UP ] CSS 문법 정리   ∑  CSS 문법 정리.목 차1. 표현 방법2. 선택자 (Selector)3. CSS 속성 값들4. CSS 속성 전환    1. CSS 표현 방법.           전 글에서도 언급했듯이,  CSS에는 여러가지 표현 방법들이 있습니다.            이 방법들의 공통점은         - 소스 내에 style 태그로 직접 코딩하는 방법          - import하는 방법 : style 태그 내에 파일 링크를 걸어서 파일의 내용을 가져올 때 사용         - 링크는 다른 곳에 위치한 파일을 가져올 때 사용합니다.                  다른 웹서버상에 있는 CSS를 가져오는 경우에 유용합니다.    2. CSS 선택자 (..

[ Web & Mark UP ] CSS 기본 정리.   ∇ CSS 기본 정리.목 차1. CSS 문법 형식2. CSS 적용하기3. CSS 주요 문법 요약 ※ CSS의 기본 사항.        - CSS는 HTML과 함께 웹 표준의 기본 개념입니다.             ( 추후에 스타일컴포넌트, 테일윈드 등의 프레임워크로 변형 가능하기에 기본 개념을 숙지해야함.)         - HTML이 텍스트, 이미지, 표 같은 요소를 웹 문서에 넣어서 뼈대를 만드는 역할을 한다면,            CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소들을 활용해 디자인을 담당 합니다.            ⊙ 초창기 HTML은 style 속성을 통해서 태그를 꾸밀 수 있었습니다.            하지..

[ Web & Mark UP ]   HTML 필수 태그 정리해보기 - [1]  ∇ HTML 필수 태그 - [1]목 차1. 텍스트 작성하기.2. 텍스트 서식3. 주석4. HTML 공간 분할5. HTML 요소의 타입.6. HTML 리스트태그7. 링크와 이미지 넣기8. 텍스트 강조하기   1. 텍스트 작성하기.      ☆ 제목 ( Heading )            - HTML은 제목을 표현할 수 있는 다양한 크기의  태그를 제공합니다.            - 가장 큰 크기의 태그부터 가장 작은 태그까지 다양한 크기로 제목을 표현 가능합니다. 제목1의 크기입니다!제목2의 크기입니다!제목3의 크기입니다!제목4의 크기입니다!제목5의 크기입니다!제목6의 크기입니다!         대부분 브라우저상에서는 종..

[ Web & Mark UP ] HTML 기초 문법 미리보기.   ∇ HTML 문법 간략하게 정리.  이전 글에서 말했듯이,     HTML은 명령어 태그와 속성 그리고 값으로 구성되어져있습니다.    태그는 로 둘러싸여져 있고, 끝에는 형태로 닫아줘야 합니다.    처음과 끝에 구성되는 태그를 요소(element)라고 하고 이러한 요소들을 이용하여 웹 문서를 작성하는 것을   마크업(MARK UP)이라고 합니다. Hello World!      요소는 요소안에 또 다른 요소를 추가할 수 있지만,           닫는 것을 순서대로 닫아줘야 합니다.    요소의 유형은 블럭과 인라인으로 나뉩니다.     블럭은 줄바꿈이 가능 /  인라인은 줄바꿈이 불가능 합니다.              ..

[ Web & MarkUp ] "HTML" 작성을 위한 기본 요소.   ∇ HTML의 기본 구성 요소들.목 차1. 태그 & 속성 & 문법 & 주석2. HTML의 기본 구조3. DTD와 html,head,body4. HTML의 특징 파악하기        1. 태그 & 속성 & 문법 & 주석.                        ∇ 태그.                  - 웹 페이지를 구성하는 요소로는 텍스트*이미지*버튼 등 매우 다양하게 존재합니다.                   - 태그는 이런 다양한 구성 요소들을 정의하는 역할을 하며,                          " HTML 문서를 다루는 가장 작은 단위 " 입니다.                                  ..

[ Web & MarkUp ] DOM ( Document object Model ) 완벽 정복하기.  ∇ DOM ( Document Object Model ) 구조목 차1. 웹 페이지가 만들어지는 방법 1-1 Critical Rendering Path 1-2 렌더트리2. DOM ( Document Object Model ) 2-1 DOM의 생성 방식 2-2 DOM과 HTML의 차이점 2-3 DOM은 브라우저에서 보이는 것이 아닙니다. 2-4 DOM은 개발도구에서 보이는 것이 아닙니다.3. CSS 선택기를 사용하여 DOM 요소를 선택하는 방법4. DOM Elements 제어 방법5. DOM Events6. 요약   우선적으로 DOM이라는 것을 이해하기 위해서는 웹 페이지의..

[ Web & Mark UP ]  브라우저 환경과 렌더링 엔진의 동작 원리.  ∇ 브라우저와 렌더링 엔진 동작 원리 정리목 차1. 브라우저의 정의2. 브라우저의 구성 요소3. 렌더링 엔진의 동작 원리.    ∇ 브라우저.       1 ) 브라우저란 ?                                " 브라우저" 란 WWW(월드 와이드 웹)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어 입니다.                       브라우저는 인터넷에서 특정 정보로 이동할 수 있는 "주소 입력창 (=인터페이스)" 이 있고,                         서버와 HTTP로 정보를 주고 받을 수 있는 "네트워크 모듈"도 포함하고 있습니다.                      ..