CSS

[SCSS] HTML에 SCSS 적용하는 법

CSS를 사용하다보면 각종 클래스 혹은 태그들을 나열하느라 시간이 오래 걸리고 반복적으로 클래스와 태그들을 적어줘야 하기 때문에 작업을 하다보면 굉장히 비효율적이란 느낌이 든다. 또한 오타가 발생했을 때 오타를 찾기도 쉽지가 않다. 이러한 이유들로 SCSS를 사용한다. SCSS를 사용하면 CSS 코드가 훨씬 간결해진다. HTML에 SCSS 적용하는 방법 툴에 프로젝트를 생성한다. 해당 프로젝트 안에 'index.html'파일을 만들어 준다. 해당 프로젝트 안에 'css'라는 폴더를 생성해 준다. css 폴더 안에 style.css와 style.scss 파일을 생성한다. index.html에 css코드를 불러온다. → scss에 작성한 내용이 자동으로 작성되도록 설정하면 scss는 따로 불러오지 않아도 된..

[CSS] 프로퍼티 값의 단위

CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. 키워드 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다. 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px는 절대값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다. px px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다. 22인치 LCD 모니터의 경우 해상도가 1680*105..

[CSS] CSS 기본 문법

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다. HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS가 없이도 어느 정도의 스타일 표현이 가능하였으나 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가됨으로서 복잡하고 혼란스러운 언어가 되어 버렸다. HTML5에서는 HTML은 정보와 구조화, CSS는..

[Web] 웹 프로그래밍의 기초(CSS)

CSS란? CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인 요소를 정의하는 기술을 의미한다. 잘 설계된 CSS 코드는 재활용이 가능하며 더 나아가 테마, 템플릿 형태로 확장할 수도 있다. 또한 자바스크립트와 연계하면 콘텐츠의 내용이나 디자인을 동적으로 처리할 경우에도 유용하게 사용되므로 핵심 요소에 대해 정확하게 이해할 필요가 있다. CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소다. HTML이 텍스트나 이미지, 표와 같은 구성요소를 웹 문서에 넣어 뼈대를 만드는 것이라면, CSS는 글씨의 색상이나 크기, 이미지 크기나 배치 방법 등 웹 문서의 디자인 요소를 담당한다. CSS 사용을 통해 얻을 수 있는 장점 웹 문서의 내용과 별개로 디자인만 바꾸거나, 디자인은 그대로 두고 웹 문서의 ..

[HTML] [CSS] [Bootstrap] 웹 연습

Logo HOME BAND TOUR New Your The atomsphere in New Your is lorem ipsum. Chicago Thank you, Chicago - A night we won't forget. Los Angeles Even though the traffic was a mess, we had the best time playing at Venice Beac. THE BAND We love music! What if we didn't have no pop If the popsong writers just gave up Popsong supplyment would stop That would be something And the popsong singer might just s..

[CSS] 기초 정리

CSS(Cascading Style Sheet) 마크업 언어가 실제로 표시되는 방법을 기술하는 언어. CSS는 W3C의 표준이며, 레이아웃과 스타일을 정의할 때 자유도가 높은 언어이다. CSS는 웹 사이트에서 사용되는 스타일을 지정하기 위한 언어이다. 스타일은 웹 이전부터 워드프로세스 등에 사용했던 개념이다. 스타일 사용의 중요한 의미는 문서의 구조와 표현을 분리할 수 있다는 점이다. 구조와 표현을 분리함으로써 문서의 구조를 수정하지 않고, 스타일의 변경만으로 다양한 표현을 할 수 있다는 것을 의미한다. 선택자(selector)와 선언부(declaration block)로 이루어져 있다. 선언부는 속성(property)과 속성 값(value)으로 구성되어 있다. 선언부는 세미콜론(;)으로 속성과 속성 값..