어제는 미디어 쿼리에 대한 기초적인 부분을 봤다면 오늘은 다크 모드 사용자에게 홈페이지를 어떻게 보여줄지 설정하는 방법을 알아보자. prefers-color-scheme prefers-color-scheme를 이용하여 light, dark 따로 설정 가능하다. 코드는 @media 이용하여 prefers-color-scheme: ‘모드’ 이런식으로 입력한다. 모드 light : 사용자가 시스템에서 라이트 모드를 사용하고 있거나 아니면 모드를 선택하지 않았을 때를 나타낸다. dark : 사용자가 시스템에서 다크 모드를 사용하고 있을 때를 나타낸다. 미디어 쿼리 사용하기 다크 모드 예시 @media (prefers-color-scheme: dark) { … } CSS 파일이나 <style> 태그 안에 이 코드를 입력하고 블록 안에 CSS…

미디어 쿼리 사용하는 방법에 대해 알아보자. 미디어 쿼리 웹사이트의 모바일 버전, PC 버전 각기 다른 CSS를 적용하고 싶을 때 이용한다. <link> 태그 이용하거나 <style>에서 @media 혹은 @import 사용하여 미디어 쿼리를 사용할 수 있다. @media는 CSS 블록을 적용하여 미디어 유형에 맞을 때만 CSS 적용할 수 있게 할 수 있다. <link>와 @import는 미디어 유형에 따라 CSS를 어떤걸 이용하라고 설정할 수 있다. 미디어 유형 all : 모든 장치 print : 인쇄 결과물 / 출력 미리보기 화면. screen : 웹브라우져에서 보여주는 화면. speech :…

반응형 웹사이트를 만들 때 이미지 표현을 어떻게 하면 상위 요소 밖으로 삐져나오지 않는지 알아보자. 유동 이미지 유동 이미지를 표시할 때는 이미지 width, height 모두 다 작성해도 괜찮다. 다만 반드시 이미지에 max-width와 height는 꼭 넣어줘야한다.   img { max-width: 100%; height: auto; } 사용된 코드 설명 max-width: 100%; : 이미지 사이즈가 상위요소보다 작으면 그대로 표현. 이미지 사이즈가 상위 요소보다 크면 상위요소 100% 까지만 표현. height: auto; : 이미지의 높이를 비율에 맞게 표현.

grid가 대세인것 같긴하지만 아직 flex도 많이 쓰이고있다. 이번에는 유동 격자 표현 방법 중 하나인 flex에 대해 알아보자. flex grid와 다르게 flex는 구버전 IE에서도 호환이 잘된다. 기본 레이아웃 flex로 레이아웃을 짤 때 flex Container안에 각각의 flex item들을 넣는다. flex contatiner에서 과, , 하는 방법을 알아볼 수 있다.   HTML <div class=”container”> <div class=”item”>flex item1</div> <div class=”item”>flex item2</div> <div class=”item”>flex item3</div> <div class=”item”>flex item4</div> <div class=”item”>flex item5</div> <div class=”item”>flex item6</div> <div class=”item”>flex item7</div> <div class=”item”>flex item8</div> <div class=”item”>flex item9</div> </div> CSS .container…

최근에는 레이아웃을 grid로 많이 짠다. 유동 격자 표현 방법 중 하나로 grid에 대해 알아보자. grid IE 11 버전에서도 구버전스펙으로 지원이 되고 Edge, FireFox, Chrome 등에서 지원된다. 기본 레이아웃 grid로 레이아웃을 짤 때 grid Container안에 각각의 grid item들을 넣는다.   HTML <div class=”container”> <div class=”item”>grid item1</div> <div class=”item”>grid item2</div> <div class=”item”>grid item3</div> <div class=”item”>grid item4</div> <div class=”item”>grid item5</div> <div class=”item”>grid item6</div> <div class=”item”>grid item7</div> <div class=”item”>grid item8</div> <div class=”item”>grid item9</div> </div> CSS .container { display: grid; /* display: inline-grid; */ }…

