블로그스팟 글쓰기 서식 편집 html css 코드

HTML과 CSS는 웹 페이지를 만들기 위한 필수적인 언어입니다. HTML은 웹 페이지의 구조를 정의하고, CSS는 HTML로 작성된 웹 페이지의 스타일을 지정합니다. HTML과 CSS를 함께 사용하면 구글블로그를 보다 아름답고 직관적으로 만들 수 있습니다.

블로그스팟 글쓰기 서식 html

HTML은 HyperText Markup Language의 약자로, 웹 페이지에서 구조적인 요소를 담당하는 언어입니다. 즉, 문서의 뼈대를 구성하는 역할을 합니다. HTML은 다양한 태그를 사용하여 문서의 제목, 단락, 이미지, 링크 등을 정의합니다.

HTML 문서는 태그로 구성되어 있으며, 이러한 태그들은 브라우저에게 내용을 어떻게 표시해야 하는지 알려줍니다.

HTML활용 예시

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
<h1>안녕, 세상!</h1>
<p>이것은 단락입니다.</p>
<img src="이미지주소.jpg" alt="이미지 설명">
<a href="https://www.example.com">링크</a>
</body>
</html>

<!DOCTYPE html>: 문서 유형을 정의합니다. HTML5를 사용한다는 것을 나타냅니다.
<html>: HTML 문서의 시작을 알리는 태그입니다.
<head>: 문서의 메타데이터를 담는 태그로, 제목이나 외부 스타일시트 등을 정의합니다.
<title>: 문서의 제목을 정의합니다. 브라우저 탭에 표시됩니다.
<body>: 문서의 본문을 담는 태그로, 사용자에게 보여지는 내용이 들어갑니다.
<h1>: 제목을 나타내는 태그입니다. <h1>부터 <h6>까지 있으며, 숫자가 커질수록 제목의 수준이 낮아집니다.
<p>: 단락을 나타내는 태그입니다.
<img>: 이미지를 삽입하는 태그입니다. src 속성은 이미지 파일의 주소를, alt 속성은 이미지에 대한 대체 텍스트를 제공합니다.
<a>: 하이퍼링크를 만드는 태그입니다. href 속성은 링크의 주소를 지정합니다.

구글블로그 글쓰기 서식 css

CSS는 Cascading Style Sheets의 약자로, HTML 문서의 스타일과 레이아웃을 담당하는 언어입니다. HTML이 문서에서 뼈대를 담당한다면, CSS는 이 뼈대를 디자인하고 블로그 스팟 꾸미기를 하는 역할을 합니다.

색상, 글꼴, 텍스트 크기, 배경 이미지, 위치 등 전반적인 디자인을 지정하는 것이 CSS의 역할입니다. HTML과 CSS를 함께 사용하면, 보다 멋진 blogger 블로그

를 만들 수 있습니다.

css활용 예시

/* 선택자(selector)를 이용하여 스타일을 적용합니다. */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

h1 {
color: blue;
text-align: center;
}

p {
font-size: 16px;
line-height: 1.5;
}

body: 문서의 전체적인 스타일을 정의합니다. 여기서는 글꼴과 배경색을 설정했습니다.
h1: <h1> 제목의 스타일을 정의합니다. 여기서는 글자 색상과 가운데 정렬을 지정했습니다.
p: 단락(<p>)의 스타일을 정의합니다. 여기서는 글자 크기와 줄 간격을 지정했습니다.

html과 css의 차이점

HTML과 CSS는 완전히 다른 것이며 서로 다른 기능을 담당합니다. HTML은 웹 페이지의 내부 구조를 정의하고 제작하는 데 사용되며, 콘텐츠와 마크업을 작성합니다.

HTML로 웹 사이트를 만들기 위해 사용되는 태그는 웹 브라우저에게 어떻게 콘텐츠를 표시할지 지시합니다. CSS는 콘텐츠의 디자인 및 레이아웃을 제어하는 데 사용됩니다.

CSS를 사용하여 색상, 글꼴, 텍스트 크기, 간격, 배경 이미지 등의 스타일을 선택하여 문서의 시각적인 부분을 제어합니다.

