CSS

CSS는 HTML의 요소에 꾸밀 수 있는 Style Sheet 언어입니다. 보통 다음과 같이 말을 합니다 HTML은 웹 페이지의 골격을 만들고, CSS는 외관을 만든다고요.다음은 우리가 익히 알고있는 네이버 포털의 메인입니다. 굉장히 화려하고 다양한 효과들이 페이지 안

CSS는 HTML문서에 적용이 되야 스타일 시트가 적용이 됩니다. CSS파일이나 스타일을 HTML문서에 적용하는 방법은 <style>태그 포스트를 참조해주세요.스타일 시트를 적용하는 방법은 크게 세 가지가 있습니다.인라인 스타일내부 스타일 시트외부 스타일 시트인라

Cascading(이하 캐스케이딩)은 폭포, 위에서 아래로 쏟아지는이라는 뜻을 가진 단어입니다. 그리고 이 캐스케이딩은 CSS에서 가장 중요한 스타일 적용 규칙이기도 합니다.CSS가 무엇의 약자인지 기억하시나요? Cascading Style Sheet였습니다. 캐스케이

앞선 두 개의 포스트로 CSS가 무엇인지 감이 대충 잡히셨나요? 이번엔 캐스케이딩이 이론적으로 중요했다면, 실사용에서 중요한 셀렉터 개념에 대해 알아보겠습니다.셀렉터는 CSS에서 스타일을 적용하기 위해서 HTML요소를 선택해야하는데, 이 요소를 선택하게 해주는 것을 말

지난 포스트에서 다룬 5가지 셀렉터가 특정 요소들을 직접 지정하는 방식이라면, 이번에 다루는 연결 셀렉터는 서로 연관되어있는 요소들을 선택하는 셀렉터입니다.연결 셀렉터부모-자식, 상위-하위 요소라고도 하는 요소 관계에 대해 우선 짚고 넘어가겠습니다. 부모 요소는 가장

셀렉터의 마지막 시리즈인 속성 셀렉터입니다. 속성 셀렉터는 태그 내의 속성에 따라서 스타일을 줄 수 있도록 선택할 수 있게 해주는 셀렉터입니다.속성 셀렉터는 특정 속성을 가진 요소에 대해 스타일을 적용하고 싶은 경우 사용하게되는 셀렉터입니다. 속성 셀렉터는 다음과 같이

가상이라는 말은 실제가 아니고 그렇게 생각되는 것을 의미합니다. 가상 요소는 선택된 요소의 일정 부분에 스타일을 입힐 수 있는 것입니다. 즉, 존재하지 않는 요소를 존재하는 것으로 만들어 셀렉터로 지정할 수 있게 만들어 준다고 할 수 있습니다.가상 요소는 셀렉터 뒤에

폰트는 웹 페이지에서 사용되는 글씨체를 바꿔줍니다. 폰트에 따라서 가독성이나, 페이지의 분위기가 변경되고, 이미지 만큼 텍스트가 차지하는 비율도 높기에 웹 페이지에서 가장 먼저 눈에 띄는 부위라고 할 수 있습니다.웹 폰트는 웹 문서 내부에 글꼴 정보를 저장하고 사용자가

웹 페이지에서 마진(margin)과 패딩(padding)은 여백 공간을 의미합니다. 마진과 패딩을 잘 활용하면 웹 페이지 상에서 원하는 공간에 콘텐츠를 삽입할 수 있게됩니다. 그렇다면 마진과 패딩은 무엇을 뜻하고 이들을 어떻게 사용해야 할까요?웹 페이지에 요소를 삽입하

지난 시간에 마진과 패딩영역에 대해서 알아보고 이들을 조절하는 속성을 알아보았습니다. 이번 포스트에서는 콘텐츠 영역을 설정할 수 있는 속성들을 소개해드리겠습니다.콘텐츠 영역우선 콘텐츠의 크기를 조정하는 방법입니다. 콘텐츠의 크기는 width와 height 속성으로 조절

마진과 패딩을 시작으로, 콘텐츠를 다루었습니다. 이번에 요소를 차지하는 또 다른 구성요소인 테두리에 대한 속성을 알아보겠습니다.border-width속성은 테두리의 굵기를 지정합니다. 굵기 지정 방식은 px 등의 단위를 이용한, 직접 지정 방식과, thin, mediu