요즘에는 웹사이트를 출력할 수 있는 디스플레이 장치가 굉장히 많다. 예전에는 컴퓨터만 웹사이트에 접속이 가능해서 많이 사용하는 컴퓨터 해상도로 맞추고 그 해상도에서 사용이 되지 않을시 원치않은 스크롤바가 만들어지는 문제가 있었다. 고정형 디자인 이런식으로 원치 않는 스크롤바가 생성된다. 핸드폰부터 5K 디스플레이까지 웹사이트 화면을 보여주는 디자인을 반응형 디자인이라고 한다. 이 때는 고정폭이 아닌 변동폭으로 사이즈를 설정하여 반응형 디자인을 만들 수 있다. 반응형 디자인   반응형 디자인은 세 가지 기술을 조합해서 사용하는 방법을 의미한다고 한다. [alist href=”#chapter1″ link=”1. 유동 격자”][alist href=”#” link=”2. 유동 이미지”][alist…

대체 스타일시트는 홈페이지를 다른 스타일로도 보여주고 싶을 때 사용할 수 있다. 주로 라이트 모드, 다크 모드 토글키 사용하는 페이지에서 이용한다. 그리고 대체 스타일시트를 이용하면 라이트 모드, 다크 모드가 아니더라도 홈페이지 테마 디자인을 조금씩 바꿔서 볼 수 있다. 대체 스타일시트 기본 대체 스타일시트 선언하는 방법에 대해 알아보자. HTML <link href=”default.css” rel=”stylesheet” title=”Default Style”> <link href=”fancy.css” rel=”alternate stylesheet” title=”Fancy”> <link href=”basic.css” rel=”alternate stylesheet” title=”Basic”> Firefox » 보기 » 문서 스타일에서 골라서 볼 수 있다. 버튼 구현하기 브라우져에서 수동으로 고르기 귀찮으므로 버튼을 구현하는…

CSS 스타일 시트를 만들 때 꼭 필요한게 선택자, 선언이다. 이 포스트에서는 선언에 대해 알아보자. CSS 선언 꾸미기 원하는 선택자의 속성과 속성값을 명시한다.   CSS p{ color: #00CCCC; } HTML <p style=”color: #00CCCC;”>테스트 입니다.</p> 속성 이 예시에서, p 요소의 속성을 먼저 color라고 선언한다. CSS 속성은 를 참고하여 사용한다. 속성 값 이 예시에서는 color 속성의 속성값을 RGB 코드 #00CCCC로 선언한다. 여기서 RGB 코드는 색상 코드이다.

결합자 결합자 = combinators. 결합자는 두 가지의 선택자를 입력하여 조금 더 명확하게 선택자를 선택할 수 있다. 결합자 하위 결합자 : article p. article 요소의 하위 요소인 p 요소들이 모두 적용된다. 자식 결합자 : article > p. article 요소의 바로 하위 요소인 p 요소에만 적용된다. 인접 형제 결합자 : h1 + p. li:first-of-type + li. 두 선택자를 분리했을 때 동일한 부모 선택자의 자식으로 첫번째 선택자의 바로 뒤에 오는 선택자가 두번째 선택자인경우 이 결합자가 적용된다. 일반 형제 결합자 : h1 ~ p….

CSS 스타일 시트를 만들 때 꼭 필요한게 선택자, 선언이다. 이 포스트에서는 선택자에 대해 알아보자. CSS 선택자 선택자 = rule set의 맨 앞에 있는 HTML 요소, ID, Class, 속성, 수도 클래스 등의 이름을 기재하여 스타일 시트를 지정해줄 수 있다. 이 예에서는, h1과 p가 선택자다. 선택자 요소 / type 선택자 : h1 / p와 같이 html 요소를 바로 입력한다. 범용 선택자 : * 를 입력하여 모든 유형의 요소를 선택한다. id 선택자 : #과 함께 html에서 선언한 id를 입력한다. class 선택자 : .과…