본문 바로가기

Front-End/CSS6

CSS 색상, 단위 CSS 색상표현 1. 정의된 색상 이름 사용하기 예) background-color: tomato color: white; aqua, brown, black 등 정해진 이름을 쓰면 사용이 가능하다. 더 많은 정의된 색상의 이름을 알고 싶다면 아래 링크에서 확인하기 HTML Color Names W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 2. RGB 빛의 삼원색(빨강,.. 2023. 3. 31.
CSS 구문(형식), 주석, 스타일 시트 CSS 구문(형식) CSS의 구문(형식)은 선택자와 선언 블록으로 구성된다. 선택자 { 속성:속성값} 선택자는 스타일을 지정할 HTML 요소를 가리키며, 선언 블록에는 선택자에 어떤 속성을 부여할 것인지 속성 이름과, 속성값은 무엇을 줄 것인지 선언한다. 선택자 { 속성1:속성값1; 속성2:속성값2; } 여러 CSS 선언은 세미콜론으로 구분되며, 선언 블록은 중괄호로 묶는다. 예) 선택자 { 속성1:속성값1; 속성2:속성값2; } p { color:red; text-align:center; } 선택자는 p 속성은 color, text-align 속성값은 red, center p는 CSS의 선택자(스타일을 지정하려는 HTML 요소를 가리킴: ). color는 속성이고 red속성 값 text-align는 속.. 2023. 2. 24.
CSS 결합자(combinators)란? 초보자들은 흔히 특정태그를 선택하기 위해 태그 하나하나에 다른 클래스를 달아주곤 하는데, 작은 프로젝트에서나 상관없지만 큰 프로젝트일수록 비효율적이다. 특히, 협업을 하는 경우에는 더욱 더 비효율적. 태그 하나하나에 클래스를 두면 1. 만든 클래스 이름을 다 기억하지도 못할뿐더러 2. 이 클래스가 도대체 무슨 효과를 주는지 하나하나 짝지으며 찾아다녀야 한다. 그럼 어떻게 해야 할까? 결합자(combinators)를 활용해 코드를 짜는 것이다. 결합자(Combinator)는 선택자를 여러 개 결합하여 세밀하게 찾을 수 있게 한다. 결합자는 크게 네 가지로 나눌 수 있다. 결합자에 대해서 알려면 HTML의 구조에 대해서 알아야 한다. HTML의 구조 "어떤 요소 안에 어떤 요소가 있느냐"를 이해하는 것이 가.. 2023. 2. 4.
CSS에 대한 보충 설명 1. CSS를 사용하는 이유 태그 내에 style속성을 사용하여 서식을 지정하는 것은 사실 좋은 방법이 아니다. 홈페이지들은 웹문서하나가 몇천 줄로 이루어져 있고, 이를 모두 일일히 변경한다는 건 사실상 불가능하다. 한번에 일괄적으로 변경을 하기 위해서 css라는 기능이 생겨난 것 css를 사용하면 한 번의 클릭만으로 컴퓨터나 핸드폰의 테마를 변경할 수 있듯이 웹문서의 서식을 일괄적으로 지정할 수 있게 된다. 2. 아이디를 하나만 지정하는 이유 사실 HTML과 CSS에서는 하나의 웹페이지에 같은 아이디를 여러 번 사용해도 별문제 없이 동작하긴 한다. 하지만 이렇게 중복된 아이디를 가지고 자바스크립트작업을 하게 되면 오류가 발생하기 때문에, 하나의 id는 한 번만 사용하는 습관을 들여야 한다. 2023. 2. 3.
Bootstrap 부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. 쉽고 빠른 반응형 웹디자인을 만들 수 있게 한다. 미리 정해진 클래스들을 다양하게 꾸며 CSS 파일로 정리한 것을 HTML에서 불러와 쓰는 것! 온라인에서 가지고 오는 것이기 때문에 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있다. 부트스트랩은 SASS 스타일시트를 기반으로 한다. 부트스트랩 사이트 : https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customiz.. 2023. 1. 30.
CSS란? Cascading Style Sheets의 줄임말 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어 즉, 웹페이지를 꾸미는데 사용되는 언어 HTMl의 구성에 따라서 부모 요소에 디자인을 적용하면 자동으로 안쪽 자식 요소까지 디자인 적용이 된다. HTML 문서 안에서는 안에 로 공간을 만들어 작성한다. 선택자를 이용하여 특정 요소에 속성을 적용한다. 선택자(selector) 선택을 해주는 요소, 특정 요소들을 선택하여 스타일을 적용할 수 있게 해준다. 👉 무엇을 꾸민다는 것은, 일단 '선택(select)해야' 가능한 일이다. 예를 들어 firstname 이라고 이름표를 달아준 뒤, "firstname 이란 이름표가 붙은 부분의 글씨를.. 2023. 1. 20.

티스토리툴바