소상공인 감자네

HTML 문서의 는 페이지 자체를 설명하는 정보(메타데이터)를 담는 영역이다.화면에는 보이지 않지만 검색 노출(SEO), 소셜 공유 카드, 반응형, 성능, 파비콘에 큰 영향을 주게 된다.1. 의 용도문자 인코딩 — 한글 깨짐 방지제목(title) — 탭/검색 결과 제목메타 태그 — 설명, 뷰포트, 소셜 카드, 크롤링 규칙리소스 연결 — CSS, 폰트, 파비콘, 스크립트 로딩2. 필수 5종① 문자 인코딩 (UTF-8)② 제목(title)초보자를 위한 HTML 태그 가이드③ 반응형 뷰포트④ 설명(Description)⑤ 파비콘(Favicon)3. 성능을 높이는 연결 태그CSS/폰트/프리로드스크립트 로딩 전략defer는 HTML 파싱을 막지 않아 가장 안전하다.4. 보안·접근성·기타5. 자주 하는 실수한글 ..

웹페이지 구성시 다양한 레이아웃을 위해 배경 혹은 요소들의 투명도를 관리하기도 한다.배경(background)의 투명도를 관리하는 rgba 도 있지만글자 등 요소들 자체의 투명도를 조절할 수 있는 속성이 바로 Opacity 이다. 1. opacity 란?opacity는 CSS에서 요소의 불투명도를 설정 하는 속성이다.'불투명도'는 투명하지 않는 정도를 의미하고 이 값을 조절하여 요소가 얼마나 뒤쪽을 비추게 할지를 결정한다. 요소에 opacity 값을 주는 것에 따라 불투명도가 조절된다.opcity 값불투명도투명도 설명1100% 불투명뒤쪽이 전혀 비치치 않는다.(완전히 불투명)0.550% 불투명뒤쪽이 50%정도 비쳐 보인다.00% 불투명요소 자체가 사라진 것처럼 보인다.(완전히 투명) opacity속성은 ..

CSS 속성 중 하나인 position 을 사용하다보면 요소들을 겹칠 수 있는 기술을 활용 할 수 있다.요소들이 겹치게 되면 요소의 순서가 중요한 상황이 생기게 되는데,그때 활용할 수 있는 속성이 바로 z-index 속성이다. 팝업창, 드롭다운, 고정된 헤더등 z-index 를 이용해 순서를 조정하는 것이다. 1. z-index 필요성우리가 만드는 웹페이지들은 기본적으로 가로축(X), 세로축(Y)이 존재하는 평면이다.하지만 CSS 속성인 position 을 사용하게 되면 요소들이 서로 겹칠 수 있는 상황이 생기고,그렇게 되면서 깊이(Z축)의 개념이 생겨나게 된다. 이 상황에서 어떤 요소가 위로 오고 아래로 갈지 결정해주는 것이 바로 z-index이다. z-index 의 값이 클수록 사용자가 보이는 쪽에 ..

HTML 문서들을 읽다 보면 태그에 id와 class 라는 속성이 추가 된 것을 많이 볼 수 있다.아이디(ID)와 클래스(Class)는 HTML 태그에 붙이는 하나의 이름표라고 생각 하면 된다. 이런 이름표를 붙이는 이유는태그에 스타일(CSS)을 입히거나 동작을 제어(Javascript)하기 위해특정 태그를 찾는데 도움을 주기 때문이다. 1. ID 와 Class 의 필요성우리가 본격적으로 CSS나 Javascript 작업을 하기 위해서 ID나 Class를 사용하게 되는데,우선 하나의 예시를 살펴보자.안녕하세요.새로운 블로그를 만들었습니다.html에 대한 내용을 다루고 있습니다.초보들에게 도움이 될 것 같네요. 이렇게 작성을 한 후, 글자에 색을 바꾸고 싶다면p{ color: red;} 이런식으로 태그..

웹페이지를 만들면 요소들의 색상이나 배경을 넣는 작업이 필요할 때가 있다.보통 요소들은 눈에 보이지않는 투명한 영역들을 가지고 있는데 그 배경을 꾸며 주는 CSS의 속성이 바로 background 이다. 배경 속성은 여러 개의 개별 속성으로 이루어져 있고, 우선 가장 많이 쓰이는 5가지를 알아보자. 1. background-color가장 흔하게 쓰이고 많이 쓰이는 기본 속성이다.요소의 뒷면에 원하는 색상을 채워 넣을 때 사용한다..background-color{ background-color: 색상값;} 색상값으로는 키워드, HEX(16진수), RGB/RGBA 를 이용해 작성을 할 수 있다. 키워드 : 미리 정의된 이름의 색을 지정한다. 예를 들어 red, blue, green 등 HEX(16진수) :..

