CSS(Cascading Style Sheets) CSS 코드의 재사용 - 이제 만들어본 CSS 코드를 다른 페이지에 전파해보자. 2.html에 넣은 CSS코드를 1.html에 갖다 놓고 1.html을 열어보자. 그런데 1.html이 2.html과 동일하게 디자인되지 않는다. 무엇이 문제인지 알아보자. 아톰에서 2.html을 기준으로 Split Right 해서 1.html의 화면을 나란히 놓고 보았다. 태그에서 태그들이 빠져있는 것을 알 수 있다. WEB网络 计算机语言-常见语言 HTML超文本标记语言 CSS层叠样式表 JavaScript -HTML超文本标记语言 超文本标记语言HTML(HyperText Makeup Language)HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上..

CSS(Cascading Style Sheets) 미디어 쿼리 써먹기 다시 2.html로 돌아와 미디어 쿼리를 예제에 적용해보자. 코딩을 시작해보자. 화면의 크기가 작아지면 너무 낭비적인 요소가 있고 이상해진다. 특히 아래와 같이 본문이 좁아져 내용을 읽기 불편해진다. 본문을 아래에 배치시키고 제목을 좀 작게 개편해보자. 800픽셀보다 작아질 때 화면이 좀 이상해지는 듯하다. screen width < 800px 즉 @media(max-width:800px){ } 화면의 크기가 800픽셀보다 작을때 본문을 아래로 내리려고 한다. 그렇다면 id값이 grid인 부분을 grid가 아니게 하면 된다. 즉 id값이 grid인 태그의 display가 grid에서 block으로 바꿔준다. @media(max-widt..

CSS(Cascading Style Sheets) 현대적인 웹 애플리케이션을 만드는 데 있어서 굉장히 중요한 요소라고 할 수 있는 반응형 디자인이라고 하는 흐름을 알아보자. 웹은 거의 모든 정보 시스템 운영 체제와 상관없이 PC건 스마트폰이건, 또 가상현실이건 간에 모든 시스템에서 동작하는 정보 시스템이다. 이 말인즉은 수많은 형태의 화면에서 동작해야 된다는 것이다. 이렇다보니까 웹을 만드는 사람들은 그 여러 가지 화면에 대응되는 웹페이지를 만들기 위해서 몸부림을 쳤다. 이러한 사람들의 헌신 끝에 나온 것이 반응형 디자인이다. 화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것, 이것을 반응형 웹 또는 반응형 디자인, 영어로는 Responsive Web이라고 부른다. 이..

CSS(Cascading Style Sheets) 그리드 써먹기 다시 2.html로 돌아가서 그리드를 써먹어보자. WEB网络 计算机语言-常见语言 HTML超文本标记语言 CSS层叠样式表 JavaScript -CSS层叠样式表 层叠样式表CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 更多>> 여기서 내가 나란히 놓고 싶은 대상은 태그와 , 태그이다. 먼저 독립적인 이 둘 태그를 묶어보자. (와태그) 이때 전 시간에 배운 ,와 같은 의미가 있는 태그가 아닌 무색무취의 태그 를 통해서 묶어보자. -CSS层叠样式表 层叠样式表..

CSS(Cascading Style Sheets) 디자인 기획안을 따라 WEB2 - CSS 9에서 제목과 목차를 가로, 세로줄로 나누어 보았다. 디자인 기획서를 따라 WEB2 - CSS 9에 이어서 내용을 목차 옆으로 나란히 해보자. 내용을 목차 옆으로 나란히 할 수 있는 방법 중에서 최신의 방법(강의기준 2107년)을 살펴보자. 바로 '그리드'이다. 그리드 소개 gird.html 이라는 file을 먼저 만들어서 grid를 살펴보자. 导引 文章 (division의 약자) 디자인이라는 목적을 위해서 어떠한 의미도 존재하지 않는 태그를 사용해야 할 때가 있다. 그럴 때 사용하라고 존재하는, 무색무취와 같은 태그 기본적으로 block level element 와 동일하나 기본적으로 inline element ..

CSS(Cascading Style Sheets) 박스 모델 써먹기 다시 2.html로 돌아와서 아래와 같은 디자인 계획안처럼 해보려 한다. 이전 과정까지는 없는 가로와 세로줄을 제목과 목차, 내용을 정리하려한다. 어떻게 해야 할까? ① 가로줄 만들기 먼저는 가로줄을 만들기 위해서는 테두리를 사용해야 한다. 그렇다면 누구에게 테두리를 주어야 하는가? h1 태그에 테두리를 주어야 한다. h1 { font-size:50px; text-align:center; border-bottom:1px solid gray; } 테두리의 아래쪽만 선을 줄 것이기 때문에 border-bottom: 1px solid gray; 테두리 아래쪽에 선을 주고 보니 뭔가 위치가 애매하다. (생활코딩님 강의에서 h1의 위쪽과 아래쪽의..