즉, HTML은 문서의 구조와 내용을 정의하는 데 사용되며, CSS는 문서의 스타일 및 레이아웃을 적용하는 데 사용됩니다.

따라서 HTML과 CSS는 서로 다른 기능을 갖고 있지만, 함께 사용되면 이들을 조합하여 보다 효과적으로 웹 페이지를 디자인 및 제작할 수 있습니다.

상위노출을 위한 필수 html과 css

아래의 코드는 블로그에 쓴 글을 검색엔진에 상위노출 시키기 위해서 꼭 필요한 태그입니다.

이러한 HTML과 CSS를 사용하여 웹페이지를 검색엔진에 최적화하면, 웹페이지가 검색 결과 상위에 노출될 가능성이 높아집니다.

HTML

title 태그 : 웹페이지의 제목을 나타냅니다.
meta 태그 : 웹페이지의 메타 정보를 나타냅니다.
h1 태그 : 웹페이지의 주요 제목을 나타냅니다.
h2 태그 : 웹페이지의 부제목을 나타냅니다.
h3 태그 : 웹페이지의 세부 제목을 나타냅니다.
p 태그 : 웹페이지의 본문을 나타냅니다.
a 태그 : 웹페이지의 링크를 나타냅니다.
img 태그 : 웹페이지의 이미지를 나타냅니다.
video 태그 : 웹페이지의 비디오를 나타냅니다.

CSS

font-family : 웹페이지의 글꼴을 지정합니다.
color : 웹페이지의 글자 색상을 지정합니다.
background-color : 웹페이지의 배경색을 지정합니다.
font-size : 웹페이지의 글자 크기를 지정합니다.
line-height : 웹페이지의 줄 간격을 지정합니다.
margin : 웹페이지의 요소와 요소 사이의 여백을 지정합니다.
padding : 웹페이지의 요소의 테두리 내부 여백을 지정합니다.
border : 웹페이지의 요소의 테두리를 지정합니다.

블로그스팟 글쓰기 서식 글자크기 조절

px 단위로 글자 크기를 지정

예를 들어, <h1 style="font-size: 20px;">This is a heading</h1> 은 글자 크기를 20px로 설정합니다.

em 단위로 글자 크기를 지정

예를 들어, <h1 style="font-size: 1.5em;">This is a heading</h1> 은 글자 크기를 부모 요소의 글자 크기와 1.5배로 설정합니다.

rem 단위로 글자 크기를 지정

예를 들어, <h1 style="font-size: 1.5rem;">This is a heading</h1> 은 글자 크기를 루트 요소의 글자 크기와 1.5배로 설정합니다.

% 단위로 글자 크기를 지정

예를 들어, <h1 style="font-size: 100%;">This is a heading</h1> 은 글자 크기를 100%로 설정합니다.

블로그스팟 글쓰기 서식 html 색상

색상 이름을 사용하여 색상을 지정

예를 들어, <h1 style="color: red;">This is a heading</h1> 은 글자 색상을 빨간색으로 설정합니다.

16진수 색상 코드를 사용하여 색상을 지정

예를 들어, <h1 style="color: #FF0000;">This is a heading</h1> 은 글자 색상을 빨간색으로 설정합니다.

RGB 색상 코드를 사용하여 색상을 지정

예를 들어, <h1 style="color: rgb(255, 0, 0);">This is a heading</h1> 은 글자 색상을 빨간색으로 설정합니다.

HSL 색상 코드를 사용하여 색상을 지정

예를 들어, <h1 style="color: hsl(0, 100%, 50%);">This is a heading</h1> 은 글자 색상을 빨간색으로 설정합니다.

블로그스팟 글쓰기 서식 html 너비

px 단위로 너비를 지정

예를 들어, <div style="width: 200px;">This is a div</div> 은 div의 너비를 200px로 설정합니다.

em 단위로 너비를 지정

예를 들어, <div style="width: 1.5em;">This is a div</div> 은 div의 너비를 부모 요소의 너비와 1.5배로 설정합니다.

rem 단위로 너비를 지정

