[css] / css style 속성 포지션일때 위치 조정하기 ✓ position : absolute 가운데, 중앙 정렬하기

[CSS] width height 100% 와 100vh의 차이점 ✅ 상황 → 넓이와 높이 속성 값을 설정할 때 %와 vh의 중 어떤 속성값을 사용해야하는지 고민이될 때 ✅ 100% 와 100vh의 차이점 → (%)퍼센트는 부모의 태그를 기준으로 퍼센트를 측정하여 사이즈를 표시 → VH는 Viewport Height라는 의미로 화면의 100퍼센트를 사용하겠다는 의미

[css] css background : transparent 란? / background : none 이랑 차이점은? background: none; background: transparent; ✅ background : transparent 란? → ✅ css background : transparent vs background : none ?? → 간단하게 background의 색상을 없앨 때 우리는 none(없애기), transparent(투명)을 사용할 수 있음 → 이 둘의 차이점을 알려면 background 속성을 알아야하기 때문에 아래에서 자세히 설명! ✅ 어떤 경우에 사용할까? → 배경색이 지정된 요소의 배경을 없애야하는 경우에 사용 🟣 background 속성 background-colo..

CSS 이미지 자동 슬라이드 만들기 : 흘러가는 이미지 ✅ 상황 → HTML과 CSS만으로 이미지 자동 슬라이드 만들고 싶을 때 🟢 HTML 🟢 CSS @charset "UTF-8"; #slider { overflow: hidden; position: relative; /* border: 20px solid red; */ /* // 이미지 보여지는 뷰 부분만큼 px조절 */ width: 1440px; height: 140px; box-sizing: border-box; } .image-box { /* 원본+클론의 총 합 */ width:5478px; height:100%; display:flex; flex-wrap:nowrap; animation: bannermove 20s linear infinite;..

CSS 스타일 제거 : reset CSS (기본 스타일 지우기) ✅ 상황 → html 태그와 기본적으로 적용되는 브라우저 기본 스타일을 제거 하고 싶을 때 ✅ 방법 → css에서 스타일을 제거하는 코드를 적용해줍니다. ✅ 순서 → html파일 작성 → reset css 코드를 작성 → reset.css 파일을 전체 style.css 파일에 import 🟢 HTML에 CSS 파일 연결 → 저는 보통 style.css 파일을 만들어 적용되는 css 파일을 여기에 모아 import 합니다! 🟢 style.css 파일에 import 하기 @charset "UTF-8"; /* 저는 보통 reset코드를 common.css에 모아줍니다*/ @import url("common.css"); 🟢 css 파일에 reset..

[HTML] a태그 스타일 없애기 : css 스타일 지우기 text-decoration:none; ✅ 상황 → a태그가 기본적으로 가지고 있는 스타일을 지우고 새롭게 스타일을 만들고 싶을 때 ✅ 방법 → CSS로 a태그 기본 스타일을 없애는 text-decoration:none; 코드를 적용해 기본 스타일을 제거해줍니다. 🔵 css 적용 코드 @charset "UTF-8"; /* hyper link */ a, a:link, a:visited{text-decoration:none;} a:active, a:hover{text-decoration:none;}

✅ [jQuery] 오른쪽 배너 고정 : 플로팅배너 자동으로 따라다니는 jQuery 소스 ➡️ HTML ➡️ CSS ➡️ jQuery

✅ [Bi] Google font : 구글 폰트 사용 + 적용하기 https://fonts.google.com Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com ↓↓↓ ✅ 폰트 다운받기 ↓↓↓ ✅ 원하는 사이즈 옆에 Select this style 선택하면 오른쪽에 팝업이 열림 ✅ 폰트를 html과 css 적용하고 싶을때 → 우측 "Selected family" Review 박스 하단 태그를 복사해서 홈페이지 태그 안에 붙여넣기 → css 파일에 font-family 붙여넣기 font-family: 'Montserrat', sans-serif; font-family: 'Bla..

✓ 부트스트랩 파일 다운로드 ✓ 부트스트랩 사용하기 위해 필요한 파일 → css 링크, jQuery, bundle 📍jQuery도 따로 다운로드 📍jQuery 다운로드 링크 ↓ ↓ ↓ https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com

