tlwkrgoqhfRk

반응형 디자인(responsive web) 어떤 형태의 화면에서도 적절한 디자인으로 웹페이지가 나타날 수 있도록 구상된 것. 화면의 크기에 따라서 웹페이지의 각 요소들이 반응하며 동작하게 되는 디자인. CSS에서는 미디어 쿼리(media query)를 이용해 반응형 웹을 만든다. 미디어 쿼리 기본 문법은 다음과 같다. @media 미디어-유형 and (미디어 속성:속성값) { 미디어에 적용할 CSS } 미디어 유형도 뭐가 많더라. all, screen, speech, print 등등... 오늘 예제로 배운 코드이다. 미디어 유형은 스크린이다. 스크린 크기의 최솟값이 700px일 때, 즉 스크린크기가 700px보다 클 때 디스플레이가 아예 사라지게 만든 것이다. 미디어 쿼리를 이용하여 수정한 코드는 다음과..

그리드 CSS로 오잉 선택자에 대해 display: grid; grid-template-columns: 100px 1fr; 라 하면, 이는 오잉 밑의 div태그들을 열 형태로 묶어서 첫 번째 div태그는 100px만큼의 자리를, 두 번째 태그는 남은 자리를 모두 차지하게 설정한 것이다. 만약 grid-template-columns: 2fr 3fr; 라 두면 각 태그가 자리 차지하는 비율이 2:3이 된다. 행으로 묶으려면 grid-template-rows 를 쓰면 될 것 같다. 그리드는 이와 같이 페이지를 여러 영역으로 나누는 데 쓰인다. 그리드를 이용하여, 이전 코드를 다음과 같이 수정했다. See the Pen Untitled by j1n00000 (@j1n00000) on CodePen.

머리에 안 남을까봐 정리하고 있는 건데... 이번 내용은 유독 더 재밌어서 머리에 바로 남을 것 같다. 개발자 도구 켜서 이것저것 바꿔보는 재미가 있었다. 어떻게 하는지 확실히 알았으니 그냥 필기한 내용 화면캡쳐랑 코드만 올려야징 block level element : 쉽게 말해 화면 전체를 차지하는 태그. 제목태그 등이 해당된다. inline element : 화면의 일부분만을 차지하는 태그. 최종 코드: See the Pen Untitled by j1n00000 (@j1n00000) on CodePen.

css에서 가장 중요한 요소는 효과(declaration) 와 선택자(selector)이다. 그 중 선택자에 대해서 조금 더 살펴보려고 한다. (효과는... 그냥 필요한 효과 그때그때 구글링해서 쓰면 되겠더라) See the Pen Untitled by j1n00000 (@j1n00000) on CodePen. 위의 코드에서 모든 a 태그는 검정으로 해놨다. html과 css페이지의 태그는 보라색, 현재 페이지는 초록색으로 바꾸고자 한다. 처음에 아무것도 모른채로 생각한건 그냥 속성으로 일일이 넣는 거였는데, 그러면 중복도 생기고 수정하기도 번거롭다. 따라서 그룹으로 묶어서 수정하고 싶다는 생각이 자연스럽게 든다. 이를 위한 HTML 속성은 class이다. CSS에서 HTML속성인 class를 선택자로 ..

기본적으로 웹은 HTML로 이루어진다. 여기에 CSS 문법을 도입하려면 1. WEB HTML CSS JavaScript 위 style 태그에서 text-decoration: none 는 밑줄을 없앤다는 의미가 되고, style 속성에서 text-decoration: underline" 는 밑줄을 만든다는 의미이다. 세미콜론(;) 으로 각 속성을 구분해주면 된다. 여기까지 CSS 문법을 정리해보면, 다음과 같다. 태그에서 a{}는 모든 a태그를 선택한다고 해서 선택자(Selector)라고 한다. 선택자에 대해 color:red; 는 선택자에 붙이는 효과 또는 선언(declaration)이라고 하며, 이 때 color 는 속성(property) 이고, 이 속성에 대한 값으로 red가 오는데 이것을 value..

HTML 로 만든 웹페이지에서, 텍스트 색상을 바꾸고 싶을 때 font 태그를 쓸 수 있다. HTML 이렇게 웹페이지를 꾸며나갈 수도 있지만.. 만약에 색을 바꾸고 싶은 텍스트가 100개라면? 100만개라면? 일일이 font 태그를 달아줘야 한다... 어우; 또한 HTML로 웹페이지를 꾸미는 일이 많아지게 되면 HTML로 이루어진 웹페이지가 정보를 전달하는 기능적 가치가 떨어지는 문제가 발생한다. 쉽게 말하면 HTML로 디자인, 정보 둘 다 기능하는 웹페이지에서는 어떤 정보를 수정할 때 디자인 코드는 건드리지 않게 조심해야 한다(라고 내 맘대로 이해했다) . 즉, 디자인 편집과 정보 수정을 별개로 다루기 힘들다는 것. 따라서 웹페이지의 디자인 기능을 전담할 언어가 필요한데, 이게 CSS이다. CSS 문법..