지금까지 다룬 콘텐츠, 패딩, 테두리, 마진이 모여 하나의 요소를 이룹니다. 이렇게 블록 요소의 구성을 살펴보면 마치 박스 내부에 이것저것 들어있는 것 처럼 보이게됩니다. 그래서 웹 페이지에서 이런 구성을 가진 요소들(대부분 블록 요소)을 박스 모델이라고 합니다.박스

콘텐츠를 웹 페이지에서 자유롭게 배치하려면 지난번에 배운 박스 모델, 콘텐츠 영역 등과 함께 레이아웃을 만들어주는 속성에 대해서도 알아야합니다. 오늘은 웹 문서 레이아웃을 만드는 속성에 대해 알아보도록 하겠습니다/display 속성은 콘텐츠 영역 포스트에서 잠깐 다뤘습

position 속성은 웹 문서에서 요소의 위치를 지정할 수 있는 속성입니다. position 속성을 배우고 사용할 수 있다면, 웹 문서에서 요소를 원하는 위치에 배치할 수 있습니다.position 속성을 잘 사용하려면 position 속성이 가진 값들에 대해서 잘 이

오직 PC, 노트북을 통해서 웹 페이지에 접속했던 2000년대와 달리 2010년도 이후에는 스마트폰, 태블릿 등의 다양한 기기로 웹 페이지에 접속하는 빈도가 늘고 있습니다. 13인치 15인치로 규격화된 PC, 노트북과는 다르게 모바일 기기는 종류도 다양하고 그 만큼 제

미디어 쿼리 미디어 쿼리는 웹 페이지에 접속하는 기기에 따라 다른 CSS 스타일을 적용하기 위해 사용합니다. 미디어 쿼리를 사용하게 되면 접속 기기의 화면 크기에 맞춘 레이아웃을 보여줍니다. 다음 세 장의 사진은 구글에 각기 다른 기기를 사용해서 접속한 모습인데요.

반응형 웹 페이지를 설계할 때 화면 너비에 따라 요소를 재배치하게 되는데, 이때 기준이 되는 레이아웃을 그리드 레이아웃(grid layout)이라고 합니다. 그리드 레이아웃은 웹 페이지를 여러 column으로 나누고, 요소를 화면에 맞게 배치하는 것을 의미합니다.그리드

플렉스 박스 레이아웃은 그리드 레이아웃을 구현하기 위해 새로 추가된 레이아웃 개념입니다. flex라는 단어가 들어가는 것에서 느낄 수 있듯이 요소를 유연하게 늘이거나 줄여서 배치하는 개념입니다.플렉스 박스 레이아웃는 새로 추가된 개념이기 때문에 플렉스 박스를 지칭하는

웹 페이지를 구성하다보면 다른 정렬에 비해 유난히 가운데 정렬을 하는 경우가 많습니다. 이미지나 제목과 같은 것들은 가운데에 있는 것이 배치상 깔끔하고 이뻐보이는 경우가 많기 때문인데요. 오늘은 CSS에서 요소를 가운데 정렬하는 방법들에 대해서 알아보겠습니다.text-

CSS를 어느정도 배우다보면 CSS 전처리기(Preprocessor)라는 말을 많이 들어보셨을 것 입니다. 이름 그대로 전처리기는 CSS가 동작하기 전에 먼저 동작을 하는 코드입니다. 그러면 무엇을 위해서 전처리기를 사용하는 것 일까요?CSS를 사용하면서 작성이 어렵다

지난 포스트에서 SCSS를 소개하면서 SCSS를 웹에서 사용하기 위해서 컴파일 과정을 거쳐야한다고 언급했습니다. 그래서 이번 포스트에서는 SCSS 사용법에 앞서 SCSS를 컴파일하는 여러 방식들에 대해서 알아보도록 하겠습니다.SassMeister는 온라인으로 .scss

이번 포스트부터 SCSS의 문법에 대해서 다루도록 하겠습니다. 진행을 하다가 SASS와 다른 부분이 존재하는 문법에 대해서는 차이점도 함께 소개하려고 합니다.먼저 SCSS에서 주석을 다는 방법은 CSS에서 주석을 다는 방식과 동일하게 /\* \*/를 이용합니다.SASS