CSS _컬러_color color는 색을 지정하는 속성으로 3가지 방법으로 속성값을 줄 수 있습니다. ※색상의 이름이나 값은 외울 필요없이 그때 필요한 컬러는 검색을 통하거나 포토샵에서 컬러명을 복사해서 붙여넣으시면 됩니다! ↓↓↓ [ CSS - font 문법 ] ▶ color의 속성값을 작성하는 3가지 방법! 1) 색상명 : 색상을 부르는 고유명으로 작성 2) #000000 : 색상을 16진수로 작성 3) rgb (0, 0, 0) : 색상을 rgb값으로 표기 ※ 투명도를 조절하고 싶을 때는 color : rgba (0, 0, 0, 투명도) ▶ font-weight 실전 예시 [ html - css 작성 코드 ] color : 속성값 색상명으로 컬러 바꾸기 16진수로 컬러 바꾸기 rgb값으로 컬러 바꾸..

CSS _폰트(font) font는 폰트 스타일을 바꾸기 위한 속성명으로 font-()뒤의 내용에 따라 폰트의 스타일에 변화를 줄 수 있음! ↓↓↓ [ CSS - font 문법 ] ▶ CSS에서 자주 사용하는 font의 속성입니다. ▶ font-weight ㄴ 폰트의 굵기를 변경하는 속성 ㄴ 속성값이나 숫자로 굵기로 변경할 수 있음 [사용하는 속성값] - normal : 기본값 - bold : 폰트 굵게 - 100~900 : 숫자별로 글꼴 굵기를 지정 가능 ※ 숫자가 클수록 두꺼워집니다! (normal이 400, bold가 700임) ▶ font-weight 사용 방법 ▶ font-weight 실전 예시 [ html - css 작성 코드 ] font-weight font-weight : 폰트의 굵기를 설..

CSS _폰트(font)_font-family font는 폰트 스타일을 바꾸기 위한 속성명으로 font-()뒤의 내용에 따라 폰트의 스타일에 변화를 줄 수 있음! ↓↓↓ [ CSS - font 문법 ] ▶ CSS에서 자주 사용하는 font의 속성입니다. ▶ font-family ㄴ 폰트의 글꼴을 설정 ㄴ 속성값이 여러 개의 글꼴로 설정되어 있으면, 적혀있는 순서대로 글꼴을 적용 ※ 여러 개의 글꼴을 나열할 때에는 쉼표(,)로 구분 ▶ font-family 사용 방법 ▶ font-family 실전 예시 [ html - css 작성 코드 ] font-family font-family : 폰트의 글꼴을 설정하는 속성 Times New Roman 글꼴 적용 Arial 글꼴 적용 [ 실행 화면의 변화 ] ↓ cs..

