본문 바로가기

HTML15

CSS | 요소(Element)와 클래스(Class)의 차이 ⭕ CSS | 요소(Element)와 클래스(Class)의 차이➡️ 요소 (Element)HTML 요소는 웹 페이지의 구조를 정의하고 의미를 담당합니다. 이러한 요소들은 특정 태그로 표현되며, 웹 브라우저에 어떻게 내용을 표시할지 알려줍니다. , , , p { color: blue;}➡️ 클래스 (Class)클래스는 HTML 요소에 스타일을 적용하기 위해 사용되는 식별자입니다. 클래스는 점(.)으로 시작하며, 하나 이상의 요소에 재사용 가능한 스타일을 정의할 수 있습니다. .menu, .header, .footer.menu { background-color: #333; color: white; padding: 10px;}.header { font-size: 24px; fo.. 2024. 5. 16.

웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 ⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blink 엔진사파리(Safari): Webkit 엔진파이어폭스(Firefox): Gecko 엔진 ➡️ CRP (Critical Rendering Path) ➡️ DOM(Document Object Model) 트리 생성HTML 파싱 후, DOM 트리를 생성합니다.파싱웹 페이지나 앱이 실행될 때, 브라우저의 자바스크립트 엔진 같은 런타임 환경이 이해할 수 있는 형태로 코드를 변환하는 과정을 말합니다.웹 문서를 작은 조각들인 '토큰(token)'으로 분리하고, 문법적인 구조를 가.. 2024. 5. 14.

웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS) ⭕ 웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS) ➡️ HTML: 구조 역할: 웹 페이지의 기본 구조를 제공함 기능: 제목, 문단, 표, 이미지, 동영상 등 페이지의 구조적 요소를 정의함 비유: 얼굴에서 눈, 코, 입과 같은 구체적인 부분을 형성함 ➡️ CSS: 스타일 역할: 웹 페이지의 시각적 스타일을 담당함 기능: 색상, 크기, 폰트, 레이아웃 등을 조정하여 콘텐츠의 시각적인 표현을 정의함 비유: 구조적으로 설정된 눈, 코, 입의 위치와 모양, 색상 등을 정의함 ➡️ JavaScript(JS): 동적 처리 역할: 웹 페이지의 동적 기능을 구현함 기능: 사용자의 입력에 반응하거나, 페이지의 콘텐츠를 실시간으로 변경하고 움직임을 추가함 2024. 4. 22.

웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) ⭕ 웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) 프론트엔드 개발은 웹 개발의 가장 전면적인 부분 HTML, CSS, JavaScript 기술을 활용하여 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 사용자와 상호 작용하게 하는 과정 프론트엔드 개발자는 사용자가 직접 보고 경험하는 웹 페이지의 실질적인 구축을 담당함 ➡️ UI(User Interface) 사용자와 컴퓨터가 정보를 주고받기 위해 사용자와 프로그램이 상호 작용하는 프로그램의 일부분 ➡️ GUI(Graphic User Interface) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 환경 이전까지 사용자 인터페이스는 키보드를 통해 명령어로 작업을 수행하였지만.. 2024. 4. 22.

카카오테크캠퍼스 2기 | 2주차(24-04-15 ~ 24-04-21) 회고 ⭕ 카카오테크캠퍼스 2기 | 2주차(24-04-15 ~ 24-04-21) 회고아직 기초 단계라 큰 어려움은 없었습니다. 하지만 정처기 준비로 바빴기 때문에, 빠르게 진도를 나갈 수 있었으면 좋았을 텐데 아쉬움이 남습니다. 하지만, 목표한 만큼 완수했습니다! ⭐ 빨리 어려움이 생겨 질문을 남겨보고 싶습니다. 채널에 공유되는 자료들은 실무자들에게 한번 더 필터링된 자료로, 큰 도움이 될 것이라고 생각하여 꼭 훑어보려고 합니다. 🍪HTML을 학습하면서 깨달은 중요한 점은, (CSS 개발 전에는) 문서가 시각적으로 예쁘게 보이는 것보다는 구조를 이해하는 것이 훨씬 중요하다는 것입니다. 또한, 자연스럽게 사용자에게 보이는 body 영역에 집중하는 경우가 많지만, head 영역에 있는 내용 역시 중요하므로 이를 .. 2024. 4. 22.