웹페이지를 만들기 위해 html 을 구성하면 사용자의 입력을 받아야 하는 상황이 생기기 마련이다.우리가 인터넷에서 흔히 만나는 댓글, 설문조사, 로그인 등 이런 기능을 위해선 폼을 사용하고 이해해야 한다. 폼 (Form)HTML 페이지는 기본적으로 정적인 정보만을 보여준다.하지만 일반적인 웹사이트는 사용자와 상호작용을 필요하는 경우가 많다. 로그인이나 회원가입을 하거나, 게시글을 작성하거나 댓글을 작성하는 등 사용자의 입력을 받아 이를 처리할 곳으로 보내는 역할을 하는 것이 바로 태그이다. 1. form 의 기본 구조폼을 만들 때는 태그를 사용해서 만든다.모든 입력 필드(텍스트상자, 버튼 등)는 이 태그 안에 포함되어야 한다.// 이곳에 여러 입력 필드들이 들어간다// , 등 a. actionacti..

HTML 요소의 안쪽 여백을 조절하는 패딩(padding)이 있었다면,테두리 바깥쪽에 공간을 만들어 다른 요소들간의 간격을 조절하는 역할을 하는 것이 마진(margin)이다. 요소들을 배치하다 보면 세부적으로 요소들의 간격을 조절하고 싶은 상황이 생기게 되고,그때 적절하게 사용할 수 있는 속성이 마진이다. Margin 사용하기1. margin 각 방향 사용padding 속성과 같이 4가지 방향 상(top), 하(bottom), 좌(left), 우(right)로 각각 조절 할 수 있다..top { margin-top: 20px;}.bottom { margin-bottom: 20px;}.left { margin-left: 20px;}.right { margin-right: 20px;} margin-..

웹페이지를 CSS로 꾸미다 보면 HTML 요소들은 하나의 상자안에 들어 있다는 것을 알 수 있다.이 상자 안에 텍스트를 넣을수도 이미지를 넣을수도 있는 것이다. 패딩(padding)은 이 상자에서 상자 속의 컨텐츠(텍스트, 이미지 등)와 상자의 테두리 사이에 존재하는 안쪽 여백을 조절하는 역할을 한다.여백을 조절함으로써 시각적으로 편안한 디자인을 보여줄 수 있다. padding 사용하기1. padding 각 방향 사용padding 속성은 4가지 방향 상(top), 하(bottom), 좌(left), 우(right)로 각각 조절 할 수 있다. .top { padding-top: 20px;}.bottom { padding-bottom: 20px;}.left { padding-left: 20px;}.ri..

웹페이지를 CSS 로 꾸미다 보면 HTML 요소들을 다양하게 활용해야 하는 경우가 생긴다.그 중 하나가 바로 테두리를 만듬으로 시각적으로 구획을 짓거나 버튼의 모양들을 다듬는 작업을 하게 된다. 그 HTML 요소들의 테두리를 만들어 디테일을 살리는 속성이 바로 Border 이다. border 속성은 단순한 선 같지만 실제로는 다양한 속성을 통해 만들어 진다. 1. 스타일 (border-style)border-style은 테두리를 실제로 보이게 하는 가장 중요한 속성이다.이 속성이 없으면 다른 설정을 하더라도 테두리가 보이지 않는다./* none: 기본값, 테두리 없음 */.box1{ border-style: none;}/* solid: 실선, 가장 일반적으로 사용된다. */.box2{ border-s..

웹사이트를 구성하는 HTML 의 각 요소들은 보이지 않는 상자(Box) 안에 존재한다고 할 수 있다.그럼 그 상자들의 사이즈는 어떻게 조절을 할 수 있을까? 상자의 크기는 너비를 표현하는 width 와 높이를 표현하는 height 를 통해 자유롭게 조절할 수 있다.웹사이트의 기본적인 크기의 단위인 px을 통해 값을 지정해 주면 된다.div { width: 200px; height: 200px; background: red;}span { width: 100px; height: 100px; background: blue;}"> 또한 %를 사용해서 상대적 크기를 지정할 수 있다.%를 사용하게 되면 부모 요소의 크기를 기준으로 비율을 지정하게 된다.// 부모 요소의 크기를 지정.parent { w..