예를 들어, <div style="width: 1.5rem;">This is a div</div> 은 div의 너비를 루트 요소의 너비와 1.5배로 설정합니다.

% 단위로 너비를 지정

예를 들어, <div style="width: 100%;">This is a div</div> 은 div의 너비를 부모 요소의 너비와 동일하게 설정합니다.

px, em, rem, %로 조절되는 항목

글자 크기, 너비, 높이, 여백, 테두리 너비, 테두리 색상, 배경색, 배경 이미지

블로그스팟 글쓰기 서식 html 높이

px 단위로 높이를 지정

예를 들어, <div style="height: 200px;">This is a div</div> 은 div의 높이를 200px로 설정합니다.

em 단위로 높이를 지정

예를 들어, <div style="height: 1.5em;">This is a div</div> 은 div의 높이를 부모 요소의 높이와 1.5배로 설정합니다.

rem 단위로 높이를 지정

예를 들어, <div style="height: 1.5rem;">This is a div</div> 은 div의 높이를 루트 요소의 높이와 1.5배로 설정합니다.

% 단위로 높이를 지정

예를 들어, <div style="height: 100%;">This is a div</div> 은 div의 높이를 부모 요소의 높이와 동일하게 설정합니다.

블로그스팟 글쓰기 서식 html 모바일

모바일 기기에서만 적용되는 HTML은 다음과 같습니다. 이러한 HTML 태그를 사용하여, 모바일 기기에서만 웹페이지의 디자인을 변경할 수 있습니다.

viewport meta 태그

viewport meta 태그는 모바일 기기의 화면 크기에 맞게 웹페이지의 너비를 조정합니다. viewport meta 태그는 다음과 같이 작성합니다.

media query

media query는 특정 조건을 만족하는 경우에만 CSS 스타일을 적용합니다. 예를 들어, 다음의 media query는 모바일 기기에서만 display: block; 스타일을 적용합니다.

@media all and (max-width: 768px) {
.my-element {
display: block;
}
}

media query활용 예시

모바일 화면에서 폰트 크기 12, 너비 90%를 적용하는 HTML은 다음과 같습니다. 이 HTML 코드를 사용하여, 모바일 화면에서 웹페이지의 폰트 크기와 너비를 조정할 수 있습니다.

