WEB/CSS (7) 썸네일형 리스트형 7일차 : CSS 코드의 재사용 7일차 : CSS 코드의 재사용 열심히 배운 CSS를 다른 페이지에서도 활용해 봅시다. 그 전에는 html 파일에 css 코드를 삽입하여 스타일을 바꿔줬는데, 이제 css 파일을 새로 만들어 볼 차례입니다. 지난번에 사용했던 css 부분을 그대로 따와서 sample.css 파일을 만들어보겠습니다. 새로 만들 때 style 태그는 제거해 주세요! 그리고 이렇게 만든 css 파일과 html 파일을 연결해 주면 됩니다. 바로 link 태그를 이용해서요! 요렇게 넣어주면 됩니다. style 부분을 모두 지우고 저렇게 링크 하나만 걸어주면 완성입니다. 매우 간단하죠? css 부분이 너무 많아지면 html에 함께 적어서 적용시키기도 어렵겠죠. 여러 웹 페이지를 같은 디자인으로 만들 때에도 마찬가지구요. 템플릿을 적.. 6일차 : 반응형 디자인 6일차 : 반응형 디자인 ※ 반응형 웹/디자인? - 웹페이지의 크기를 변경했을 때, 요소들을 각 크기에 따라 다르게 보여주는 것 지금 우리는 반응형 디자인에 매우 익숙합니다. 컴퓨터 스마트폰 태블릿과 같은 각각의 기기 뿐 아니라 여러가지 다양한 웹브라우저에서 같은 페이지를 같은 모습으로 확인할 수 있습니다. 그러나 반응형 디자인이 등장하기 전에는 웹페이지의 요소들이 다양한 환경에서 적응할 수 없는 경우가 대부분이었습니다. 만약 각 요소들의 사이즈가 정해져 있다면, 큰 화면에서 보는 내용과 작은 화면에서 보는 내용이 다르겠죠. 그러면 반응형 디자인은 어떻게 구현할 수 있을까요? 바로 미디어 쿼리를 통해서 구현할 수 있습니다. 우선 미디어 쿼리라는 파일을 만들어 봅시다. 간단하게 웹페이지를 하나 만들고, r.. 5일차 : 그리드 5일차 : 그리드 그리드 하니까 서강준이랑 김아중 나오는 드라마가 생각나네요. 저도 유튜브에서 드라마 리뷰로 간단히 본거긴 한데.. 이 드라마 보신 분은 그리드의 뜻을 아실겁니다. 그리드는 greed 가 아니라 grid 이고, 격자무늬라는 뜻입니다. 드라마에서도 태양풍으로부터 지구를 보호하기 위해 이시영이 그리드라는 촘촘한 방어막을 설치하죠. 아무튼! 그래서 그리드는 어디에 사용되는 것일까요? 웹페이지에서 페이지 레이아웃을 쉽게 설정하기 위해 사용하는 방법입니다. 그리드를 어떻게 사용하는지 알아보기 위해 그리드 파일을 새로 만들어 보겠습니다. 1) div 태그로 여러가지 영역 만들기 일단 아무 의미 없는 첫번째 영역와 두번째 영역를 div를 이용해 넣어보겠습니다. ☆ 여기서 잠깐! div란? div는 d.. 4일차 : 박스모델 4일차 : 박스모델 CSS가 무엇인지부터 속성과 선택자까지 배웠으니 이제 디자인을 해봐야겠죠? 디자인을 시작하기 전에, 박스모델이라는 매우 매우 중요한 개념을 먼저 알아야 하는데요. 지난 번에 배운 것처럼 구글에 CSS box model 을 검색해봅시다. 박스 모델은 CSS에서 디자인과 레이아웃에 대해 이야기 할 때 사용됩니다. 보이지 않아서 그렇지, 모든 HTML 요소들은 박스로 둘러 쌓여 있는데 이 박스를 가르키는 것이 바로 박스 모델입니다. 박스모델은 가장 안쪽의 내용과 테두리인 보더, 그리고 그 사이의 여백인 패딩, 테두리와 테두리 사이의 여백인 마진으로 이루어져 있습니다. 디자인을 하려면 위치를 옮기고 예쁘게 만들어야 하는데요. 레이아웃도 마찬가지이구요. 배치를 하려면 구획이 어떻게 나누어져 있.. 3일차 : CSS 선택자를 스스로 알아내는 법 3일차 : CSS 선택자를 스스로 알아내는 법 지난 시간에는 CSS 속성을 알아내는 법을 배웠는데, 이번에는 CSS 선택자를 알아내는 법에 대해 공부합니다. 선생님께서 내용이 많고 복잡하다고 미리 경고를 하고 있어요! 시작도 전에 두려워지는군요.. 시간을 충분히 확보하라는데.. 시간은 많으니 시작해보죠! ○ 선택자란? 지난 시간에 style 태그에 등장한 a 가 선택자였습니다. 즉, 속성을 적용시킬 대상이 선택자였죠. 선택자가 간단하게 a와 같이 하나의 속성을 갖고 있는 경우, CSS 선택자를 입력할 때 그냥 그 속성만 입력하면 됩니다. 지난 시간에 a를 입력하여 모든 하이퍼링크들의 글자 색상이나 밑줄 여부를 한꺼번에 적용시켜줄 수 있었죠. ○ 전체가 아니라 몇 가지 태그만 변경해주고 싶다면?? 선택자를.. 2일차 : 혁명적 변화, CSS 속성 알아내는 법 2일차 : 혁명적 변화, CSS 속성 알아내는 법 지난 시간에 CSS가 등장하게 된 배경에 대해 살펴보았습니다. 이번에는 조금 더 구체적으로, CSS를 사용하는 방법에 대해 알아볼 예정입니다. ○ 웹 페이지에서 CSS를 적용하는 두 가지 방법 1. style 태그를 이용 style 태그는 지난 시간에 살짝 살펴보았습니다. 이처럼 을 입력한 후, 속성을 적용시킬 대상 (a) 을 선택하고, 적용시킬 효과 (color=색상;) 를 적어주면 됩니다. a 태그를 달고 있는 모든 곳에 동일한 속성을 한 번에 적용시키는 것이죠. 여러가지 속성을 한꺼번에 변경시킬 때 유용하게 사용할 수 있는 것이 바로 이 스타일 태그입니다. 그렇다면, 이 중에 하나만 변경하고 싶을 때는 어떻게 할까요? 2. style 속성을 이용 바.. 이전 1 2 다음