카카오테크캠퍼스 2기 | 1주차(24-04-08 ~ 24-04-14) 회고 ⭕ 카카오테크캠퍼스 2기 | 1주차(24-04-08 ~ 24-04-14) 회고이번 주는 기존 프로젝트를 마무리하느라 바쁜 한 주였습니다. 진도는 많이 나가지 못했지만, 기초를 천천히 짚고 넘어간 것이 나중에 큰 역할을 할 것 같아 흥미롭고, 더 알아보고 싶은 마음이 커집니다. 모든 선택은 내 몫이고, 후회하지 않기 위해서는 당장 눈앞의 일에만 급급해하지 않고, 더 멀리 보며 철저하게 공부해야 할 필요가 있다고 느꼈습니다. 빨리 나아가고 싶은 마음은 크지만, 천천히라도 매일 새로운 것을 배우는 태도로 나아가겠습니다.자바스크립트를 학습하면서, 시작적으로 결과를 확인할 수 없어 어려움을 느끼고 좌절했던 적이 있습니다. 하지만 이는 HTML과 CSS에서의 시각적 요소를 넘어서 기능을 구현하는 자바스크립트로 한 .. 2024. 4. 21.

리액트 네이티브 React Native | JSX와 XML 마크업 언어 ⭕ 리액트 네이티브 React Native | JSX와 XML 마크업 언어 리액트 네이티브(React Native)는 모바일 애플리케이션을 개발하기 위한 프레임워크로, XML 마크업 언어를 사용합니다. XML은 HTML의 부분집합으로, 태그나 속성을 자유롭게 확장할 수 있어 HTML보다 유연한 구조를 가집니다. ➡️ JSX JSX는 리액트 네이티브에서 사용되는 문법으로, JavaScript XML의 약자입니다. JSX는 JavaScript로 XML 형식의 코드를 작성할 수 있게 해줍니다. HTML과 달리 XML은 태그 이름을 자유롭게 정의할 수 있습니다 ➡️ 마크업 언어 문법 마크업 언어의 기본 문법은 시작 태그와 끝 태그로 이루어집니다. 시작 태그는 형식으로 작성하고, 속성을 가질 수 있습니다. 속성은.. 2024. 3. 20.

HTML 태그: 웹 개발의 기본, 태그의 중요성과 활용법 ✅ HTML 태그HTML 문서는 웹 페이지를 작성하기 위한 기본적인 구성 요소인 "태그"를 사용합니다. 태그는 주로 열리는 태그(opening tag)와 닫히는 태그(closing tag)로 구성되며, 닫히는 태그에는 슬래시("/")가 붙어 구분됩니다. 태그는 요소들을 정의하고 웹 페이지의 구조를 형성하며, 중첩하여 사용하여 여러 요소를 묶을 수 있습니다. 💡 W3C(The World Wide Web Consortium): 웹 기술 표준의 중심W3C는 국제적으로 웹 기술을 표준화하는 단체로, HTML 태그의 예제와 정의를 제공하는 공식 홈페이지를 운영합니다. 이 사이트에서는 예제를 통해 태그의 사용법을 시각적으로 이해할 수 있으며, 이론적인 내용을 학습하는 데 도움이 됩니다. 두 가지 학습 방법 모두 .. 2023. 11. 7.

HTML과 퍼블릭 도메인: 웹의 언어 ✅ HTML: HyperText Markup LanguageHTML은 웹페이지를 생성하는 언어로, 웹의 기본 구조를 정의하는 중요한 역할을 합니다. HTM은 "HyperText"와 "Markup Language"의 약자로, 하이퍼텍스트를 생성하고 구조화하는 데 사용됩니다. 하이퍼텍스트는 텍스트, 이미지, 링크 등 다양한 미디어 요소를 포함할 수 있는데, 이를 웹페이지 내에서 연결하고 표현하기 위해 HTML을 사용합니다.HTML 문서는 태그(tag)로 이루어져 있으며, 이 태그들은 컴퓨터와 브라우저에게 웹페이지의 구조와 내용을 설명합니다. 예를 들어, , , , 등의 태그를 사용하여 웹페이지의 제목, 본문, 이미지, 스타일 시트 등을 정의할 수 있습니다. HTML은 웹 개발에서의 기초 중 하나이며, 웹사.. 2023. 11. 7.

스트링부트 | 컨트롤러 Controller ✅ 컨트롤러 Controller 서버에 전달된 클라이언트의 요청(URL과 전달된 파라미터 등)을 처리하는 자바 클래스이다. 웹 애플리케이션에서 사용자가 요청한 URL에 해당하는 컨트롤러가 선택되고, 컨트롤러는 해당 요청을 처리하기 위해 비즈니스 로직(Business Logic)을 호출하고 결과를 클라이언트에 반환한다. Spring MVC에서는 컨트롤러에서 처리한 데이터를 View에 전달하여 HTML 등의 문서를 생성하고 클라이언트에게 전송하는 방식으로 동작한다. 컨트롤러의 역할은 요청을 처리하고 적절한 데이터를 View에 전달하는 것이다. 💡 @Controller 애너테이션 해당 클래스가 Spring MVC에서 컨트롤러로 동작하도록 설정한다. @Controller 애너테이션이 있어야 스프링부트 프레임워크.. 2023. 5. 2.