Nesting은 '중첩'이라는 뜻을 가진 단어입니다. SCSS(SASS)는 중첩이라는 기능을 지원해서 기존 CSS에서 셀렉터를 활용하는데 발생했던 여러 불편함들을 없애주고 있습니다.예를들어 CSS에서 어떤 자식요소를 선택하기 위해서는 다음과 같이 사용했어야 했습니다.C

SCSS(SASS)에서도 @import 구문을 사용할 수 있습니다. SCSS에서 파일을 import할 경우 기본적으로 SCSS(SASS) 파일로 가져오게 됩니다.파일을 import 하게 되면 해당 파일의 내용이 현재 파일에 추가되는 효과를 가져옵니다.컴파일 결과만약,

SCSS는 연산을 위한 연산자들을 지원하고 있습니다. SCSS 타입이 지원하는 값이라면 연산자를 통한 연산으로 다양한 값을 표현할 수 있습니다. 연산자의 종류와 사용가능한 타입들은 아래표와 같습니다.SCSS를 다루실 정도라면 연산자의 의미정도는 아실거라고 생각되어 연산

이번 포스트에서는 SCSS(SASS)의 또 다른 강력한 문법인 @Mixin과 @include(보통 둘이 합쳐 Mixins이라고 부르는 사람들도 있습니다.)에 대해서 알아보도록 하겠습니다.Mixins은 스타일시트에서 재사용이 가능한 스타일을 정의할 수 있도록 하는 문법이

웹 페이지를 보기좋게 만들기 위해 HTML 요소에 CSS, JavaScript로 다양한 디자인과 기능을 입힙니다. 하지만 CSS가 사실 그렇게 간단하지만은 않아서 CSS로 웹 페이지를 구축하고 나면, 엄청난 코드량이나 디자인의 차이가 발생하는 문제가 발생하게 되는데요.

CSS에서 요소의 크기를 조절하는 단위에는 여러가지가 있습니다. 오늘은 대표적으로 사용되는 몇 가지 크기 단위들에 대해서 알아보도록 하겠습니다.먼저 px입니다. px는 픽셀(pixel)의 줄임말로 한국어로 화소라고도 합니다. 웹 디자인에서 가장 작은 단위로 사용됩니다.

모달(Modal)이란, 사용자의 이목을 집중시키기 위한 그래픽 인터페이스 창입니다.좀 더 자세히 이야기하자면 하나의 페이지에서 하나의 작은 다른 페이지를 띄워 이 페이지에 대한 조작이 종료되기 전까지 부모 페이지로 돌아가지 못하도록 만든 창입니다. 그래서 모달 창을 이

오늘은 슬라이드 메뉴를 구현하는 방법에 대해서 간단하게 알아보도록 하겠습니다. 슬라이드 메뉴는 다양한 페이지에서 깔끔한 메인 페이지를 구성하고 네비게이션 메뉴를 숨기면서 동시에 메뉴들을 모아 편리하게 이용할 수 있도록 만든 메뉴입니다.간단하게 화면을 구성했습니다. 메뉴

예전 포스트에서 요소를 가운데 정렬하는 방법을 다뤘었습니다.이때 소개한 방법은 요소 내부에 다른 요소가 있을 경우에 정렬하는 방법이었습니다. 그래서 오늘은 <div>태그 내부에 텍스트만 있을 때, 이 텍스트를 정렬하는 방법에 대해 알아보도록 하겠습니다.text-a

오늘 소개할 CSS의 기능은 트랜스폼(transform)입니다. 트랜스폼은 그 이름 그대로 요소의 크기/위치/형태를 변경하는 기능을 수행합니다. 트랜스폼을 잘 사용하면 정적인 웹사이트에 액션을 불어 넣어서 사용자의 이목을 끌 수 있습니다. transform trans

이전에 배운 transform은 요소를 이동시키거나 회전시키는 동작을 했습니다. 이번에 다룰 transition은 요소를 웹 요소의 속성을 동작에따라 변경시키는 효과를 낼 수 있습니다.그러면 트랜지션을 사용하기 위한 속성들에 대해 알아보도록 하겠습니다.실습에 사용된 코

이전에 소개드린 transform, transition을 사용하면 웹 페이지에서 애니메이션 효과를 낼 수 있었습니다. 하지만 자연스러운 애니메이션을 만들기 위해서는 두 속성을 잘 조합해야했는데요. 그래서 애니메이션을 쉽게 만들고자 animation 속성이 등장했습니다.

CSS의 변수 var() 사용 방법에 대해서 알아봅니다.