Web/css5 css 미디어 쿼리 반응형 웹을 만들기 위해선 미디어쿼리를 사용해야한다. 반응형 웹이란 예를들어 웹의 화면이 일정 크기 이상일때는 어떠한 동작, 이하일때는 어떠한 동작 등 여러가지 크기의 화면에서 동작할 수 있게 한다. 화면의 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 형태로 바뀌게 하는것을 반응형 웹(Responsive Web)이라고한다. @media 이하부터 스타일 태그가 닫히기 전까지는 미디어 쿼리의 예시이다. 위의 코드 display:none은 화면에 출력시키지 않겠다는 코드이며 위의 결과와 같이 잘 동작하는 것을 볼 수 있다. css 그리드 그리드는 display속성의 값이다. display 속성의 값으로는 block, inline 등 다양한 것이 올 수 있는데 그 중 그리드는 두가지 태그의 비율을 정하여 칸을 나눠준다. 그렇게 하기 위해선 div태그 상위의 div태그가 더 필요하다. css 블록 html문서의 태그들은 각자의 크기를 갖는다. 예를들어 h1태그는 줄바꿈이되고 a태그는 줄바꿈이 안되듯이 각자의 크기를 갖고 있다. 위와 같이 border 속성을 주어 해당 크기를 확인해 볼 수 있다. 해당 크기는 diplay 속성을 통해 변경할 수 있다. 선택자는 ,를 통해 여러가지 선택자를 한번에 불러올 수 있다. 위의 코드는 아래와 같이 더 생략하여 작성할 수 있다. ● 박스모델 박스 모델에서는 여러가지 개념이 있다. 먼저 아래의 코드와 결과는 기본 코드와 결과이다. ● padding padding 개념은 content와 테두리 사이의 간격이다. ● margin margin은 테두리와 테두리 사이의 간격이다. ● display block, width, height block level의 특성은 화면.. css 선택자 ● 선택자 우선순위 html문서 내부에서의 css 선택자는 우선순위를 갖는다 여기서 모든 링크를 검은색 색상으로 변경으로 변경하고, 현재 선택된 페이지는 붉은색으로 표시하고 읽었던 페이지는 회색으로 표시하려 한다. 색상이 변경된 것을 볼 수 있다. ● 방법 1 (인라인 속성 이용) 방법 1은 코드의 중복이 발생하기 때문에 좋지 못한 방법이다. html태그의 속성중에는 class 속성이 있는데 위 방법을 사용하면 더 중복을 없앨 수 있다. ● 방법 2 (class 속성 이용) html 속성중 class를 사용하여 전체 색상을 변경할 수 있다. 스타일태그 내부에서 클래스 값이 saw인 경우를 불러오고 싶다면 . 을 꼭 앞에 작성해줘야 한다. 여기서 실제 머무르는 페이지는 빨간색으로 추가적으로 표시해주고 싶다.. css 기본 ● css Basic css는 html로 작성된 문서의 디자인 요소를 정하는 언어이다. : 스타일 태그는 html 문법인 동시에 해당 태그 내에 있는 것은 css이기 때문에 css의 언어 문법에 맞게 해석한다. style 태그는 head 태그 내부에 작성한다. a { ← Selector color:red; ← Declaration } ↑Property:Value; 모든 a 태그의 content color을 빨간색으로 바꾼다. html에서 색상을 변경할때는 하고싶은 부분 모두 태그를 사용하여 하나하나 사용해야하지만, css언어를 활용한다면 많은양을 일괄적으로 처리할 수 있어 효율적이다. 스타일 태그를 사용하지 않고도 html 문서에 속성 값을 통하여 css언어를 사용할 수 있다. CSS 위처럼 태그 내부에.. 이전 1 다음