정보처리기사 정처기 | 실기 4 통합 구현 | 연계 메커니즘 구성, 내외부 연계 모듈 구현 | 단원별 정리 ✅ 핵심 키워드 연계 메커니즘 응용 소프트웨어와 연계 대상 모듈 간의 데이터 연계 시 요구사항을 고려한 연계방법과 주기를 설계하기 위한 흐름이다. 커넥션 풀(Connection Pool) 데이터베이스와 연결된 커넥션을 미리 만들어서 풀(pool) 속에 저장해 두고 필요할 때 커넥션을 풀에서 가져다가 쓰고 다시 풀에 반환하는 기법이다. JDBC, Java Database Connectivity 데이터베이스에서 자료를 조회하거나 업데이트하기 위해서 자바에서 데이터베이스에 접속할 수 있도록 하는 자바 API이다. API, Application Programming Connectivity 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그램 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스이다. 소켓(.. 2023. 3. 8.

웹 구조 WEB | 스타일 시트 CSS, Cascading Style Sheets ✅ 스타일 시트 CSS, Cascading Style Sheets스타일 시트 CSS, Cascading Style Sheets는 웹 페이지의 외관을 표현한다.웹 페이지의 디자인으로써 레이아웃, 텍스트 장식, 배경 등을 표현한다. CSS는 페이지 수가 많은 HTML 파일 코드를 간소화하는 데 유용하다.각 페이지마다 스타일을 정의할 경우 번거롭다. HTML 파일에서 CSS 파일을 참조하는 태그를 사용하여 연결한다. CSS 대신 Bootstrap 프레임워크나 Sass를 이용하기도 한다. 2023. 2. 9.

웹 구조 WEB | HTML, Hyper Text Markup Language | 하이퍼텍스트, 하이퍼링크, 태그 예시 ✅ HTML, Hyper Text Markup Language웹 페이지는 하이퍼텍스트로 작성되고는 하이퍼링크를 사용하여 이동한다. 💡 하이퍼텍스트HTML은 하이퍼텍스트를 기술하기 위한 언어이다.HTML은 태그라는 마크를 사용한다.마크로 문서 구조를 표현하기 때문에 HTML을 마크업 언어로 부른다. 태그 예시a: 하이퍼링크br: 줄 바꿈h: 표제header: 도입부hr: 밑줄img: 이미지 삽입meta: 페이지 설명p: 문장section: 페이지 각각table: 테이블 구조title: 타이틀 HTML로 작성한 페이지의 확장자는 html이나 htm이다. 💡 하이퍼링크 hypertext reference 약자 herf로 부른다. 2023. 2. 9.

웹 구조 WEB | 브라우저 종류 | 요청과 응답의 렌더링 과정 ✅ 브라우저 브라우저는 하이퍼텍스트를 보여준다. HTML로 기술되어 있는 웹 페이지는 웹 사이트를 구성하고 브라우저에서 본다. 브라우저 종류 구글 Chrome 마이크로소프트 Microsoft Edge Internet Explorer 💡 브라우저 렌더링 Rendering Path 브라우저가 요청하고, 응답받는 과정을 렌더링 Rendering Path라고 한다. 요청, 리퀘스트 브라우저는 웹 서버에 요청을 한다. 응답, 리스폰스 웹 서버는 브라우저에 응답을 한다. HTML, CSS, JavaScript가 응답이다. 2023. 2. 8.

웹 구조 WEB | 웹이란 | WWW, 하이퍼텍스트, 하이퍼링크 ✅ 웹 WEB 💡 인터넷 웹은 정말 가까이 있는 존재이다. 웹은 인터넷을 통하여 제공되는 정보나 서비스를 주고받기 위한 구조이다. WWW, World Wide Web은 인터넷을 통하여 제공되는 하이퍼텍스트를 이용한 시스템이다. 💡 링크 웹 사이트를 구성하는 웹 페이지는 링크, 참조 형태로 연결된다. 웹은 하이퍼텍스트와 하이퍼링크 구조가 사용된다. 하이퍼링크 구조는 웹 페이지가 하이퍼텍스트 마크업 랭귀지 HTML 언어로 구성되어 있다. 하이퍼텍스트로 작성된 페이지에 링크를 남기면 다른 페이지로 이동할 수 있다. 기존 시스템에서는 프로그램을 호출하고, 종료하는 구조이지만, 웹 사이트에서는 링크로 이동한다. 2023. 2. 7.

이전 1 다음

티스토리툴바