반응형 웹이란 웹을 이용하는 브라우저의 크기에 따라 다르게 표시하는 것을 의미한다. CSS 내부에서 @media 쿼리를 이용하여 구현할 수 있다. 위와 같이 소스를 구성하였다. 의 기본 속성은 파란색 배경과 하얀 글씨이다. 여기서 @media 쿼리문을 이용하여 스크린의 width값이 700px 보다 큰 작은 경우에는 배경을 빨간색과 검은 글씨로 바뀌도록 하였다. 여기서 max-width:700px 가 의미하는 것은 screen_width700px를 의미하므로 스크린의 크기가 최소 700px까지 아래의 속성을 적용한다. 위의 사진이 스크린의 크기를 조정하여 출력된 결과이다.
Box model이란 CSS에 있어서 매우 중요한 요소이다. 내용물을 포함하여 margin, border, padding 을 조정하는 사각형의 모델이다. 위와 같이 파란색 부분은 실제 내용물이 들어가는 공간이다. 초록색은 padding으로써 해당 박스의 경계 내의 범위이다. border는 경계로서 굵기를 조절할 수 있다. margin은 실제 내용의 경계 밖 범위이다. 이외에도 width는 넓이를 뜻하고, height는 높이를 뜻한다. padding과 margin이 헷갈릴 수 있는데 경계를 기준으로 안과 밖의 범위라고 생각하며 된다. 이 모든 속성은 CSS속성으로 쉽게 제어할 수 있다.
HTMLhypertext Markup Language - 웹 문서를 기술하기 위해 사용되는 국제 표준언어이다.- 마크업(Markup) 언어로서 태그(Tag)를 사용하여 데이터의 구조를 표현한다.- HTML 문서는 ASCII코드로 구성된 일반적인 텍스트 형태이다.- HTML 문서는 일반 에디터(메모장), 워드프로세서, 홈페이지 제작 도구를 통해 작성한다. HTML 문서의 구조- HTML 문서의 구조는 태그로 시작해서 태그로 종료한다. - html 문서 시작 - 머리(헤드)끝 -몸체(본문)시작 문서의 내용 - 몸체(본문)끝 -html 문서 끝 HTML 태그 태그의 사용- 태그는 시작 태그와 종료 태그가 한 쌍을 이루어 사용된다.- 종료 태그가 없는 태그도 있다.- 태그 이름은 대소문자를 구별하지 않는다.- ..
- Total
- Today
- Yesterday