Posis

제목 태그 제목 태그는 h1부터 h6까지 존재합니다. h1 태그가 가장 중요한 제목을 써야 할 때 사용하고 숫자가 높아질수록 덜 중요한 순서입니다. 따라서 h6은 가장 중요하지 않은 제목 태그입니다. 제목1 제목2 제목3 제목4 제목5 제목6 문단 태그 웹 페이지에 글을 작성할 때 사용하는 태그입니다. HTML CSS 자바스크립트 줄 웹 페이지에 줄을 넣고 싶을때 사용하는 태그입니다. HTML CSS 자바스크립트 주석 코드 상에서는 존재하지만 웹 페이지에서는 보이지 않게 하기 위한 태그입니다. 설명이나 잠시 제거하고 확인할 때 사용합니다. HTML 자바스크립트

이번 포스팅에서는 Bootstrap에 Floating Label을 직접 만들어 보겠습니다. Floating Label 위 GIF는 Bootstrap 5.0v의 Forms - Floating labels의 예시입니다. 위와 같이 똑같이 만들지는 못하지만 비슷하게 만들어 보겠습니다. HTML Our Newsletter Full Name Email Address CSS *{ margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { position: relative; padding: 70px 40px; background: #fff; borde..

SCSS는 프로그래밍 요소를 섞은 CSS이므로 다양한 문법이 존재합니다. 오늘은 그중 하나인 Mixin에 대해서 알아보겠습니다. 변수는 하나의 값만 넣어서 저장하지만 Mixin은 내가 원하는 스타일 여러 가지를 한 번에 저장할 수 있습니다. 기본 이처럼 mixin을 함수처럼 작성하고 스타일에 적용시킬 때는 @include 뒤에 작성한 mixin 이름을 쓰면 됩니다. /* CSS */ .box { position: absolute; left: 50%; top: 50%; translate: -50%, -50%; } 이를 활용해 자주 사용하는 설정들을 많이 작성해둔다면 웹 개발할 때 코드 작성 시간을 단축할 수 있습니다. 파라미터 추가하기 mixin은 프로그래밍 언어의 함수와 흡사하게 생겼습니다. 이말은 즉슨..

변수는 프로그래밍언어를 한번이라도 공부했다면 어떤것인지 아실겁니다. 간단하게 설명하자면 데이터를 저장해두는 메모리공간을 의미합니다. CSS에서 변수를 전역에서 사용하기 위해서는 :root라는 가상클래스안에서 --를 붙인 변수를 만들어 사용합니다. [예시] /* CSS */ :root { --fontColor: red; } p { color: var(--fontColor); } SCSS에서는 더욱 간단하게 사용할 수 있습니다. 변수명 앞에 $를 붙이고 데이터를 넣어주면 끝입니다. /* CSS */ p { color: red; } SCSS로 작성하고 컴파일하면 변수는 사라지고 color 속성에 변수에 저장한 데이터가 들어가게됩니다. 산술연산 CSS에서도 값을 계산해서 사이즈를 지정할 수 있습니다. calc를..

SASS/SCSS에서 중첩이란? CSS에서 style을 적용할 때 .container .inner h1 {}과 같은 방식을 사용합니다. 하지만 class들이 많아지고 태그들이 자식의 자식의 자식의....처럼 많아지는 경우가 생깁니다. 그렇게 된다면 .container 자식선택자 자식선택자 자식선택자 자식선택자 {} 점점 길어질수록 가독성은 떨어지면서 자연스럽게 스타일을 수정할 때 원하는 곳에 자리를 찾는것이 힘들어지게 됩니다. 이를 좀 더 수월하게 할 수 있는 방법이 중첩입니다. [예시] /* CSS */ body p { color: blue; } body p strong { font-size: 20px; } body p strong span { font-weight: 500; } 이처럼 태그 중괄호 안..

CSS에는 여러 줄 주석 /* */만 사용할 수 있습니다. 하지만 SASS/SCSS에서는 두 가지의 주석이 존재합니다. 한 줄 주석( // )과 여러 줄 주석( /* */ )이 있습니다. SASS body background-color: #fff color: #000 padding: 10px 20px /* *h1 { * font-size: 20px; *} h2 // font-size: 15px; SCSS SCSS는 코드 블록의 한 줄 주석이 적용되지 않으므로 사진으로 대체했습니다. CSS(컴파일) body { background-color: #fff; color: #000; padding: 10px 20px; /* h1 { font-size: 20px; } */ } 위에 보시는 것처럼 여러 줄 주석은 C..