728x90
반응형

Web development 6

[웹개발] HTML 기본 문법 총정리

HTML이란? HTML (HyperText Markup Language)은 웹 페이지의 구조와 내용을 명기하는 마크업 언어이다. 마크업 언어는 문서를 인간과 기계가 읽을 수 있는 형식으로 인코딩하기 위한 규칙을 정의한다. HTML은 텍스트 서식 지정, 하이퍼링크 생성, 멀티미디어 삽입 및 헤딩, 문단, 목록과 같은 명확한 구역으로 콘텐츠를 구성하는 데 사용되는 다양한 태그를 사용한다. 아래 위키백과 마크업 언어 페이지를 예로 들었을 때 '마크업 언어'를 굵게 표시하거나 '태그'에 링크를 삽입하거나 '종류'를 제목으로 쓰는 방법 등 텍스트를 구조화하고 꾸며 더 효과적으로 전달할 수 있다. 태그 Tag 태그는 웹 페이지를 형식화하고 표시하는 방법을 정의하는 웹 브라우저의 핵심 요소이다. 괄호 로 표시하며 일..

Web development 2023.08.01

GA4 시작하기: 구글 애널리틱스 4 설정하기 (계정 구조, 계정/속성 생성, 데이터 스트림 추가하기)

구글 애널리틱스란? 구글 애널리틱스 4(GA4)는 구글 마케팅 플랫폼 브랜드 내에서 웹사이트 트래픽을 추적하고 보고하는 웹 애널리틱스 서비스입니다. 이 도구는 웹사이트 방문자의 데이터를 수집하여 분석함으로써 온라인 비즈니스의 성과를 측정하고 개선하는 데 사용됩니다. GA4는 웹과 앱을 통합하여 사용자 경험을 전체적으로 파악할 수 있게 해 줍니다. 구글 애널리틱스 4(GA4)는 다양한 사용자들에게 도움이 되는 강력한 도구입니다. 다음은 GA4를 사용하는 주요 사용자 유형과 그들이 GA4를 어떻게 활용할 수 있는지에 대한 설명입니다: 소규모 사업자: GA4를 사용해 고객 행동을 추적하고 최적화된 마케팅 전략을 수립하여 사업 성장을 도모할 수 있습니다. 마케터: 광고 캠페인의 성과를 측정하고 효과적인 타겟팅 ..

[CSS] 박스 모델 Box model

박스 모델 Box model CSS에는 모든 요소가 박스 모양으로 구성되어 있습니다. 제 블로그 메인화면에서 크롬의 Develop Tools (shortcut: F12키)를 사용하여 웹페이지 구성을 살펴보겠습니다. 블로그 카테고리가 박스로 표현되고, 각 카테고리 내에는 소카테고리도 박스로 구성되어 있습니다. 또한 가장 아래에는 귀여운 인스타그램 아이콘도 박스 안에 있습니다. 박스의 구조 각 박스는 아래와 같은 속성들 (properties)을 가지고 있습니다. 콘텐츠 (Content) - 실제 콘텐츠 (아이콘, 텍스트, 이미지 등)이 표시되는 공간입니다. 패딩 (Padding) - 콘텐츠 주위를 둘러싼 빈 공간입니다. 테두리 (Border) - 콘텐츠와 패딩을 감싼 박스입니다. 마진 (Margin) - 박..

Web development 2021.07.05

[CSS] 선택자 Selector #1 (전체/요소/클래서/아이디 선택자)

이번 글에서는 CSS 선택자의 다양한 종류를 살펴보겠습니다. 뉴스 웹사이트 비슷한 웹페이지를 예시로 다양한 선택자를 이용하여 스타일을 입혀보겠습니다. 헤드라인 기사는 네이버 뉴스 (6/16일 자)에서 가져왔습니다. [HTML는 밑에 더보기로] 더보기 HTML 로그인 회원가입 헤드라인 뉴스 연합뉴스 드론이 밝혀준 범고래 사회 생활…"더 친한" 개체 존재 포토 과학 일반 추천 조선일보 “크리에이터가 돈이야” 애플도 유료 팟캐스트 출시 모바일 추천 조선비즈 한국, 세계에서 두번째로 SNS 많이 한다 인터넷/SNS 추천 이용약관 고객센터 전체 선택자 Universal Selector 페이지의 모든 요소를 선택하는 선택자(*)입니다. 아래 코드로 모든 요소를 선택해 color (글꼴 색)을 보라색으로 지정해보겠습..

Web development 2021.06.16

[CSS] 색상 바꾸기 (색상 이름, RGB, Hex 색상 코드)

CSS에서 다양한 색상 코드를 이용하여 색을 바꾸는 방법에 대해 알아보겠습니다. CSS 글씨 색깔 설정하기 아래는 h1, p, h2, p, button으로 이루어진 기본 HTML 웹페이지입니다. HTML 를 통해 csscolor.css 파일과 연결을 시켜둔 상태입니다. Colors Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quis magnam ex corrupti incidunt atque et modi quaerat error. Quidem beatae laboriosam ea velit libero mollitia animi ut culpa repudiandae? Heading Lorem ipsum dolor sit ame..

Web development 2021.06.14

[웹 개발] CSS 기초: CSS란?, HTML에 CSS 적용하는 방식

CSS란? CSS란 Cascading Style Sheets의 약자로 웹페이지의 스타일을 정의하는 데 사용됩니다. 프론트엔드 개발자로서 제일 먼저 배우게 되는 세 가지 언어 HTML/CSS/JavaScript 중 하나이기도 합니다. 세 가지 언어의 역할: html: 웹페이지의 기본 틀 (뼈대)를 구성하는 역할 css: 웹페이지를 꾸며주는 역할 Javascript (JS): 동작들을 표현 이미지 출처: geekflare.com 제일 왼쪽에 스타일을 안입힌 순수 html 페이지입니다. 그리고 오른 쪽 두 이미지는 같은 html페이지에 다른 스타일시트를 입힌 웹페이지입니다. 폰트, 색깔, 구조 등 다양한 구성을 바꿀 수가 있습니다. CSS 기초 CSS 언어의 기본 문법: 선택자 { 특성: 값; } 예제 1) ..

Web development 2021.06.10
728x90
반응형