CSS _선택자_속성 선택자(attribute selectors) >> HTML 요소가 가지고 있는 특정 속성의 속성값을 선택해서 변화를 주는 선택자 [ CSS - 속성 선택자 문법 ] [ html 작성 코드 ] 속성 선택자 ID : PW : [ css 작성 코드 ] @charset "utf-8"; /* 속성 선택자 */ input[type="text"] { background-color: lightpink; } input[type="password"] { background-color: lightskyblue; border: 3px solid red; } input[type="password"]:focus { background-color: #ffc13a; } [ 실행 화면의 변화 ] [ :focus ..

CSS : hover CSS - 선택자 hover는 사용자의 마우스 커서가 링크나, 글자 등 위에 올라가 있는 상태로 마우스 커서 이동에 따라 스타일 변화를 줄 때 사용합니다! ↓↓↓ [실제 예시 사진] " 홈페이지에서 메뉴바나 마우스가 올라갔을 때 변화하는 모습 많이 보셨죠? " [ html - css 코드 ] HOME PRODUCT SHOP EVENT [실행화면]

CSS _선택자_그룹선택자 CSS의 문법 형식은 선택자, 속성, 속성값으로 이루어져 있습니다. ↓↓↓ [ CSS - 문법 ] 그래서 CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자를 사용합니다. ▶ 그룹 선택자 ㄴ 여러 선택자에 css를 적용하고 싶을 때 사용합니다. ㄴ CSS 선택시 : ,(쉼표)를 사용 (부르고 싶은 선택자를 쉼표로 구분하여 연결하여 불러주면 됩니다.) 태그에 selector 라는 클래스 이름을 주고 로 글자 색깔을 변경해볼께요~! [ html - css 작성 코드 ] CSS 그룹 선택자1 CSS 그룹 선택자2 [ css 넣기 전] [ 실행 화면의 변화 ]

CSS _선택자_전체선택자 CSS - 선택자 - CSS의 문법 형식은 선택자, 속성, 속성값으로 이루어져 있습니다. ↓↓↓ 그래서 CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자를 사용합니다. 선택자(selector)의 종류 ▶ 아이디(id) 선택자 ㄴ 자바스크립트에서 중복된 아이디가 있으면 오류가 발생하기 때문에 같은 id는 한개만 사용! ㄴ 태그 선언시 : id = "name" ㄴ CSS 선택시 : #name { 속성 : 속성값; } [ html - css 코드 ] CSS 아이디 선택자 [ 실행화면 ]

CSS _작성 위치와 연결방법 CSS Q : CSS는 어디에 작성해야할까요? - "CSS는 인라인스타일 / 내부스타일시트 / 외부스타일시트 나뉩니다." 1). 내부 스타일시트 ㄴ html 영역에 로 작성하는 방법 2). 인라인 스타일 작성하는 방법 ㄴ html 태그를 사용해 안에 작성한 태그에 작성하는 방법 3). 외부 스타일시트 작성하는 방법 ㄴ 자바스크립트 파일을 외부에서 따로 만들어서, html 파일에 연결하는 방법 ㄴ ※자바스크립트 파일을 만드는 확장자는 css입니다. ㄴ 즉, 문서 저장시 파일이름.css 라고 저장해주시면 됩니다. [파일 저장 예시] 📌 Q : css는 어디에 작성하고, 외부에서 작성한 파일은 또 어떻게 불러올까요? A : 인라인스타일 / 내부스타일시트 / 외부스타일시트연결을 이..

CSS _문법 + (CSS 맛보기 CSS - 문법 - CSS의 문법 형식은 선택자, 속성, 속성값으로 이루어져 있습니다. - 작성은 외부 스타일시트, 내부 스타일시트 그리고 인라인 스타일로 작성이 가능합니다. ㄴ 보통 수정이 용이하고 효율을 위해 외부 스타일 시트에 작성 후, HTML 파일에 연결하는 것이 좋습니다. [ CSS - 문법 ] [CSS - 태그에 스타일 적용하기 ] ㄴ 태그에 작성한 글자의 색깔을 바꿔볼까요? HTML만 작성 → 글자색의 변화 없음 CSS를 시작하신 것을 환영합니다. CSS stlye 적용 → 글자색이 변함 (↓↓↓속성에 대해서는 나중에 자세히 배울테니, "오늘은 CSS 문법의 형식"만 알아두시면 됩니다.🤩↓↓↓) CSS를 시작하신 것을 환영합니다. [ 실행시 화면 ]

CSS _기초 : CSS란? CSS란? - CSS는 웹 페이지를 꾸며주는 역할을 합니다. CSS로 할 수 있는 것은? 1). 웹 페이지에서 보이는 것을 꾸며줄 수 있음 → 글꼴, 색상, 정렬, 각 요소의 배치 방법 등등 2). 웹의 크기에 따라 화면을 자동으로 바꿔줄 수 있음 → 반응형 웹디자인도 스타일의 역할 😀 CSS를 넣으면 브라우저가 어떻게 바뀌는지 볼까요?😀 [ 스타일이 비활성화된 사이트의 모습 ] [ CSS 적용된 화면 모습 ]

(VS Code)HTML 준비과정 - 01. 작성 프로그램 준비_비주얼 스튜디오 코드(Visual Studio Code) HTML 하기 전 준비과정 - 01. 작성 프로그램 준비 Visual Studio Code - 마이크로소프트에서 오픈소스로 개발하고 있는 소스코드 에디터로 무료로 사용할 수 있습니다. - 다양한 확장을 지원하고 있으며 Extentions 안에서 바로 검색하고 설치할 수 있습니다. ㄴ 쉽게 설명해 핸드폰에서 어플을 설치하는 것 같은 느낌입니다. (↓ 아래에서 설치하면 좋은 Extentions을 소개해드릴께요💜) - 확장을 통해 100개 이상의 언어를 지원하고 있으며, 마이크로 소프트에서 공식적으로 파이썬 Python, C/C++, C#, 도커 Docker, 고 Go, 파워 셸 Power..