<head>
<title>This is a title</title>
<style>
@media all and (max-width: 768px) {
html, body {
font-size: 12px;
width: 90%;
}
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

max-width: 768px는 웹페이지의 너비가 768픽셀을 넘지 않도록 제한하는 CSS 속성입니다.

CSS 중 padding에 대해

CSS에서 padding은 요소의 테두리와 요소의 콘텐츠 사이에 여백을 추가하는 데 사용되는 속성입니다. padding은 요소의 모양과 가독성을 높이는 데 사용할 수 있습니다.

padding은 4개의 값으로 지정할 수 있습니다. 첫 번째 값은 위쪽 여백, 두 번째 값은 오른쪽 여백, 세 번째 값은 아래쪽 여백, 네 번째 값은 왼쪽 여백입니다.

4개의 값을 모두 지정하지 않으면 위쪽, 오른쪽, 아래쪽, 왼쪽 여백이 동일하게 적용됩니다.

padding의 값은 단위 없이 지정할 수 있습니다. 단위 없이 지정하면 픽셀 단위로 간주됩니다.

padding의 값을 다른 단위로 지정하려면 단위를 명시적으로 지정해야 합니다. 예를 들어, 10px로 padding을 지정하려면 padding: 10px;라고 지정해야 합니다.

padding: 10px 20px; 활용 예시

padding: 10px 20px;는 요소의 테두리와 요소의 내용물 사이에 10픽셀의 여백을 왼쪽과 오른쪽에, 20픽셀의 여백을 위쪽과 아래쪽에 추가합니다.

padding 속성은 요소의 테두리와 요소의 내용물 사이에 여백을 추가하는 데 사용됩니다. padding 속성의 값은 4개의 값으로 구성됩니다.

첫 번째 값은 위쪽 여백, 두 번째 값은 오른쪽 여백, 세 번째 값은 아래쪽 여백, 네 번째 값은 왼쪽 여백입니다.

css 중 border에 대해

border는 아래와 같이 4개의 속성으로 지정할 수 있습니다. 4개의 속성 모두를 지정하지 않으면 기본값으로 설정됩니다.

첫 번째 속성은 테두리의 너비
두 번째 속성은 테두리의 색상
세 번째 속성은 테두리의 스타일
네 번째 속성은 테두리의 테두리 패턴

테두리의 너비는 단위 없이 지정할 수 있습니다. 단위 없이 지정하면 픽셀 단위로 간주됩니다.

테두리의 너비를 다른 단위로 지정하려면 단위를 명시적으로 지정해야 합니다. 예를 들어, 10px로 테두리를 지정하려면 border-width: 10px;라고 지정해야 합니다.

테두리의 색상은 16진수 코드, 색상 이름, HSL 코드로 지정할 수 있습니다. 예를 들어, 빨간색 테두리를 지정하려면 border-color: #FF0000;라고 지정해야 합니다.

테두리의 스타일은 solid, dotted, dashed, double, groove, ridge, inset, outset으로 지정할 수 있습니다. 예를 들어, solid 테두리를 지정하려면 border-style: solid;라고 지정해야 합니다.

테두리의 테두리 패턴은 none, ridge, groove, inset, outset으로 지정할 수 있습니다. 예를 들어, none 테두리 패턴을 지정하려면 border-style: none;라고 지정해야 합니다.

border활용 예시

예를 들어, 다음 CSS 코드는 div 요소에 10px 너비의 빨간색 solid 테두리를 지정합니다.

div {
border: 10px solid red;
}

css 중 cursor에 대해

CSS에서 cursor는 마우스 커서를 변경하는 데 사용되는 속성입니다. cursor는 사용자에게 요소의 용도를 알려주는 데 사용할 수 있습니다.

cursor는 다음과 같은 다양한 값으로 지정할 수 있습니다.

auto : 기본적인 마우스 커서입니다.
pointer : 요소를 클릭할 수 있음을 나타내는 마우스 커서입니다.
text : 텍스트를 입력할 수 있음을 나타내는 마우스 커서입니다.
wait : 요소가 로드 중임을 나타내는 마우스 커서입니다.
help : 요소에 대한 도움말을 제공하는 마우스 커서입니다.
crosshair : 요소를 정확하게 클릭할 수 있음을 나타내는 마우스 커서입니다.
move : 요소를 이동할 수 있음을 나타내는 마우스 커서입니다.
resize : 요소의 크기를 조정할 수 있음을 나타내는 마우스 커서입니다.

cursor활용 예시

cursor는 요소의 모양과 스타일을 변경하는 데 사용할 수 있습니다. 예를 들어, 다음 CSS 코드는 div 요소에 손가락 마우스 커서를 지정합니다.

div {
cursor: pointer;
}

css중 transition에 대해

CSS에서 transition은 요소의 속성 값이 변경될 때 애니메이션을 적용하는 데 사용되는 속성입니다. transition은 요소의 변화를 부드럽게 표현하는 데 사용할 수 있습니다.

transition은 다음과 같은 세 가지 속성으로 지정할 수 있습니다.

transition-duration : 애니메이션의 지속 시간을 지정합니다.
transition-timing-function : 애니메이션의 속도를 지정합니다.
transition-property : 애니메이션을 적용할 속성의 이름을 지정합니다.

transition은 요소의 변화를 부드럽게 표현하는 데 사용할 수 있습니다. 예를 들어, 다음 CSS 코드는 div 요소의 너비가 변경될 때 애니메이션을 적용합니다.

trnasition활용 예시

이 CSS 코드를 적용하면 div 요소에 마우스를 올리면 요소의 너비가 2초 동안 부드럽게 100px로 변경됩니다.

div {
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-property: width;
}

div:hover {
width: 100px;
}

css 중 border-radius에 대해

border-radius는 CSS의 속성으로, 요소의 모서리를 둥글게 만드는 데 사용됩니다. border-radius는 요소의 모서리를 둥글게 만들고, 요소의 모양을 부드럽게 만드는 데 사용할 수 있습니다.

border-radius는 다음과 같은 다양한 속성으로 지정할 수 있습니다.

border-radius : 요소의 모든 모서리를 둥글게 만듭니다.
border-top-left-radius : 요소의 왼쪽 상단 모서리를 둥글게 만듭니다.
border-top-right-radius : 요소의 오른쪽 상단 모서리를 둥글게 만듭니다.
border-bottom-left-radius : 요소의 왼쪽 하단 모서리를 둥글게 만듭니다.
border-bottom-right-radius : 요소의 오른쪽 하단 모서리를 둥글게 만듭니다.

border-radius활용 예시

border-radius는 요소의 모서리를 둥글게 만들고, 요소의 모양을 부드럽게 만드는 데 사용할 수 있습니다. 예를 들어, 다음 CSS 코드는 div 요소의 모든 모서리를 둥글게 만듭니다. 이 CSS 코드를 적용하면 div 요소의 모든 모서리가 5px 둥글게 됩니다.

div {
border-radius: 5px;
}

css 중 white-space에 대해

white-space는 CSS의 속성으로, 요소의 줄 바꿈과 여백을 제어합니다. white-space는 요소의 텍스트 모양을 조정하고, 요소의 가독성을 높이는 데 사용할 수 있습니다.

white-space는 다음과 같은 다양한 속성으로 지정할 수 있습니다.

normal : 기본적인 줄 바꿈과 여백을 사용합니다.
nowrap : 요소의 텍스트를 한 줄에만 표시합니다.
pre : 요소의 텍스트를 원래의 형식으로 표시합니다.
pre-line : 요소의 텍스트를 한 줄에 표시하고, 줄 바꿈을 유지합니다.
pre-wrap : 요소의 텍스트를 원래의 형식으로 표시하고, 줄 바꿈을 허용합니다.

white-space활용 예시

white-space는 요소의 줄 바꿈과 여백을 제어하여, 요소의 텍스트 모양을 조정하고, 요소의 가독성을 높이는 데 사용할 수 있습니다. 예를 들어, 다음 CSS 코드는 div 요소의 텍스트를 한 줄에만 표시합니다.

이 CSS 코드를 적용하면 div 요소의 텍스트가 한 줄에만 표시됩니다.

div {
white-space: nowrap;
}

css 중 overflow에 대해

overflow는 CSS의 속성으로, 요소의 콘텐츠가 요소의 크기를 초과할 때 어떻게 처리할 것인지를 지정합니다.

overflow는 요소의 콘텐츠를 잘라내거나, 스크롤바를 표시하거나, 콘텐츠를 요소의 크기에 맞게 조정하는 데 사용할 수 있습니다.

overflow는 다음과 같은 다양한 속성으로 지정할 수 있습니다.

visible : 요소의 콘텐츠를 모두 표시합니다.
hidden : 요소의 콘텐츠를 잘라냅니다.
scroll : 요소의 콘텐츠를 스크롤바를 사용하여 표시합니다.
auto : 요소의 콘텐츠가 요소의 크기를 초과하면 스크롤바를 표시합니다.

overflow활용 예시

overflow는 요소의 콘텐츠가 요소의 크기를 초과할 때 어떻게 처리할 것인지를 지정하여, 요소의 콘텐츠를 잘 보이게 하고, 사용자에게 편의를 제공하는 데 사용할 수 있습니다.

예를 들어, 다음 CSS 코드는 div 요소의 콘텐츠가 요소의 크기를 초과하면 스크롤바를 표시합니다.

이 CSS 코드를 적용하면 div 요소의 콘텐츠가 요소의 크기를 초과하면 스크롤바가 표시됩니다.

div {
overflow: scroll;
}

css 중 display: block;에 대해

display: block;은 CSS의 속성으로, 요소의 레이아웃을 블록 요소로 지정합니다. 블록 요소는 웹 브라우저에서 줄 바꿈을 하고, 너비가 부모 요소의 너비를 차지합니다.

display: block;은 다음과 같은 다양한 속성으로 지정할 수 있습니다.

block : 요소를 블록 요소로 지정합니다.
inline : 요소를 인라인 요소로 지정합니다.
inline-block : 요소를 인라인 블록 요소로 지정합니다.
flex : 요소를 플렉스 요소로 지정합니다.
grid : 요소를 그리드 요소로 지정합니다.

display: block;활용 예시

display: block;은 요소의 레이아웃을 블록 요소로 지정하여, 요소의 크기와 위치를 조정하고, 요소의 배치를 제어하는 데 사용할 수 있습니다.

예를 들어, 다음 CSS 코드는 div 요소를 블록 요소로 지정합니다. 이 CSS 코드를 적용하면 div 요소가 블록 요소로 지정되어, 줄 바꿈을 하고, 너비가 부모 요소의 너비를 차지합니다.

div {
display: block;
}

마우스에 반응하는 html

마우스를 위로 올렸을 때 적용되는 HTML은 다음과 같습니다. 이 HTML 코드를 사용하여, my-element 클래스를 가진 요소에 마우스를 올리면 요소의 글자 색상이 빨간색으로 변경됩니다.

<div class="my-element">
This is a div.
</div>

<style>
.my-element:hover {
color: red;
}
</style>

html에서 클래스 개념

HTML에서 클래스는 요소의 스타일을 지정하는 데 사용됩니다. 클래스는 class 속성을 사용하여 지정하고, class 속성의 값은 공백으로 구분된 문자열입니다.

예를 들어, 다음 HTML 코드는 my-class 클래스를 가진 요소의 글자 색상을 빨간색으로 지정합니다.

클래스는 style 태그에서 사용되어 요소의 스타일을 지정할 수도 있습니다. 예를 들어, 다음 HTML 코드는 my-class 클래스를 가진 요소의 글자 색상을 빨간색으로 지정합니다.

<div class="my-class">
This is a div.
</div>

<style>
.my-class {
color: red;
}
</style>

클래스는 CSS에서 요소를 그룹화하는 데에도 사용할 수 있습니다. 예를 들어, 다음 CSS 코드는 my-class 클래스를 가진 모든 요소의 글자 색상을 빨간색으로 지정합니다.

.my-class {
color: red;
}

클래스 블로그스팟 설정 예시

위에서 설명드렸던 html과 css코드를 활용해 링크버튼(클릭버튼)을 만드는 방법을 소개해 드리겠습니다. 티스토리 블로그 사이트와 더불어 구글 블로그 스팟을 이용해서 애드센스로 수익을 얻고 계시다면 CTC단가가 높은 전면광고 노출에 관심이 많으실겁니다.

저도 포스팅할 때 자주 사용하는 코드로 실제로 블로그 방문자의 행동을 유발시키는데 많은 도움을 주고 있습니다.

폰트크기, 너비, 색상 등은 본인의 취향에 맞게 변경하셔서 블로그를 더욱 다채롭고 가독성 좋게 만들어 보시기바랍니다.

[영역1]
.abox {background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
width: 80%;
height: 80px;
box-shadow: 2px 4px 6px rgb(0 0 0 / 40%);
border-radius: 30px;
font-size: 41px;
line-height: 1.5;
text-align: center;
white-space: nowrap;
overflow: hidden;
display: block;
font-family: 'NanumGothicCodingBold';
margin-left: auto;
margin-right: auto;

}
.abox:hover {background-color: red;
transform: scale(1.1);
}
@media only screen and (max-width: 600px) {
.abox {font-size: 20px;width: 90%;height: 60px;}
}

[영역2]
<a href="https://naver.com"><button class="abox on">마우스에 반응하는 클릭버튼</button>

[영역1]의 코드를 블로그스팟 테마메뉴의 html 설정에서 추가해 줍니다.

에센셜테마 기준으로 아래의 코드부분을 찾아서 이 부분의 바로 위에 붙여넣어 주세요.

a{
text-decoration:none;
color:$(body.link.color)
}

그리고 [영역2]의 코드는 글쓰기를 할 때 html보기 화면에서 붙여넣기 후 사용하시면 됩니다.

2023년 7월 23일 일요일

블로그스팟 글쓰기 서식 편집 html css 코드

댓글 없음:

댓글 쓰기

카테고리

신고하기

Tags

Categories