arongsnuna

01. 미디어쿼리 소개 미디어쿼리란 pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문 반응형 자연스러운 리사이징 적응형 뚝뚝끊겨서 반응함 미디어쿼리 media min-width와 max-width로 브라우저 가로폭 설정 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css속성으로 대체하겠다는 의미 .media { width: 500px; height: 500px; background-color: red; } @media (min-width: 320px) and (max-width: 800px) { width: 300px; height: 300px; background-co..

01. Transform transform -> object의 각도조절, 크기조절, 위치 변경 rotate: 평면적인 회전 (입력한 각도만큼 회전, 음수도 입력 가능) scale: 확대 축소 (숫자는 비율을 의미) skew: 입체적인 회전 (x축 y축을 기준으로 입력한 각도만큼 비틂) translate: 선택한 오브젝트의 좌표 변경 - x축으로 이만큼, y축으로 이만큼 접두사를 이용해 각 브라우저의 하위버전에서도 사용할 수 있음 02. Transition transition -> 변화하는 과정을 보여주고 싶을때 property: 효과를 적용하고자 하는 css 속성 duration: 효과가 나타나는데 걸리는 시간 timing-function: 효과의 속도 delay: 특정 조건 하에서 효과 발동 trans..

01. 박스 모델 margin, padding -> border를 기준으로 margin-left border 바깥쪽에서 왼쪽에 여백을 만듦 padding-left border 안쪽에서 왼쪽에 여백을 만듦 공간이 여백을 포함한 크기로 변경되는 점 유의 margin과 padding 작성 방법 top right bottom left 순서로 한 줄에 작성 가능 02. Block 요소와 Inline 요소 Block 요소 p 태그 줄바꿈 현상이 나타남 width / height 값 사용 가능→공간 만들기 가능 margin과 padding 값 사용 가능→상하 배치 작업 가능 Inline 요소 a 태그 width / height 값 적용 불가 margin / padding / bottom 값 적용 불가형제지간의 마진 ..

01. 웹을 구성하는 요소 프로그래밍이란? 컴퓨터와 소통하는 방법을 의미 컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정 가능 웹 개발을 하기 위한 언어로 브라우저와 소통 HTML, CSS, JavaScript HTML: 정보 또는 설계도 CSS: 디자인 또는 스타일링 JavaScript: 기능과 효과 웹사이트 제작시 고려 사항 웹표준 웹사이트를작성할때따라야하는공식표준이나기술규격 웹접근성 장애의여부와상관없이모두가웹사이트를이용할수있게하는방식 크로스 브라우징 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법 02. HTML 주요 태그 살펴보기 HTML이란? Hyper Text Markup Language 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 HTML ..